Category: javascript

Category Added in a WPeMatico Campaign

How do i disable Node’s/npm Intellisense on VSCode for certain workspaces?

Learning programming/coding (in this case Javascript) at school, wanted to do a small little project for myself. I installed Nodejs & npm and made a little script.

The problem I’m having now, is that I’m getting auto-complete options for Nodejs imports, even for (school)projects I don’t want nodejs to kick in.

So my question is: is there a way to disable these autocomplete options for projects where I’m not planning on using Nodejs/npm libraries?

For example: i write “console”, VSCode gives me the option to add “const Console = require(“console”).
autocomplete when writing “console”

Another example: i write “cons”, VSCode gives me way more autocomplete options for other imports(/requires) that I don’t care about right now…
autocomplete when writing “cons”

How can I embedded an image editor like Canva Button

I am planning to create a image editor that can be integrated to websites like Canva Button.
How can I create something like that. Is there any open source solution for this. I am new to Next.js and I am not sure how can I implement this feature.

Thank you.

I checked the codes of Canva Button API but its not clear.

how to stretch the video feed from camera on p5.js

I’m using p5.js and created a program not using canvas(). Here’s my code:

        function setup() {
          asciiDiv = createDiv();
          noCanvas();
          video = createCapture(VIDEO);
          video.size(64, 48);
        }

how do I increase/stretch the size of the video to full screen without hurting the aspect ratio?

        function setup() {
          asciiDiv = createDiv();
          noCanvas();
          video = createCapture(VIDEO);
          video.size(64, 48);
        }

Issue with simple java app that removes background from one image and overlays it onto another image and downloads the processed image

essentially what i’m trying to create is a simple Java app that when an image is uploaded it removes the black from the background and makes it transparent, then stores this image. Then, the image from this URL ‘https://pasteboard.co/VA1RxuEWqS4u.jpg’ is used as a background image and the javascript overlays the image with the background that has been removed onto the pasteboard one and automatically downloads the finished result. When I run this, nothing happens, any help would be greatly appreciated.

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Background Remover and Overlay</title>
<style>
  #upload-btn {
    width: 100px;
    height: 40px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
</head>
<body>
<input type="file" id="file-input" style="display: none;">
<button id="upload-btn">Upload Image</button>
<script>
document.getElementById('upload-btn').addEventListener('click', function() {
  document.getElementById('file-input').click();
});

document.getElementById('file-input').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function(e) {
    const img = new Image();
    img.onload = function() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      
      // Draw the image on the canvas
      ctx.drawImage(img, 0, 0);
      
      // Get the image data
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const data = imageData.data;

      // Remove black background (set alpha to 0 for black pixels)
      for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Check if the pixel is black (you can adjust the threshold as needed)
        if (r < 30 && g < 30 && b < 30) {
          data[i + 3] = 0; // Set alpha to 0
        }
      }
      
      // Put the modified image data back onto the canvas
      ctx.putImageData(imageData, 0, 0);

      // Convert canvas to image and download
      const transparentImageUrl = canvas.toDataURL('image/png');
      
      // Load the overlay image from the hosting website
      const overlayImageUrl = 'https://pasteboard.co/VA1RxuEWqS4u.jpg';
      const overlayImg = new Image();
      overlayImg.crossOrigin = 'anonymous';
      overlayImg.onload = function() {
        // Draw the overlay image on the canvas
        ctx.drawImage(overlayImg, 0, 0, canvas.width, canvas.height);
        
        // Convert canvas to image and download the final image
        const finalImageUrl = canvas.toDataURL('image/png');
        const downloadLink = document.createElement('a');
        downloadLink.href = finalImageUrl;
        downloadLink.download = 'final_image.png';
        downloadLink.click();
      };
      overlayImg.src = overlayImageUrl;
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
});
</script>
</body>
</html>

Join function is not working in javascript properly [closed]

I have one issue with my javascript code where I’m using join function.
I have this object.

const temp = {
    "sub": "اختبار تشتيت الانتباه",
    "dpt": "الجبيل",
    "work": "المنطقة الشرقية",
    "test": "6935",
    "Vspec": "Test Value"
}

when I’m doing this:-> [temp.sub, temp.test].join(“, “) it is producing different output where temp.test number is getting appended first.

when I’m using this: [temp.sub, temp.test].join(“, “) then output should be temp temp.sub first & then temp.test.

const temp = {
    "sub": "اختبار تشتيت الانتباه",
    "dpt": "الجبيل",
    "work": "المنطقة الشرقية",
    "test": "6935",
    "Vspec": "Test Value"
};

console.log([temp.sub, temp.test].join(", "));

kindly help. Thanks

Set initial shade darkness in Apex Chart Heatmap

I am using an Apex Chart heatmap.

My issue is the value range I am passing in for my series data is around 0.01 – 300.

This means that values of around 0.01 – 5 are practically invisible in the chart because they are so light and the only way I know they are there is if I hover over them and the tooltip tells me.

I am my chart options are –

var options = {
    series: data,
    chart: {
        height: 650,
        type: 'heatmap',
    },
    dataLabels: {
        enabled: false
    },
    colors: ["#008FFB"],
    title: {
        text: 'HeatMap Chart (Single color)'
    },
}

I got somewhere when I added –

plotOptions: {
    heatmap: {
        enableShades: true,
        shadeIntensity: 1,
        reverseNegativeShade: true,
        colorScale: {
            ranges: [
                {
                    from: 0.001,
                    to: 5,
                    color: '#008FFB'
                }
            ]
        }
    }
}

This at least meant that if a value was under 1, it showed up on the chart in a visible shade, however this offset the entire heat map because in some case values of 5 were darker than values of 6 because of the range difference.

How can I set the initial shade on load (for the one range of whatever my lowest and highest values are) to make sure that boxes are dark enough to see?

how do i send httponly cookie with fetch request in nextjs

I’ve completed this guide guide and now want to retrieve user details using a server component, but my cookie doesn’t appear to be in the request.

I customised my profile page and made it into a server component, but when I reload the page to call the fetch request, no token cookie is present. I have checked this with the following lines of code in the route handler

    const token = request.cookies.get("token")?.value || "";
    console.log(token, "token");

Async await function result in js

Please tell me why in this code:

function print() {
   console.log("1");
 }
   console.log("2");

 async function foo() {
   console.log("3");
   await print();
   console.log("4");
 }

 foo();

 console.log(5);

Output is: 2 3 1 5 4
But not: 2 3 1 4 5

What’s reason?

see above

I expected that result : But not: 2 3 1 4 5
But Output is: 2 3 1 5 4

Is there a way to lint event listener types in JS/TS?

I use eslint and tslint to help me avoid silly mistakes.

However, today, I made a mistake when declaring an event listener to catch uncaught promise rejections:

   window.addEventListener('unhandledRejection', debugError)

The correct type is unhandledrejection, not unhandledRejection. I wasted a lot of time debugging this before I realized I had made a typo. Given the prevelance of camelCase in JS, I fear I will make the same mistake again.

Is there some way to lint this against known event types? I don’t use any custom events in my app.

Check array of dates to see if increasing

I want to check an array of dates to see if they are increasing. For example, [’12/12/2023′,’13/12/2023′] would return true. However, [’12/12/2023′,’11/12/2023′] would return false.
I have been playing around with a function suggested by users for checking integer values. I thought I could do the same but use dates instead.

Here is the function:

function isIncreasing(dates) {
    for (var i = 1; i < dates.length; i++) {
        let convertedToDate = new Date(dates[i]);
        //console.log(currentDate);
        if (convertedToDate[i] !== convertedToDate[i - 1] && convertedToDate[i] != convertedToDate[i - 1] + 1) {
            return false;
        }
    }
    return true;
}
console.log(isIncreasing(['12/12/2023','11/12/2023','10/12/2023']))

The function does not work as the above returns true. Any help is appreciated.

Multiple different named images don’t working in jquery magic 360 plugin

I have multiple images and they’re named in different names and extension. I’m using magic 360 javascript plugin version 4.6.13. In frontend the page is show only tree.jpg. and magic360 dont working when I drag skin. in console there’s nothing errors. I made by doc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Integrated 360 Magic Spin Viewer</title>
    <link rel="stylesheet" href="assets/css/magic360.css">
    <script src="assets/js/magic360.js"></script>
</head>
<body>

    <style type="text/css">
        #gallery {
            width: 500px; /* Adjust the width as needed */
            height: 400px; /* Adjust the height as needed */
            margin: 0 auto;
        }

        .magic360 {
            width: 100%;
            height: 100%;
        }
    </style>

    <div id="gallery">
        <a class="Magic360" data-options="images: images/nature/tree.jpg images/car_slides/mountain.webp">
            <img src="images/nature/tree.jpg">
        </a>
    </div>

<!-- Your HTML content here -->
<script>
    var Magic360Options = {
        columns: 6
    };
</script>
</body>
</html>

send file to whatsapp cloud api using the media endpoints

Im using the whatsapp api to generate a file and send it to whatsapp api. I first test all parameters by postman and everything was great, postman generated this code:

const myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer token");
myHeaders.append("Cookie", "ps_l=0; ps_n=0");

const formdata = new FormData();
formdata.append("file", fileInput.files[0], "/C:/Users/Sub2/Documents/Hoja de trabajo.docx");
formdata.append("type", "document");
formdata.append("messaging_product", "whatsapp");

const requestOptions = {
  method: "POST",
  headers: myHeaders,
  body: formdata,
  redirect: "follow"
};

fetch("https://graph.facebook.com/v19.0/{{media_id}}/media", requestOptions)
  .then((response) => response.text())
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

If you use this code it will upload the file to the whatsapp api.
The problem is that in node js its giving an error: {"error":{"message":"(#100) The parameter messaging_product is required.","type":"OAuthException","code":100,"fbtrace_id":"AAql5W804gIHMiKVCxX7InY"}}

The parameter messaging_product is required, but this code: formdata.append("messaging_product", "whatsapp"); add that parameter, i dont know what’s the problem. The only code part that is different in my node code is this formdata.append("file", fileStream); im using the exceljs to generate a file, Thank you for any suggestions.

How to optimistically update the database when a form value changes?

I have this callback function that is called from a child component that updates the form (I’m using react-hook-form) of the parent component

  const goalSetter = useMemo(() => {
    return (value: string[]) => {
      const goals: Goals[] = value
        .map((goal) => stringToEnumValue(goal, Goals))
        .filter((v) => !!v) as Goals[];

      form.setValue('goals', [...goals]);
      await updateUserData('goals');
    };
  }, []);

Problem is the updateUserData function takes a long time to execute and slows down the app. So, it takes about a second to see the visual feedback in the UI.

updateUserData:

  const updateUserData = async (field: ProfileField) => {
    await form.trigger(field);
    if (form.formState.isValid) {
      await updateUser(userDataSchema.cast(form.getValues()));
    } else {
      form.setError(field, {
        type: 'validation-error',
        message: 'Please enter a valid input',
      });
      console.log('form is not valid');
    }
  };

I have tried memoizing the functions but that barely makes a difference. How can I refactor this to do the update part in the background and increase the responsiveness ?

Any help is welcome. Thanks

Can i store and run website versions from a container with no software required

We are developing a website using Blazor.

The bosses would like something set up so each day we can create a build, and store that build on one of our shared drives for company wide viewing.

The purpose is so they can have a record of daily changes forever.

The issue is, they want anyone to be able to click on one button or file name. From this is will launch the entire website in a browser. They require no predownloaded software – this is the big issue!

Originally i was going to create a Docker container each day which i can share. But the company insists that there must be no predownloaded programs required at all.

I think im very stuck. The closest i think i can get is a html file they open to display a single page. But i have no idea how i can locally host and share a website. Without a program such as docker, VS code or other software.

The build files in Blazor are far more complicated than my normal React build files. There are so mnay dependencies required.

Im looking for a way to build or convert a file so i can store it as a zipped folder, then when one of the items inside is clicked on, the whole webpage runs.

I have tried creating a docker image and finding a way to run docker images without downloading the software.