Category: javascript

Category Added in a WPeMatico Campaign

Safari performance of custom mouse with javascript very low with Google Maps on page

I have this issue with smoothness on my webpage on safari, in particular a custom cursor which is set as following:

Moving the cursor (get called every mousemove)

const moveCursor = (e)=> {
  const mouseY = e.clientY;
  const mouseX = e.clientX;
  $cursor.style.transform = `translate(calc(${mouseX}px - ${$cursor.offsetWidth / 2}px), calc(${mouseY}px - ${$cursor.offsetWidth / 2}px))`; 
}

When loading a google maps via Javascript even without adding any styling or markers, you can see a huge decrease in performance on the page.

Loading the map once

function initMap() {
    map = new google.maps.Map($map, {
             center: location,
             zoom: zoom,
             disableDefaultUI: true
          }
}

initMap();

Any idea how to prevent this from happening and have smooth cursor? when using a normal cursor you see the performance increases.

NOTE: This is particular in Safari, Chrome and others are totally not an issue

Lerna sync with latest version from registry

We have a monorepo setup (using lerna) to handle multiple packages. Now when some updates are made to certain packages, the version number are bumped up and published via a jenkins job that also commits back the updated version no. to the branch that was used to run the jenkins build with.

The issue we’re currently facing is that when a new version is published from a certain branch say “feature/A”, it would update the version of that same package from 1.0.0 to 1.0.1 in this branch. But all the other branches are still at version 1.0.0, and if a user B with branch “feature/B” tries to run a the same publish jenkins job, they see an error stating that version 1.0.1 already exists and so the publish fails.

So we’re looking for a way that allows the user to run a local script or lerna command on their branch “feature/B” locally that pulls the latest version from registry and updates the version in local their to 1.0.1, so that when user B pushes this code and runs the publish job, he is able to publish 1.0.2 successfully.
An equally helpful solution would be if somehow we can ask lerna to skip already existing package version nos and just publish the next version no. i.e skip for 1.0.1 and directly go to publish 1.0.2.

Similar question to – How to manage canary version bump in monorepo with lerna from different branches

We are currently manually updating the package version nos locally when we encounter this issue which isn’t ideal and we would like to automate this.

Uncaught TypeError: Failed to execute ‘append’ on ‘FormData’: parameter 2 is not of type ‘Blob’

React is used in this project. Images should be uploaded to the backend into a media folder. I would like to use the following request generated in postman in my JavaScript code:

var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer /*Token has been removed to keep it secret.*/ ");

var formdata = new FormData();
formdata.append("title", "A lot of Piano");
formdata.append("description", "Many Pianos for Classic Piano");
formdata.append("condition", "2");
formdata.append("has_for_this_item", "Anything");
formdata.append("tags", "7");
formdata.append("images", fileInput.files[0], "/C:/Users/Christian/OneDrive/Bilder/Diashow/ISchgl, Schwarzwasser See.jpg");

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: formdata,
  redirect: 'follow'
};

fetch("http://127.0.0.1:8000/backend/api/wants/me/", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Below, you’ll see the response from postman:

{
    "id": 6,
    "author": {
        "id": 1,
        "user": {
            "id": 2,
            "username": "ChrisLiberty"
        },
        "location": "Chur, Switzerland"
    },
    "tags": [
        7
    ],
    "description": "Many Pianos for Classic Piano",
    "title": "A lot of Piano",
    "condition": 2,
    "has_for_this_item": "Anything",
    "created_time": "2023-02-08T13:33:54.642828Z",
    "updated_time": "2023-02-08T13:33:54.642828Z",
    "images": [     
        
        {
            "id": 6,
            "images": "/media/1/ISchgl_Schwarzwasser_See_SqgdKUm.jpg",
            "want": 6
        }
    ]
}

I have modified the code a little bit for my needs and I’ve added the following code to into my JavaScript file:

var myHeaders = new Headers();

myHeaders.append("Authorization", `Bearer ${user.acces}`);

var formdata = new FormData();
formdata.append("title", "A lot of Piano");
formdata.append("description", "Many Pianos for Classic Piano");
formdata.append("condition", "2");
formdata.append("has_for_this_item", "Anything");
formdata.append("tags", "7");
formdata.append("images", URL.createObjectURL(document.getElementById("images").files[0]), "/C:/Users/Christian/OneDrive/Bilder/Diashow/ISchgl, Schwarzwasser See.jpg");

var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: formdata,
    redirect: 'follow'
};

fetch(`${baseUrl}/backend/api/haves/me/`, requestOptions)
    .then(response => response.json())
    .then(result => {
        setAction("created")

    })
    .catch(error => {
        console.log('error', error)
        setAction("error")
    });

I’ve received the following error message:
Uncaught TypeError: Failed to execute ‘append’ on ‘FormData’: parameter 2 is not of type ‘Blob’.

The error makes a reference to the following line of code:

formdata.append("images", URL.createObjectURL(document.getElementById("images").files[0]), "/C:/Users/Christian/OneDrive/Bilder/Diashow/ISchgl, Schwarzwasser See.jpg");

I’m looking for a solution to fix it. My aim is that the Create Opertion started in the Java Script file is working as it works in Postman.

Netlify and React Vite: Netlify says “Page not found” upon reloading in Vite and React site

I have the site built in React JS where I am using Vite as a JS Bundler. The problem is, when I deployed the site on Netlify and when reloading the page it says “Page not found”.

I tried adding changing vite.config.jsfile.

import { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
      },
    },
  },
  plugins: [react()],
});

I also added .redirects file.

Please provide a solution for this, I see this as a common issue but it hasn’t been addressed much.

How to set the result in a loop. Building the game: rock, paper, scissors

I am working on a game of rock, paper, scissors in the course “The Odin Project.” Unfortunately, I’ve been at a standstill for several days because I can’t figure out how to set the outcome of the duel. I am uploading my code below. I am a beginner so please understand 🙂 I would appreciate your help.

https://github.com/RadekLewandowski/rock-paper-scissors/blob/6f60d9721a3f7e7835e5e9254cb26fcb766bedc2/script.js

Local storage in react isn’t keeping state on a refresh

I’m trying to keep state on a refresh in my React application using this code:

  const [darkMode, setDarkMode] = useState(localStorage.getItem('darkMode') || false);
  const [mode, setMode] = useState({bg: 'light', variant: 'light'})

  const toggleDarkMode = () => {
    if (darkMode === true) {
      setMode({bg: 'light', variant: 'light'})
      setDarkMode(false);
      localStorage.setItem("darkMode", false );
    } else {
      setMode({bg: 'dark', variant: 'dark'})
      setDarkMode(true);
      localStorage.setItem("darkMode", true );
    }
  };

toggleDarkMode is called by a button onChange event.

But when I refresh or go to a different URL the state is lost. It’s important to keep this state as its for the dark / light mode.

I have tried calling local storage using window.localStorage and tried to place it in useEffect so it would update constantly but the state still seems to be lost. I’ve also tried parsing it as JSON which a lot of tutorials recommend but that also doesn’t seem to work.

Occasionly on a new page instance I’ll get the error about bg cannot be undefined, which makes me think the state isn’t being stored.

Why is the state being lost and is there a better / more efficient way to do this?

mrtd data group parser

how to parse MRTD(Machine Readable Travel ID) Data Group (FE DG11,DG13) in best practice using Dart?
I tried to convert the data to hex and then decoded the hex into a string but the data returned as rubbish
any article or code to start with?

Function for calculating dice odds when rolling multiple die

I’m working on a way to display dice statistics like you can see at the site https://anydice.com/ , I’ve spent a bit looking through the source code but it’s pretty thick alltogether so i decided to ask here. Basically, all i need help with is making a function that:

  • Lets you pick a dice with a certain amount sides, for example: 6.
  • Lets you pick how many times you want to roll this dice.
  • Returns the percentages of rolling each possible number with said dice.

I know the question might be a bit shitty, but this is kind of my last resort.

So far, I’ve tried finding the functions and stumbled upon this medium blog however I was wondering if it could maybe be done with percentages.

How to give execute in typescript code one after another

How to give execute in typescript code one after another.

I have a two method in like

Mehod1 = () =>{
        let url: string = getUrl;
    var obj:Object[] = getData(); 
        let tempObj: any = {};
    
    for(let i=0; i<alphas.length; i++){
            Object.assign(tempObj, obj[i]);
            let data = {
                Key1: tempObj.value1,
        Key2 : tempObj.value2
            };
            this.callApi()({
                url: url 
                method: "POST",
                data
            })
            .then((data: any) => {
                return data.data;
            })
            .catch((error: any) => {
                throw error;
            });
        }
    } 


Mehod2= async () => { 
    //await Mehod1();

       await Mehod1();
let url: string = getUrl;
        let data = {
                Key1: value1.
        Key2 : value2
        };
        return this.callApi()({
            url: url 
            method: "POST",
            data
        })
        .then((data: any) => {
            return data;
        })
        .catch((error: any) => {
            throw error;
        }); 
    };

I am calling method2 first and from there I am calling method1. I want after executing all the index in loop in method 1 method2 other code should get execute.

What is happening only first index in getting execute in method 1 and then method 2 code is getting execute.

Any suggestion what should I can change.

git clone fails with error: connect ECONNREFUSED 127.0.0.1:80

I’m using isomorphic-git for a project, and when attempting to use git.clone I get the error Error: connect ECONNREFUSED 127.0.0.1:80.

This is a simple reproduction of what I’m trying to do:

import * as git from 'isomorphic-git';
import * as fs from 'fs';
import * as http from 'http';
const git_options = {
    fs,
    http,
    dir: config.git_dir, //yes this is defined
};

const remote_repo = 'dr-vortex/blankstorm';

await git.clone({ ...git_options, url: `https://github.com/${remote_repo}.git` });

I’ve seen this question using canonical git and checked the config with isomorphic-git and none of the values are set.

After navigating to the repository destination I found a complete git repository without a working tree. Doing a git pull fixes everything.

I also tried setting the ref option on the config (in case it was trying to pull the non-existant master branch, since I use main)

Is there a way to fix the error so that a git pull is not necessary?

click to direct download with javascript

I tried the dom-to-image library to download a set of HTML div. The “to-image” part worked just fine, but after the div was converted to an image, I want it also downloaded directly as an image. But I can’t do that.

The dom-to-image docs said you can create an anchor element, and put the attributes there, and activate with the click() function:

let link = document.createElement('a');
link.download = 'my-image-name.png';
link.href = dataUrl;
link.click();

here is the example I made with svelte, it won’t download, if I put the anchor as a child, I can’t click the link. BUT, I can right-click and open in new tab or open image in new tab and also save image as. So I think there’s no problem with the src/URL.

<script>
    import domtoimage from 'dom-to-image'
    let capture, display = false
    
    function close() {
        display = !display
        document.querySelector(".image").remove()
    }
    
    function save() {
        console.log("save")
        display = !display
        domtoimage.toPng(capture)
            .then(function (dataUrl) {
                let link = document.createElement('a');
                link.download = 'my-image-name.jpeg';
                link.href = dataUrl;
                link.click(); //not working
                let img = new Image();
                img.src = dataUrl;
                img.className = "image"
                let show = document.querySelector(".show")
                show.appendChild(link).appendChild(img);
            })
            .catch(function (error) {
                    console.error('oops, something went wrong!', error);
                    //no error logged
            });
    }
</script>

<div class="capture" bind:this={capture}>
    <h1 >Hello World!</h1>
    <p>
        <!-- long text just for example -->
    </p>
</div>

<button on:click={save}>
    save
</button>

<div class="show" class:display={display}>
    <button on:click={close}>
        close
    </button>
</div>


<style>
    .capture {
        background-color:cornflowerblue;
        padding:1rem;
        color:white
    }
    h1 {
        background-color:lavender;
        padding:1rem;
        color:coral
    }
    .show {
        position:absolute;
        top:0;
        width:100vw;
        height:100vh;
        background-color:rgba(0,0,0,0.5);
        display:none;
    }
    .display {
        display:block;
    }
</style>

UPDATE
I recreate the code in codepen and it works, so it’s a svelte problem? or just the svelte REPL environment problem? I need to implement in my own svelte environment later.