Category: javascript

I’m currently using Vuetify with chart.js I tried to implement a chart.js inside a v-expansion-panel :

          <v-expansion-panels class="my-4" variant="popout">
            <v-expansion-panel title="Item">
              <v-expansion-panel-text>
                <TrajectoryChart :trajectory="coloredLines"></TrajectoryChart>
              </v-expansion-panel-text>
            </v-expansion-panel>
          </v-expansion-panels>

But both animations are not working good together, I would like both animations working smoothly without any latency. I would like to change v-expansion-panel animation’s behavior to not wait for his content to load to expand

Expansion not working

I’ve added a timeout to display my graph after 300ms which remove the latency

<template>
  <div v-if="showChart" id="chart-container" class="rounded pa-2 w-100">
    <canvas ref="chartCanvas"></canvas>
  </div>
  <div id="chart-container-substitute"></div>
</template>

... 

onMounted(async () => {
  showChart.value = true;
  await nextTick();
  setTimeout(() => {
    createChart();
  }, 300);
});

But the expansion is still done in two times but instead of this mini-useless first expansion :

First useless expansion animation

I would prefer that the expansion is done completly in one time.

Any idea how to solve this ?

Hello everyone i’m building a website using laravel framework where users can download templates and themes that suits their needs.

I wan’t to implement a feature where users can preview templates or themes responsively (desktop, mobile and tablet ) before downloading them

What techniques or tools are suitable to achieve this? Any example or recomendations like preview feature on

https://startbootstrap.com/previews/freelancer#google_vignette ,would be appreciated

Thanks in advance

I’m using React Hook Form and have three input fields in a form: a start date, an end date, and a third field that shows the number of nights between the two dates (night difference). I want to update the night difference field whenever the start date or end date fields change. I’m working on the form for booking a vacation by employee, night duration is calculated automatic and also for informational purposes for employee.

I wonder is there a way too not using onChange but inside place the code inside {…register, {…HERE…}}

This is my solution https://codesandbox.io/p/sandbox/chz4z8.

What I want to do is use

 <input type="file" id="file" name="file" accept="image/jpeg,image/jpe,image/jpg,image/png,image/bmp">

To use the camera from the device or select some picture/image, happens when this happens automatically apply OCR and extract the text from the picture/image and put this text on a <input type="text">.

Is this possible to use just JavaScript or some library.js? I know that it is possible to use back end technology, but if it is possible to do this on the front end with JS that would be perfect.

So my goal is to have all my images display as the same size, i.e., if a horizontal image is 1300x1000px, then the vertical images in the gallery should be 1000x1300px. As it is now, the gallery-container has a static size based off the widest width image and that images height, it does not seem to incorporate the tallest images height. This results in a gallery where the horizontal images are larger than the vertical images, i.e., 1300x1000px for horizontals and 800x1000px for verticals.

I’ve tried a ton of different CSS approaches and feel that I really am at a place where Javascript is required to achieve this behavior from the gallery-container.

Thanks for helping!

I have a large form in my Next.js app. I use react-hook-form and zod for managing state of the form and validation.

But this entire form is a separate page. And to make it possible to use react-hook-form hooks I need to use ‘use client’ directive which makes my entire component with the form a client component.

The question is how can I get benefits from Next.js + SSR for similar cases? Or it is fine to make entire page client component?

It also worth mentioning that I have a lot of UI components wrapped in react-hook-form’s <Controller> cuz I need to manually set values and trigger validation in some cases.

Is there any way to utilize SSR in similar cases?

I have a TypeScript function that tries to download a large number of small documents concurrently. Here’s the code:

const bulkDownload = async (analyses: FullAnalysesResponse[]) => {
  setIsLoading(true);

  const promises = analyses.map(async (analysis) => {
    const documentInfo = await getDocumentInfo({ documentId: analysis.downloadFileId! });
    const attachment = await downloadDocument({ documentId: analysis.downloadFileId! });
    FileSaver.saveAs(new File([attachment], documentInfo.name, { type: documentInfo.mimeType }));
  });

  const results = await Promise.allSettled(promises);

  setIsLoading(false);

  results.forEach((result, index) => {
    const analysisSerialNumber = analyses[index].deviceSerialNumber;
    result.status === 'fulfilled'
      ? successfulQueries.push(analysisSerialNumber)
      : failedQueries.push(analysisSerialNumber);
  });

  return { failedQueries, successfulQueries };
};

The issue is that when I trigger this function to download multiple files at once, not all the files are downloaded. The number of downloaded files changes every time I run the function, and I never get all the files. All the API calls are working, so all the promises are successful. The issue seems to come from the FileSaver.saveAs function.

I also tried a version that uses a simple for...of loop, which works fine:

const bulkDownload = async (analyses: FullAnalysesResponse[]) => {
  setIsLoading(true);
  
  const successfulQueries: string[] = [];
  const failedQueries: string[] = [];

  for (const analysis of analyses) {
    try {
      const documentInfo = await getDocumentInfo({ documentId: analysis.downloadFileId! });
      const attachment = await downloadDocument({ documentId: analysis.downloadFileId! });
      FileSaver.saveAs(new File([attachment], documentInfo.name, { type: documentInfo.mimeType }));
      successfulQueries.push(analysis.deviceSerialNumber);
    } catch (error) {
      failedQueries.push(analysis.deviceSerialNumber);
    }
  }

  setIsLoading(false);

  return { failedQueries, successfulQueries };
};

The for...of version works reliably but is slower since it downloads the files sequentially. I would like to understand why the first (concurrent) function is not working as expected. I assumed that running the downloads concurrently would be more efficient.

Any insights on why this happens, and how to fix it while keeping the performance benefits of concurrent downloads?

I need to merge two pdf files, in my case, the second must start where the first ends. I mean, it can not exist blank spaces between the content of the two files. At this time i can merge it but the content of the second starts on a new page

const newPdfDoc = await PDFDocument.load(newPdfArrayBuffer);
    for (let i = 0; i < newPdfDoc.getPageCount(); i++) {
    const [newPage] = await pdfDoc.copyPages(newPdfDoc, [i]);
        //...
        //. some stuff like scale, setFonts, fontSizes, etc 
        //...
    }
    pdfDoc.addPage(newPage);

In JavaScript we have ES6, but also ESM / CommonJS / ESM2022 / FESM2022 / ESM2015 etc.

Could someone explain me what is what ? I understand correctly that ES6 is version of JS but rest of staff (ESM, FESM, COMMONJS) are type of modules?

I am using a modified version of this w3schools tutorial for a magnifying glass W3Schools. I’m trying to make my glass as functional as possible, dealing with it being able to render even on the furthest edges of my image.

Unfortunately I’m having an issue with the top and left edges “freezing” the glass whenever the edge of the glass reaches the edge of the image. This is most likely due to the glass rendering the image from the top left corner, creating the problem of trying to render part of an image that doesn’t actually exist.

My question is how can I get my glass to render the zoomed image all the way up to the edges of the image, while still keeping the glass centered over my cursor. I want the overflow to smoothly be able to hide outside of the image, without constraining the glass at all within the image itself.

I attached the full code here: FullFiddle and a testable example here: TestFiddle (may have to press run again to get the glass to update properly). Notice how the top and left edges don’t magnify properly all the way to the edge while the bottom and right edges do. Let me know if theres any other questions.

    // The moveMagnifier function sets the position of the glass to the position of the cursor
    function moveMagnifier(e) {
         e.preventDefault();

         pos = getCursorPos(e); // Calls function to get cursor position
         x = pos.x;
         y = pos.y;

         glass.style.left = `${x - w}px`; // Centers glass position over cursor
         glass.style.top = `${y - h}px`;

         glass.style.backgroundPosition = `-${x * zoom - w}px -${y * zoom - h}px`;
         
         }

     // Function for finding the cursor based on the bounds of the image
     function getCursorPos(e) {
         let xPos = e.clientX - imgRect.left; // Gets cursor position based on image position
         let yPos = e.clientY - imgRect.top;
         return { x: xPos, y: yPos };
         }

TLDR: Magnifying glass is extending out of bounds and want it to be able to handle zooming in on the edges of the image.

P.S: If anyone has a better way to handle hiding the actual overflow of the glass or any other corrections please let me know.

I would assume a solution would be to create an invisible padding of sorts around each image that still allows it to render properly. I don’t know how I would go about that properly though.

I have an issue when user chooses forgot password. The forgot password form appears user enters email, user get’s alert to check there email and user clicks link which take you to reset form. The user type in new password password. I get alert saying password reset successful. User gets routed to login page. When I type in new password and it says Password or User name is incorrect. So its not being updated. I’m thinking it has something to do with way I’m doing my update. It not being updated in database. My console.log and alerts confirm its reaching service and endpoints. If someone can please point me in the right direction I would be so grateful. . I have included only necessary code snippet:

Reset Password Component:

 let resetObj={
 token: this.token,
  Password: this.form.value.password
 }

 //This gets called on submit
  this.accountService.resetPassword(resetObj)

      .subscribe({
          next: () => {
              this.alertService.success('Password reset successful, you can now login', 
               { keepAfterRouteChange: true });
                this.form.reset();
                this.router.navigate(['../../login'], { relativeTo: this.route });
              },
          error: error => {
              this.alertService.error(error);
           
          }
      });

accountService:

  resetPassword(resetObj: any) {
    return this.http.post(`${this.apiUrl}/reset-password`,  resetObj);
  }

endpoint:
controller.js

  router.post('/reset-password', passwordReset)

 function passwordReset(req,res, next){
 console.log("Does it goet to password reset");

     const token = req.body.token;
     const newPassword = req.body.password; 
     
     console.log("What do  properties hold" + " " + " " + newPassword + " " + " " + 
      token)
       userService.resetPassword(token, newPassword)
       .then(() =>res.json({}))
        .catch(err => next(err));          

   }

userservice:

   async function resetPassword(token,  newPassword, result,res){

    console.log("InsideresetPassword Service")
    console.log("whats in token", token); 
    console.log("What is new password", newPassword);


     jwt.verify(token,process.env.JWT_Secret, async(err, data) =>{
    console.log("Does it get to this if")
      if(err){
        console.log("Reset Link is Expired");
      }else{ 
        console.log("Does it get to else in reset service")
        const response = data;
        const user = await User.findOne({email: {$regex: '^'+ response.email+"$", 
        $options: 'i'}});
        console.log("Whats email", user.email)
        const salt = await bcrypt.genSalt(10);
        const encryptedPassword = await bcrypt.hash(newPassword, salt);
        user.password = encryptedPassword;
       
        try{
            const updateUser = await User.findOneAndUpdate(
               {_id: user._id},
               {$set: user},
               {new: true}  //can show update
             
            )
           
              console.log( "Password Updated")
            

          }catch(error){
            console.log("Something went wrong while redirecting passwor


          }
        

        }


      
     })

 } 
  

I am trying to write some data into DynamoDb. I’ve created the table with a partition key called s3jsonfile (String), and a sort key called messageId (String).

My main goal is to use this table to track the progress of my processing. Since my logic is based on receiving SQS messages, i’m gonna write there how many entries from the SQS message were processed, total number of entries, message number and the s3 key.

For writing, i’m passing to the function the s3jsonfile (partitionkey) and messageId(sort key).

I’ve verified the data i’m passing multiple times, its even included on my debugging. However, i’m always receiving this error:

Error initializing message processing: TypeError: Cannot read properties of undefined (reading '0')
    at Object.visit (/home/ec2-user/node-project/node_modules/@aws-sdk/client-dynamodb/dist-cjs/index.js:1003:36)
    at se_AttributeValue (/home/ec2-user/node-project/node_modules/@aws-sdk/client-dynamodb/dist-cjs/index.js:2544:25)
    at /home/ec2-user/node-project/node_modules/@aws-sdk/client-dynamodb/dist-cjs/index.js:2743:16
    at Array.reduce (<anonymous>)
    at se_ExpressionAttributeValueMap (/home/ec2-user/node-project/node_modules/@aws-sdk/client-dynamodb/dist-cjs/index.js:2739:32)
    at ExpressionAttributeValues (/home/ec2-user/node-project/node_modules/@aws-sdk/client-dynamodb/dist-cjs/index.js:3102:39)
    at applyInstruction (/home/ec2-user/node-project/node_modules/@smithy/smithy-client/dist-cjs/index.js:1092:27)
    at take (/home/ec2-user/node-project/node_modules/@smithy/smithy-client/dist-cjs/index.js:1060:5)
    at se_UpdateItemInput (/home/ec2-user/node-project/node_modules/@aws-sdk/client-dynamodb/dist-cjs/index.js:3096:40)
    at se_UpdateItemCommand (/home/ec2-user/node-project/node_modules/@aws-sdk/client-dynamodb/dist-cjs/index.js:1360:25)
Parameters used: {
  TableName: 'messageProcessingTable',
  Key: {
    s3jsonfile: 'converted_data_1726002816321.json',
    messageId: 'Message 1 of 1'
  },
  UpdateExpression: 'SET totalEntries = :totalEntries, entriesProcessed = :entriesProcessed, processingStatus =

:processingStatus, lastUpdated = :timestamp’,
ExpressionAttributeValues: {
‘:totalEntries’: ‘6’,
‘:entriesProcessed’: ‘0’,
‘:processingStatus’: ‘0’,
‘:timestamp’: ‘2024-09-10T21:13:45.990Z’
}
}

I’ve double checked my schema, my function to write the data, and i still can’t figure out the problem. Also, i’m using AWS SDK v3 so there is no need to pass S for string and N for number (thats why i’m passing to the update command the entire string).

The error is happening because i still have no data on this table?
The goal on this specific method is to initialize writing the data on this s3jsonfile (key) with the values i provided inside the method (sorting key).

I’m kinda new to DynamoDB. I don’t know if i should create my table in another way (without a sorting key maybe). Any input is highly appreciated, and sorry for the english.

Below is my code. Any additional information i’ll be glad to reply. If something on my post isn’t clear, please let me know. Thanks a lot.

// Initialize the message processing entry
const initializeProcessing = async (s3jsonfile, messageId, totalEntries, messageProcessingTableName) => {
    console.log('S3 Key:', s3jsonfile);
    console.log('Message Info:', messageId);
    console.log('Total Entries:', totalEntries);

    const params = {
        TableName: messageProcessingTableName,
        Key: {
            s3jsonfile,    // Partition key
            messageId      // Sort key
        },
        UpdateExpression: 'SET totalEntries = :totalEntries, entriesProcessed = :entriesProcessed, processingStatus = :processingStatus, lastUpdated = :timestamp',
        ExpressionAttributeValues: {
            ':totalEntries': totalEntries.toString(),  // Ensure this is a string
            ':entriesProcessed': '0',  // Plain string
            ':processingStatus': '0',  // Plain string
            ':timestamp': new Date().toISOString()  // ISO string for date
        }
    };

    console.log('Parameters for UpdateItemCommand:', JSON.stringify(params, null, 2)); // Detailed logging

    try {
        await dynamoDB.send(new UpdateItemCommand(params));
        console.log(`Message ${messageId} initialized for ${totalEntries} entries.`);
    } catch (error) {
        console.error('Error initializing message processing:', error);
        console.error('Parameters used:', params); // Log parameters for debugging
    }
};

EDIT: To clarify, on this method the entriesProcessed is static as 0 because it will be updated when the processing logic is done. Also, processing status will be updated only when all entries from the json are processed. Thats why their attributes are like static strings now.

Ok hi. Im having a lot of problems with a project im building. I want to use Ajax to make a request to the Google.Books api so i can make book searches from my website. Its a Asp.net MVC project. Im using Ajax on one of the pages. The documentation says just send a GET request to the url. I wrote the ajax request and I seem to get an 200 ok response but im not getting the json object. Also i want to put the info from the json response to show the title of the book and the author. Possibly a dropdown in html or a select div in html.

$(document).ready(function () {

$('getBookList').submit(function () {
    var key = "AIzaSyAAD3qgVCx8MeoD6aD-CzTasKijPE-Ny3Y";

    $.ajax({
        type: "GET",
        url: "https://www.googleapis.com/books/v1/volumes?q=search+terms&" + key,
        dataType: 'jsonp',
        data: { volumeInfo: title, volumeInfo: authors },
        success: function (data) {

            $('#volumeInfo:title').dropdown("show")(data)
            $('#volumeInfo:authors').dropdown("show")(data)
            $('#q').dropdown("show")(data)

                .fail(function (xhr, status, errorThrown) {
                    alert("Sorry, there was a problem!");
                    console.log("Error: " + errorThrown);
                    console.log("Status: " + status);
                    console.dir(xhr);

                });

        }
    });
});

});

I need help with a chrome extension that would add a button to the bottom of a specific website. The button should link to an edited version of the sites url.

For example, If the URL is https://www.example.com/part1/part2 the button would need to link to https://www.example.com/part3/part2 and I need it to be reusable so I can’t just put a URL there because the part2 will vary. Thanks

I’ve tried searching for solutions, but nothing worked.

Cannot find module ‘.prisma/client/default’
Require stack:

• /home/andrewlinux/newplatform3/platform/node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/default.js

i can’t run remix project because of this