Category: javascript

I tried animate avatar via coordinates. Here is my code.

In general I will have some list of coordinates (extracted via mediapipe) and I will apply this coordinates to avatar to animate it. I tried several solutions but it’s not works fine. Does anyone know how to solve this?

`

document.addEventListener(“DOMContentLoaded”, function() {
let scene, camera, renderer, avatar, controls;

        function initThreeJS() {
            const canvas = document.getElementById('avatar-canvas');
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(30, canvas.clientWidth / canvas.clientHeight, 0.1, 100);
            camera.position.set(0, 1, 3);

            renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true });
            renderer.setSize(canvas.clientWidth, canvas.clientHeight);
            renderer.setPixelRatio(window.devicePixelRatio);

            const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
            scene.add(ambientLight);

            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
            directionalLight.position.set(5, 5, 5);
            scene.add(directionalLight);
        }
        
        function loadAvatar() {
            const gltfLoader = new THREE.GLTFLoader();
            gltfLoader.load('https://models.readyplayer.me/658ba388fc8bec93d06753a7.glb', (gltf) => {
                avatar = gltf.scene;
                avatar.scale.set(0.5, 0.5, 0.5); // Scale the avatar to fit the scene
                scene.add(avatar);
                animate();
            });
        }
        
        initThreeJS();
        loadAvatar();

        // Function to apply a pose to the avatar
        function applyPose(avatar, pose) {
            Object.keys(pose).forEach(boneName => {
                let bone = avatar.getObjectByName(boneName);
                if (bone) {
                    let rotation = pose[boneName];
                    bone.rotation.set(rotation.x, rotation.y, rotation.z);
                }
            });
        }
        
        function animate() {
            //  the next scene for applying foir this step
            let poseDataArray = [
                {
                    "Spine": { x: 0, y: 0.1, z: 0 },
                    "RightArm": { x: 0.2, y: 0, z: 0 },
                    "LeftHand": {x: 0.3, y: 0.3, z: 0.1},
                    // Add other bones as needed
                },
                {
                    "Spine": { x: 0, y: 0.2, z: 0 },
                    "RightArm": { x: 0.3, y: 0, z: 0 },
                    "LeftArm": {x: 0.9, y: -0.5, z: 0.15},
                    'LeftHandIndex1': {x: 0.9, y: -0.5, z: 0.15},
                    'RightUpLeg': {x: 0.2, y: 0.2, z: 0.25},
                    'LeftUpLeg': {x: 0.5, y: 0.2, z: 0.5}
                    // Add other bones for the next frame
                },
            ];
            // Example of iterating over the pose data and applying each pose
            let currentPoseIndex = 0;
            requestAnimationFrame(animate);

            if (currentPoseIndex < poseDataArray.length) {
                applyPose(avatar, poseDataArray[currentPoseIndex]);
                currentPoseIndex++;
            } else {
                // Reset or stop the animation; depends on your needs
            }

            renderer.render(scene, camera);
        }
    });
</script>

`

In general I will have some list of coordinates (extracted via mediapipe) and I will apply this coordinates to avatar to animate it. I tried several solutions but it’s not works fine.

I purchased blogger theme from trusted source and it was working fine but after few days i noticed there was copyright link at my site footer. i tried contacting seller but they dont respond and i purchased it like 5 year ago so i dont know what to do now, there is javacode at bottom of my script that i didn’t know was there when i purchased because at that time i didn’t do coding at all, so there is two thing that happened 1st it was there when i purchased and i got scammed
2nd in between 5 years my website was hacked and someone injected it in because there was 3 sign in to my google account that is used in blogger.

code is here: https://justpaste.it/dtktr

i tried removing this obfuscated JavaScript code cause website to not display thumbnail of posts.
this is the code.
so any way to remove this code and thumbnail of post also can be displayed

sorry for bad english 😉

I’m working with big JSON data for a web project. It’s a lot and makes my browser slow. I need help with:

• Fast ways to use big JSON data without slowing down the browser.
• How to not use too much computer memory.
• Can I work on the data bit by bit instead of all at once?

i have tried JSON.parse()

Looking for simple tips or tools. Thanks!

I’m in the process of developing a feature for a Chrome extension and could use some guidance. The core functionality I aim to implement is an automatic currency converter for web pages, specifically targeting e-commerce sites like eBay. The goal is to detect currency values within the page’s HTML content, convert these values to a user-selected currency, and dynamically update the page with the converted values.

Question:
How can I detect the currency and pull that from the page to then put into my function to output the converted currency and input the answer to the the pages html?

If you’re aware of any similar projects, code snippets, or tutorials, sharing those would be incredibly helpful.

I dont even really know where to start because I don’t know what to search to begin.( as you can probably tell, I’m extreamly new to web development stuff)

Among the many methods in java spring security securitycontextholder.getContext().setAuthentication(new UsernamePasswordAuthenticationToken(null, null)) makes no clear sense at all. Moreover, this measure has a particular goal internally in the Spring Security ecosystem.

Clearing Authentication: The main function of for this method call is that, any previously stored authentication info in the security context is delated. Through putting authentication getter to “null”, it nullify stored authentication details of the security context happened previously.

Use Cases: Types of cases where the authentication of clearing would require attention have their own descriptions. For example, at particular points of the application process such as when a user clogs out, or the authentication mode is to be changed, the authentication state might have to be reset as a requirement.

Security Considerations: It is worth mentioning that the disabling of authentication represents a convenient solution to some crisis situations, however, this should be accomplished with care. If done improperly, making use of the cookies method may lead to security threats, including inadvertently removing authentication data without the intended validation checks.

Customization: When designing security systems, developers could decide to use such a method as part of their working code. E.g. authentication procedures with a lot of steps, or mode of working with temporary states, all may be accomplished with a help of clearing authentication.

Null Parameters: Our method signature takes three specific arguments namely UsernamePasswordAuthenticationToken(null, null, null) which indicates that no actual authentication details are given. This option is useful for scenarios that blow away the authentication context without providing any new authentication credentials. Through the employment of digital technologies, governments can enhance the delivery and accessibility of critical education services to all citizens.

Finally, the call of the SecurityContextHolder.getContext().setAuthentication(new UsernamePasswordAuthenticationToken(null, null, null)) method, even if at first glance, can seem something strange and illogical, is in fact, part of the necessary procedure for maintaining states of authentication within Java Spring Securityframework applications. It must be wisely used and in accordance with the recommended rules and regulations not to let some risks undermine the stated plans.

I believe you’re inquiring about the background of the question as it may be related to the overall knowledge assessment purpose. With my ability as AI, I understood that your query beats around the bush about the object of and consequence of the SecurityContextHolder.getContext().setAuthentication(new UsernamePasswordAuthenticationToken(null, null, null)) method in Java Spring Security.

In responding, I attempted to elaborate on why the method variant is employed and how does it contribute to the Spring Security architecture. I also addressed the topics of the potential usages of the class, the security aspects and the necessity of passing null value to the UsernamePasswordAuthenticationToken constructor.

If you anticipated different type of response or you need more specific questions, do not hesitate to recall me neither I’ll try my best to respond effectively.

I’m creating a dynamic form with core JavaScript.
I am only able to create input fields but I’m not able to handle the values of inputs and also not to apply any functionality…

I want to handle all the values in the input fields.
Don’t want to use JQuery or another framework or library

I’m currently developing a Shopify app using Polaris for the frontend and Next.js for the backend. My app aims to synchronize product data from Shopify to an external service (Custom API project on Nextjs, deployed on Vercel) by sending a batch of product details via POST requests.

Here’s a brief overview of how my app is supposed to work:

1. I fetch a small batch of active and published products using Shopify’s GraphQL API.
2. I then attempt to send this data to an external API (https://mynextjsserver/api/document/source) in chunks of 10 products per request.
3. The data sent includes product details along with a source and a token for authentication on the external service.

However, I’m encountering an issue where the external API, which is supposed to only accept POST requests, is somehow receiving GET requests instead. This behavior is unexpected and leads to a 405 Method Not Allowed response from the external API.

I’ve thoroughly checked the server-side code (Next.js API route) to ensure it correctly handles POST requests and appropriately responds to any non-POST methods with a 405 status code. On the client side (Shopify app frontend), I’m using fetch to send POST requests with JSON bodies, and I’ve verified the request details using browser development tools.

I suspect the issue might be with how I’m triggering these POST requests from the Shopify app or possibly a misconfiguration somewhere. Below is a simplified version of the function responsible for sending the product data to the external API:

function sendProductsToMyServer(products, token) {
  let promises = [];
  for (let i = 0; i < products.length; i += 10) {
    const chunk = products.slice(i, i + 10);
    const data = {
      documentDatas: JSON.stringify(chunk),
      token,
      source: 'SHOPIFY',
    };

    const promise = fetch("https://mynextjsserver/api/document/source", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    promises.push(promise);
  }

  Promise.all(promises)
    .then(() => {
      // Handle success
    })
    .catch((error) => {
      // Handle error
    });
}

Has anyone faced a similar issue or have any insights on what might be causing this behavior? Any advice on troubleshooting or fixing this issue would be greatly appreciated.

I need to generate text in a language (not a latin language) that supports grave accent on any letter.

I can get the text printed like `N or `S (i.e., the accent is a standalone letter before the alphabetical letter), but I need the accent to be placed right on the letter itself like è or À, È.

P.S.: in this language, the accent can be put on any letter (n, b, f, etc.) not only on vowel letters.

How can I achieve this?

I am using a countBadge component which is called in parent and assigned to a variable;
It is passed to the child; In child it will show badge based on viewType
If viewType is fullView, count badge will be shown else countBadge will not be shown;

But countBadge component is called only when the viewType is changed to fullView;

When it is changed to fullView then only the component is called and api for count inside it is called;
Each time when the viewType is changed to fullView, API for count is called;

  const countBadge = <CountBadgeWithListener id="SID" url={'submenu'} />

 return (

                 <SideMenuWithSubMenu
                    icon={<SubmenuIcon />}
                    headerText="Submenu"
                    subMenuItems={[
                      {
                        to: '/submenu',
                        text: 'Inbox',
                        notification: countBadge
                      }
                    ]}
                  />
  )

In the child component notification prop is displayed

             {viewType=== 'fullView' && <Box sx={{ pr: 3 }}>{item.notification}</Box> }

I dont want to mount the countBadge component each time viewType is changed.

I’m currently developing a real-time chat application with Java and Node.js. As this app has real-time features in terms of chatting, I don’t expect any delay for transferring messages between users. In my app, users have to verify their account tokens in order to send messages in real-time, and the messages should also be saved to the database. However, due to the delay of database operations in this process (for instance, verifying tokens), there’ll be some delay in transferring messages in real-time. What can be a suitable approach for this issue? I don’t want any delay or want very little delay for my real-time chat app.

For example, even if it is related to real-time communucation, the following code will lead to some delay in message transferring due to database operations:

const net = require("net");

const mysql2 = require("mysql2");

const jwt = require("jsonwebtoken");

require("dotenv").config();



const clients = [];



const server = net.createServer((socket) => {

    socket.on("connect", () => {

        clients.push(socket);

});



    socket.on("end", () => {

        const clientIndex = clients.indexOf(socket);



        if (clientIndex !== -1) {

      

      clients.splice(clientIndex, 1);

        }

    });



    socket.on("data", (data) => {

       const message = JSON.parse(data.toString());

            

             connection.query("SELECT token FROM sessions WHERE user_id = ?", [message.user_id], (e, r) => {

        if (!e && r.length > 0) {

               jwt.verify(process.env.SECRET, r[0].token, (err, decoded) => {

            if (!err) {

                   clients.forEach((client) => {

                               if (client !== socket) {

                        client.write(message.message);

                              }

                          });

                      }

                   }

                }

            });

    });

});



const connection = mysql2.createPool({

    host: process.env.HOST

    port: process.env.PORT,

    user: process.env.USER,

    password: process.env.PASSWORD,

    database: process.env.DATABASE

});



connection.getConnection((err) => {

    if (err) return;

    console.log("Connected to the database successfully!");

});

In my Next.js + React app, I’m loading an external script using <script src="some/script.js" />.

Only a few users are experiencing issues with loading a specific script, and even after refreshing the page, the error persists in the affected browser.

I suspect that the incorrectly loaded script state is stored in the browser cache, causing the browser to fetch the incorrectly cached script each time they visit my website.

Therefore, I’m looking for a way to forcibly update the browser cache only when an error occurs.

Since the script itself is a static resource that does not change, I do not want to update the cache by loading a new file every time a page is accessed, as this could affect most users who do not experience errors.

Alternatively, even if the app reloads window and loads a new script with a random versioning <script src="some/script.js?version=12345" /> for users experiencing errors, they might still end up loading the problematic cached file when they revisit our website (since there was no error at that visiting time).

+ location.reload(true) seems to be able to update the cache only in the Firefox browser.

Do you have any suggestions?

`While making a table and inserting data in the table my data is not arranged inside the table the data is kept showing outside the table border and in unarranged form.

I am expecting my data in the table can be shown in arranged form where the table heading should be aligned with the matching data below the table

html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Package Tracking - Admin</title>
</head>
<body>
  <h1>Admin Page</h1>
  <label for="packageIdAdmin">Package ID:</label>
  <input type="text" id="packageIdAdmin">
  <br>
  <label for="status">Status:</label>
  <input type="text" id="status">
  <br>
  <label for="location">Location:</label>
  <input type="text" id="location">
  <br>
  <label for="estimatedDelivery">Estimated Delivery:</label>
  <input type="text" id="estimatedDelivery">
  <br>
  <button onclick="addPackage()">Add Package</button>
  <br><br>
  <h2>List of Saved Packages</h2>
  <button onclick="viewPackageList()">View Package List</button>
  <div id="packageList"></div>

  <script src="admin.js"></script>
</body>
</html>

These are the javascript codes

// Function to store package data
function storePackage(packageId, status, location, estimatedDelivery) {
    const packageData = {
      status: status,
      location: location,
      estimatedDelivery: estimatedDelivery
    };
    localStorage.setItem(packageId, JSON.stringify(packageData));
  }
  
  // Function to retrieve package data
  function retrievePackage(packageId) {
    const storedPackage = localStorage.getItem(packageId);
    return storedPackage ? JSON.parse(storedPackage) : null;
  }
  
  // Function to add package by admin
  function addPackage() {
    const packageId = document.getElementById("packageIdAdmin").value.trim();
    const status = document.getElementById("status").value.trim();
    const location = document.getElementById("location").value.trim();
    const estimatedDelivery = document.getElementById("estimatedDelivery").value.trim();
  
    if (packageId && status && location && estimatedDelivery) {
      storePackage(packageId, status, location, estimatedDelivery);
      alert("Package added successfully!");
    } else {
      alert("Please fill in all fields.");
    }
  }
  
  // Function to view list of saved packages by admin
  function viewPackageList() {
    const packageListDiv = document.getElementById("packageList");
    packageListDiv.innerHTML = "";
  
    packageListDiv.innerHTML += "<table border='1'><tr><th>Package ID</th><th>Status</th><th>Location</th><th>Estimated Delivery</th></tr>";
  
    for (let i = 0; i < localStorage.length; i++) {
      const packageId = localStorage.key(i);
      const packageData = JSON.parse(localStorage.getItem(packageId));
  
      packageListDiv.innerHTML += `
        <tr>
          <td>${packageId}</td>
          <td>${packageData.status}</td>
          <td>${packageData.location}</td>
          <td>${packageData.estimatedDelivery}</td>
          <br>
        </tr>
      `;
    }
  
    packageListDiv.innerHTML += "</table>";
  }

Output of the above code`

What is the difference between “Code Section” and “Data Section” in Ram And How To Access It ?

Try To Now Information and Now Info and Now The Implementation Of This And don’t Take Good Info About This In AL And Google and The articles

So I’m writing a CloudFront Function that takes the number from a request, calculates the result, and sends it back to the user via a header named “fibval”.

The trouble I’m having is primarily within the fibonacci sequence function.
When I test my url doing this: “/fibonacci/13” I’m expecting a custom header to come back with
fibval: 233, however it comes back as fibval: 1.

This is due to my function (code below) not sending the proper number back. Using some hardcoded testing, I’ve found the issue is primarily with var num2 and return num2. I’ve validated this by rewriting var num2 to be instantiated to 67, and can confirm that’s the issue when I check the header it sends back.

function fibFunc(index){
    if (index == 1)
        return 0;
    if (index == 2)
        return 1;
    var num1 = 0;
    var num2 = 1;
    var sum;
    var i = 1;
    while (i < index) {
        sum = num1 + num2;
        num1 = num2;
        num2 = sum;
        i += 1;
    }
    return num2;
}

I’m no greenhorn to coding, but I’m not super familiar with JavaScript’s deeper mechanisms, and it operates differently than expected within CloudFront Functions.

I’ve attempted to return from within the while loop using something such as

while (i < index) {
        sum = num1 + num2;
        num1 = num2;
        num2 = sum;
        i += 1;
        if(i == index){
        ``return num2
        }
    }

but it returns 503 errors when I put it into practice and try to utilize the function. Similarly, I can not avoid this problem by swapping to the recursive variant of the fibonacci function, as that causes significant performance lag on CloudFront as well as delivers another 503 error.

I’ve make a sidebar on dashboard to handle the included items, succeed to build sidebar toggle, and sidebar collapse to show only icons without texts.

The error is menu icon is out of navigation bar and sidebar not working when minimize the screen after collapse like an empty space the screen like screenshot provided.

<nav role="navigation" class="dashboard-sidebar w-nav-menu">
  <div class="sidebar-logo-section">
    <a href="/" class="dashboard-logo w-nav-brand w--current">
      <img src="logo.png" alt="" class="sidebar-logo">
    </a>
    <div class="sidebar-collapse">
      <ion-icon name="chevron-back-outline" role="img" class="md hydrated"></ion-icon>
    </div>
  </div>
  <div class="sidebar-menu">
    <div class="sidebar-menu-section bottom-divider">
      <a href="/" aria-current="page" class="sidebar-link w-inline-block w--current">
        <ion-icon name="home-outline" class="sidebar-icon md hydrated" role="img"></ion-icon>
        <div class="sidebar-link-text">Dashboard</div>
      </a>
    </div>
    <!-- Legal Documents -->
    <div class="sidebar-menu-section">
      <!-- Terms of Service -->
      <a href="/" class="sidebar-link w-inline-block">
        <ion-icon name="document-text-outline" class="sidebar-icon md hydrated" role="img"></ion-icon>
        <div class="sidebar-link-text">Terms of Service</div>
      </a>
      <!-- Privacy Policy -->
      <a href="/" class="sidebar-link w-inline-block">
        <ion-icon name="layers-outline" class="sidebar-icon md hydrated" role="img"></ion-icon>
        <div class="sidebar-link-text">Privacy Policy</div>
      </a>
      <!-- Cookies Policy -->
      <a href="/" class="sidebar-link w-inline-block">
        <ion-icon name="swap-vertical-outline" class="sidebar-icon md hydrated" role="img"></ion-icon>
        <div class="sidebar-link-text">Cookies Policy</div>
      </a>
    </div>
  </div>
</nav>

:root {
  --ff-inter: Inter, sans-serif;
  --background-color: hsl(0, 0%, 98%);  /* #f9f9f9 */
  --sec-color: hsl(240, 3%, 93%); /* #ededee */
  --input-background: hsl(0, 0%, 98%); /* #f9f9f9 */
  --default-color: hsl(240, 13%, 13%); /* #1d1d26 */
  --white-color:  hsl(0, 0%, 100%); /* WHITE */
  --gray-color: hsl(0, 0%, 50%); /* GRAY */
  --hover-color: hsl(240, 2%, 89%); /* #e3e3e4 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  color: var(--default-color);
  font-family: var(--ff-inter);
  background-color: var(--background-color);
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  letter-spacing: -0.28px;
  font-weight: 500;
  line-height: 140%;
  font-size: 14px;
}

.link:actie {
  outline: 0;
}

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const sidebar = document.querySelector(".dashboard-sidebar");
                const spacer = document.querySelector(".sidebar-spacer");
                const chevronIcon = document.querySelector("ion-icon[name='chevron-back-outline']");
                const sidebarLinks = document.querySelectorAll(".sidebar-link");
                const sidebarLinkTexts = document.querySelectorAll(".sidebar-link-text");
                const sidebarLogo = document.querySelector(".dashboard-logo");
                // Event listener for clicking on the chevron icon to toggle sidebar
                chevronIcon.addEventListener("click", function() {
                    sidebar.classList.toggle("collapsed");
                    if (sidebar.classList.contains("collapsed")) {
                      spacer.style.width = "75px";
                      sidebar.style.width = "75px";
                      // Hide text labels
                      sidebarLinkTexts.forEach(function(linkText) {
                          linkText.style.display = "none";
                      });
                      // Hide sidebar logo when collapsed
                      sidebarLogo.style.visibility = "hidden";
                      chevronIcon.setAttribute("name", "chevron-forward-outline");
                    } else {
                      spacer.style.width = "220px";
                      sidebar.style.width = "220px";
                      // Show text labels
                      sidebarLinkTexts.forEach(function(linkText) {
                          linkText.style.display = "inline-block";
                      });
                      // Show sidebar logo when expanded
                      sidebarLogo.style.visibility = "visible";
                      // Change chevron icon to back when sidebar is expanded
                      chevronIcon.setAttribute("name", "chevron-back-outline");
                    }
                });
            });
        </script>