Problems Creating GIFs with gif.js Library

I’m experiencing problems creating a GIF using gif.js with images generated from html2canvas. I have a list of divs that I convert into images and store in an array. However, when I try to create the GIF from these images, the GIF is not exported or displayed correctly.

Here’s a simplified version of my code:

`function createGifFromList() {
// make sure listaImagenes is defined and filled with PNG data
if (!Array.isArray(listaImagenes) || listaImagenes.length === 0) {
document.getElementById(‘reporte2’).innerText = ‘the image list is empty’;
return;
}

// create a new GIF using gif.js
const gif = new GIF({
    workers: 2,
    quality: 10
});

// load and add each image to the GIF
listaImagenes.forEach((imgDataUrl) => {
    const img = new Image();
    img.src = imgDataUrl;
    img.onload = () => {
        gif.addFrame(img, { delay: 500 }); // add each image with a delay of 500ms
    };
});

// when all images have been added
gif.on('finished', function(blob) {
    // create a download link for the GIF
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'myAnimatedGif.gif';
    a.click();
    // display the gif in the frames container
    const framesContainer = document.getElementById('framesContainer');
    const imgElement = document.createElement('img');
    imgElement.src = url;
    framesContainer.innerHTML = ''; // clear the container
    framesContainer.appendChild(imgElement);
});

// render the GIF
gif.render();

}
`

“I would like to be able to export the GIF or display it in framesContainer.”

Making a Mongoose schema type dependant on an earlier value

I’m working on a project that has a document that will need to have different information depending on the type of the document. A simplfied example might be like this:

const blueSchema = new mongoose.Schema({
    typeOfBlue: {
        type: String,
        enum: [`Ocean`, `Sky`]
    }
})

const redSchema = new mongoose.Schema({
    typeOfRed: {
        type: String,
        enum: [`Wine`, `Blood`]
    }
})

const exampleSchema = new mongoose.Schema ({
    colour: 
    {
        type: String,
        enum: [`Blue`, `Red`],
        required: true
    },
    colourInformation: //This should be redSchema || blueSchema depending on the value of colour
})

The problem is that I’m unable to reference the value of the document before it’s initialised so I can’t figure out how to word any function or such so that it would not result in an undefined result.

Mostly I’ve tried things like the bellow but as I mentioned, it usually results in an undefined output or else mongoose can’t access the value before it’s saved.

function validateColour(colour) {
    if (colour === `Blue`) {
        return blueSchema
    } else if (colour === `Red`) {
        return redSchema
    }
}

const blueSchema = new mongoose.Schema({
    typeOfBlue: {
        type: String,
        enum: [`Ocean`, `Sky`]
    }
})

const redSchema = new mongoose.Schema({
    typeOfRed: {
        type: String,
        enum: [`Wine`, `Blood`]
    }
})

const exampleSchema = new mongoose.Schema ({
    colour: 
    {
        type: String,
        enum: [`Blue`, `Red`],
        required: true
    },
    colourInformation: validateColour(this.colour)
})

How do I find where a javascript function is called in a website?

There’s a function in the external JavaScript for a website (not my own) and I want to know where it’s used, since apparently it is never run. I’ve tried every action on the website and nothing makes it run. The only way I can think of is reviewing event listeners on every element until I find it but that would take ages. Is there something in the inspect element menu where I can look up where a piece of JavaScript code is running, sort of like the inverse of looking at event listeners on an element, or something equivalent I can do using other software? If it helps, the JavaScript file is ran just one script tag in the HTML.

The website is a relatively small image editor. I’ve done everything I can on it and the code isn’t running, I’ve tried looking for ways I can view references to the function in the inspect menu too, including using console.trace(), but I don’t think that helps in my case since the code isn’t run, unless I’m misunderstanding how it works.

Edit: clarifications that the function I’m interested in doesn’t run by any of my actions, fluff removed.

Exporting an object while declaring vs exporting an object after declaring in Next.js

I was recently writing the middleware.ts file in my Next.js project. And encountered the following situation:

// case 1
export const middleware = (...) => {...} // middleware works

export const config = {
  matcher: '/about',  // matcher works
};

// case 2
const middleware = (...) => {...} // middleware works

const config = {
  matcher: '/about',  // matcher does not work
};

export { middleware, config }

I was under the assumption that these ways of exporting functions and objects are equivalent. Is there some difference in practice (in terms of JavaScript modules)? Or is there a difference in the way Next.js is handling these for the middleware.ts file in particular?

Other details: Next.js version 15.0.0-rc.0

How can I click via Puppeteer on a radiobutton, in a modul/Dialog Frame that loads after I clicked on a website button?

The problem is:

await page.waitForSelector('#wrong'); 

I guess.

Error says selector can’t be found. if I look directly via Mozilla Firefox I can see the selector in the code. Would it be possible, that this problem results from AJAX? The window (that has the selector) is only visible if I click on a website Button.

I work with a raspberrypi and my Mac book.

const puppeteer = require('puppeteer');
const fs = require('fs');

// Regulärer Ausdruck für deutsche Telefonnummern


(async () => {
  const browser = await puppeteer.launch({
    executablePath: '/usr/bin/chromium-browser',  
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-gpu']  
  });
 Regexausdruck = (/anzahl/)
  const page = await browser.newPage();

  for (const link of links) {
    try {
      console.log(`Besuche Link: ${link}`);
      await page.goto(link, { waitUntil: 'domcontentloaded' });

  
      const descriptionText = await page.$eval('#viewad-description-text', el => el.textContent);

      const found = descriptionText.match(Regexausdruck);
      if (found) {
        console.log(`Gefunden!`);

      
        try {
          await page.evaluate(() => {
            const spans = Array.from(document.querySelectorAll('span'));
            const targetSpan = spans.find(el => el.textContent.includes('s-Anze'));
            if (targetSpan) {
              targetSpan.click();
              console.log('Button geklickt.');
            }
          });

         
          await page.waitForSelector('#wrong'); 

        } catch (err) {
          console.error(`Fehler beim Interagieren mit dem Modal auf Seite ${link}:`, err);
        }
      }
    } catch (err) {
      console.error(`Fehler beim Verarbeiten des Links ${link}:`, err);
    }
  }

  await browser.close();
})();
The thing I need to click: <label class="wrong"><input id="wrong" type="radio" name="level1Reasons" class="jsx-23972394" value="INCORRECT"> <div class="jsx-9324993">Unpassender Inhalt</div></label>

I had a long conversation with ChatGPT and I’m just more confused than before. I don’t have an other option in my mind as I’m new in the Puppeteer world.

Iframe Won’t Show Up Unless the Form is Loaded Elsewhere

So I’m currently embedding a form from GoHighLevel onto the page at <linelava.com/contact> and as you can see it will load for a brief second and then disappear until you open up one of the popups with the form embedded there (using the button at the top right that says “Get a Free Quote” or the chat button at the bottom right. When I go to inspect it, for some reason WordPress is automatically setting the height to 0px until I one of the popups with the from embedded, then it will get set to the height I inputted (558px).

Why is the height being automatically set to 0px?

Here is the code I have put into the custom HTML block on the backend:

<iframe
  src="https://api.leadconnectorhq.com/widget/form/EY9AaBHFKfRSNmtWPw31"
  style="width:100%;height:100%;border:none;border-radius:3px"
  id="inline-EY9AaBHFKfRSNmtWPw31" 
  data-layout="{'id':'INLINE'}"
  data-trigger-type="alwaysShow"
  data-trigger-value=""
  data-activation-type="alwaysActivated"
  data-activation-value=""
  data-deactivation-type="neverDeactivate"
  data-deactivation-value=""
  data-form-name="Contact Form"
  data-height="558"
  data-layout-iframe-id="inline-EY9AaBHFKfRSNmtWPw31"
  data-form-id="EY9AaBHFKfRSNmtWPw31"
  title="Contact Form"
      >
</iframe>
<script src="https://link.msgsndr.com/js/form_embed.js"></script>

Javascript. The function beings called 2 times, but expected one (long code)

I’m beginner in JS, decided to try making ToDoList app. When the user creates just one task, everything works fine, but when two or more tasks, the action buttons (mark as favourite, as completed) start working in a strange way. If the latest created task is even, then all even tasks can be correctly marked by action buttons, but odd tasks’ buttons do nothing because changeFavStatus and changeCompleteStatus are being called twice (instead of once) so the string section.classList.toggle('favourite'); is being called twice. I know I can use just .classList.remove() and .classList.add(), but those functions still will be called twice. So I want changeFavStatus and changeCompleteStatus functions to be called once. What did I do wrong?
HTML Code:

I tried chatting with AI, it just give suggestions such as “don’t forget to remove event listeners before assigning event listeners”, but I already have lines button.removeEventListener('click', changeFavStatus); in each changeXXXStatus function

here is the output, that shows that the functions are being called twice:

created only one section and marked it as favourite. one call of function as expected:
created only one section and marked it as favourite. one call of function as expected

created two sections and tried to mark the first section as favourite. two calls of function:
created two sections and tried to mark the first section as favourite. two calls of function

let input = document.getElementById('header__search');
let button = document.getElementById('header__form__submit-btn');

button.addEventListener('click', () => processInput());
window.addEventListener('keypress', e => e.key === 'Enter' ? processInput() : '');

const resetButtons = () => {
  let buttonsFavourite = document.querySelectorAll('.fav-button');
  let buttonsComplete = document.querySelectorAll('.complete-button');
  let buttonsDelete = document.querySelectorAll('.del-button');
  console.log(buttonsFavourite, buttonsComplete, buttonsDelete);

  [...buttonsFavourite].forEach(button => {
    button.removeEventListener('click', changeFavStatus);
    button.addEventListener('click', () => changeFavStatus(button));
  });
  [...buttonsComplete].forEach(button => {
    button.removeEventListener('click', changeCompleteStatus);
    button.addEventListener('click', () => changeCompleteStatus(button));
  });
  [...buttonsDelete].forEach(button => {
    button.removeEventListener('click', alertDel);
    button.addEventListener('click', () => alertDel(button));
  });

};

const alertDel = el => {
  let ans = confirm('Are you sure you want to delete this task?');
  if (ans) deleteTask(el);
};

const buttonBackgrounds = {
  defaultFav: 'url("images/default-star.png")',
  markedFav: 'url("images/filled-star.png")',
  defaultComplete: 'url("images/default-complete.png")',
  markedComplete: 'url("images/filled-complete.png")'
};

const deleteTask = async el => {

  const section = document.getElementById(`hideable-section-${el.classList[2]}`)
  const sectionHideDiv1 = document.getElementById(`hideable-div-${el.classList[2]}-1`);
  const sectionHideDiv2 = document.getElementById(`hideable-div-${el.classList[2]}-2`);

  sectionHideDiv1.style.display = 'none';
  sectionHideDiv2.style.display = 'none';

  let seconds = 5;
  const warning = document.createElement("p");
  let warningText = document.createTextNode(`This task will disappear in ${seconds} seconds`);

  warning.style.fontWeight = '700';
  warning.style.color = 'red';
  warning.appendChild(warningText);
  section.appendChild(warning);
  const intervalid = setInterval(() => {
    seconds--;
    warning.innerText = `This task will disappear in ${seconds} seconds`;
    if (!seconds) {
      clearInterval(intervalid);
      section.remove();
    }
  }, 1000);

};

const changeFavStatus = el => {
  const section = document.getElementById(`hideable-section-${el.classList[2]}`);
  if (section.classList.contains('favourite')) {
    el.style.backgroundImage = buttonBackgrounds.defaultFav;
  } else {
    el.style.backgroundImage = buttonBackgrounds.markedFav;
  }
  section.classList.toggle('favourite');
}

const changeCompleteStatus = el => {
  const section = document.getElementById(`hideable-section-${el.classList[2]}`);
  if (section.classList.contains('completed')) {
    el.style.backgroundImage = buttonBackgrounds.defaultComplete;
  } else {
    el.style.backgroundImage = buttonBackgrounds.markedComplete;
  }
  section.classList.toggle('completed');
};

//
//createTask
//

const startCreatingTaskBtn = document.getElementById('start-creating-task');
const divForBlur = document.getElementById('blur-panel');
const frameDiv = document.getElementById('create-task');
const mainBlock = document.getElementById('main');

let clicks = 0;

startCreatingTaskBtn.addEventListener('click', () => blurMain());

const blurMain = () => {
  divForBlur.style.filter = 'blur(2px)';
  frameDiv.style.display = 'block';
};
const unBlurMain = () => {
  divForBlur.style.filter = 'blur(0)';
  frameDiv.style.display = 'none';
};

const createTaskDiv = document.getElementById('create-task');
const userInput = document.querySelectorAll('.user-input');
const createTaskBtn = document.getElementById('create-task__button');

createTaskBtn.addEventListener('click', () => taskBtnHandler());

const taskBtnHandler = () => {
  unBlurMain();
  const values =  [...userInput].map(el => el.value);
  createTask(values);
};

const createTask = values => {
  clicks++;
  const section = document.createElement('section');
  const divTaskDesc = document.createElement('div');
  const taskDesc = document.createElement('p');
  const taskDescText = document.createTextNode(`Due to: ${values[1]} ${values[2]} ${values[0]}`);
  const divTaskActions = document.createElement('div');
  const favButton = document.createElement('button');
  const completeButton = document.createElement('button');
  const delButton = document.createElement('button');

  taskDesc.appendChild(taskDescText);

  section.classList.add('task', 'all');
  section.setAttribute('id', `hideable-section-${clicks}`);
  divTaskDesc.classList.add('task-desc');
  divTaskActions.classList.add('task-actions');

  divTaskDesc.setAttribute('id', `hideable-div-${clicks}-1`);
  divTaskActions.setAttribute('id', `hideable-div-${clicks}-2`);

  taskDesc.classList.add('task-description', clicks);
  favButton.classList.add('action-button', 'fav-button', clicks);
  completeButton.classList.add('action-button', 'complete-button', clicks);
  delButton.classList.add('action-button', 'del-button', clicks);

  divTaskDesc.appendChild(taskDesc);

  divTaskActions.appendChild(favButton);
  divTaskActions.appendChild(completeButton);
  divTaskActions.appendChild(delButton);

  section.appendChild(divTaskDesc);
  section.appendChild(divTaskActions);

  mainBlock.appendChild(section);
  resetButtons();

};

//
//search
//

const processInput = () => {
  if (input.value) {
    const tasksDesc = document.querySelectorAll('.task-description');
    const inputValue = input.value;
    for (let taskDesc of tasksDesc) {
      const pattern = new RegExp(`(.${inputValue}.)|(${inputValue}.)|(.${inputValue})`, `i`);
      const currSection = document.getElementById(`hideable-section-${taskDesc.classList[1]}`);
      taskDesc.textContent.search(pattern) === -1 ?
        currSection.style.display = 'none' : currSection.style.display = 'flex';
    }
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>ToDoList</title>
</head>

<body>
  <div class="wrapper">
    <div id="blur-panel">
      <header id="header">
        <div class="header__left-side">
          <p>ToDoList</p>
        </div>
        <div class="header__middle-side">
          <input type="text" id="header__search" placeholder="Search">
          <button id="header__form__submit-btn" type="submit"></button>
        </div>
        <div class="header__right-side">
          <button class="filter-button active-filter" id="default-filter">All</button>
          <button class="filter-button">Favourite</button>
          <button class="filter-button">Completed</button>
        </div>
      </header>
      <main id="main">

      </main>
      <aside id="aside">
        <button id="start-creating-task">Create</button>
      </aside>
    </div>
    <div id="create-task">
      <h1 class="create-task__title">Create task</h1>
      <div class="create-task__inner-wrapper">
        <div class="create-task__inner">
          <label class='task-label' for="user-task-desc">Task description:</label>
          <input id='user-task-desc' type="text" name="user-task-desc" class="user-input">
          <label class='task-label' for="user-task-date">Due to (day):</label>
          <input id='user-task-date' type="date" name="user-task-date" class="user-input">
          <label class='task-label' for="user-task-time">Due to (time):</label>
          <input id='user-task-time' type="time" name="user-task-time" class="user-input">
          <div class="create-task__submit">
            <button id="create-task__button">Create</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="scripts/taskActions.js"></script>
</body>

</html>

Javascript live typing animation that handles HTML tags

I’m building an HTML/CSS/JavaScript + jQuery web-application. I have a page that calls an API, which returns a string with HTML code. Here’s an example:

// Data returned by server

data = {
  text: "<b>Here is some example text<b> followed by line breaks<br><br><br><br><br"
}

I need to implement live typing animation to display the data. I’ve got that working (see code below), but when there’s an HTML tag such as <b> or <br>, the < characters briefly flash on the screen before the element is properly displayed. Is there some kind of decoding function I need to run before calling the function to display the text?

// The text we want to animate
let text =
  "Here is some example text followed by a line break<br><br>and another line break<br><br><b>as well as some bold text.<b>";

// The current position of the animation
let index = 0;

// Function to trigger the live typing animation
function typingAnimation(id) {
  setTimeout(() => {
    index++;
    updateText(id);
    if (index < text.length) {
      typingAnimation(id);
    }
  }, 50);
}

// Function to update the text 
function updateText(id) {
  // Get the element with our id
  const typing = document.getElementById(id);
  // Split our text into lines based on newline characters or <br> tags
  const lines = text.substring(0, index).split(/n|<br>/);

  // Check if our element exists before updating it
  if (typing == null) {
    return;
  }

  // Update the element with our new lines
  typing.innerHTML = lines
    .map((line, index) => {
      // Check if this is the last line in our text
      const isLastLine = index === lines.length - 1;

      // Add a line break if this isn't the last line of text
      const lineBreak = isLastLine ? "" : "<br>";

      // Return our line of text with or without a line break
      return `${line}${lineBreak}`;
    })
    .join("");
}

typingAnimation("typing-animation");
<div>
  <span id="typing-animation"></span>
</div>

MLflow.js suggestions

preface: i am not an ml engineer. i am just a lowly web dev dipping a toe in the deep water.

project: myself and a handful of colleagues had it in mind to make mlflow friendlier for JS devs who want to track and register models that run in browser or node.

so far, we have abstracted and generalized all 44 of the RESTful endpoints into modules organized thus:

    ├── model_registry
    │   ├── model_registry.js
    │   └── model_version_management.js
    ├── tracking_server
    │   ├── experiment_management.js
    │   ├── run_management.js

now we want to add more layers of abstraction.

a couple we’ve spun up so far:

retrainModelIfPerformanceDrifts(experimentName, baselineRunId, metricName, threshold, modelFunc, paramSpace) 

and

withExperimentRun(experimentName, runName, callback)

we have several more bundled up, but we want to hear what the community has to say before we weigh in here.

question: for those of you who brush up against MLOps in your day-to-day and who either already work in JS or would if it made more sense to do it, what are some canned workflows and functionalities that would make your lives easier and your DX richer?

unsolicited suggestions, questions, and rude remarks are also welcome.

Twilio automated calls with Node.js backend, calls always “complete”

I’m having an issue with my Node.js server that automates my Twilio calls. I’m trying to update a Monday.com status based on call actions; however, when I hangup the call or don’t answer, the callStatus endpoint is called with a complete status, which isn’t true. Within Twilio’s documentation, there are final call statuses (no-answer, complete, failed, and canceled), I just can’t figure out how to get Twilio to send these to my endpoint.

I think it has to have something to do with my /initiateCall endpoint. This receives a contactName; if it was set in the call, it means we already have their name. Otherwise, the call needs to collect that data by calling the /askName endpoint.

As a side-note, I’m using Google TTS to synthesize a more natural sounding voice. That’s what the .play() calls are using.

router.post('/initiateCall', async (req, res) => {
    const { text, to, contactName, pulseId, linkedPulseId } = req.body;

    console.log('Request:', req.body);

    if (!text || !to) {
        return res
            .status(400)
            .send('Please provide both "text" and "to" in the request body.');
    }

    try {
        const response = await axios.post(`${baseUrl}/googleTTS/synthesize`, {
            text: text,
        });

        const audioUrl = response.data.url;
        console.log('audioUrl:', audioUrl);

        const twiml = new twilio.twiml.VoiceResponse();

        if (contactName) {
            twiml.play(audioUrl);
            twiml.pause({ length: 1 }); // Optional pause for effect
        } else {
            twiml.play(audioUrl);
            twiml.pause({ length: 1 });
            twiml.redirect(`${baseUrl}/twilio/askName`);
        }

        const call = await client.calls.create({
            from: process.env.TWILIO_PHONE_NUMBER,
            to: to,
            twiml: twiml.toString(),
            statusCallback: `${baseUrl}/twilio/callStatus?pulseId=${pulseId}&linkedPulseId=${linkedPulseId}`,
            statusCallbackEvent: [
                'initiated',
                'ringing',
                'answered',
                'completed',
                'no-answer',
                'busy',
                'failed',
                'canceled',
            ],
        });

        res.send({ message: 'Call initiated successfully', callSid: call.sid });
    } catch (error) {
        console.error('Error during call initiation:', error.message);
        res.status(500).send('Failed to initiate call.');
    }
});

The /askName route is below.

router.post('/askName', async (req, res) => {
    const twiml = new twilio.twiml.VoiceResponse();

    const retry = req.query.retry;

    if (req.body.CallStatus && req.body.CallStatus !== 'in-progress') {
        twiml.hangup();
        res.type('text/xml');
        res.send(twiml.toString());
        return;
    }

    twiml
        .gather({
            input: 'speech',
            action: '/twilio/confirmName',
            method: 'POST',
            speechTimeout: '2',
            language: 'en-US',
        })
        .play(
            retry ? `${awsS3Url}/askNameRetry.wav` : `${awsS3Url}/askName.wav`
        );

    twiml.redirect('/twilio/askName?retry=true');

    res.type('text/xml');
    res.send(twiml.toString());
});

I added a check for CallStatus. Within the Twilio logs, I noticed that it was being called, despite the call never even being picked up (I hang up during the call).

Then I try to handle the statuses with my /callStatus:

router.post('/callStatus', async (req, res) => {
    const callStatus = req.body.CallStatus;
    const callSid = req.body.CallSid;
    const pulseId = req.query.pulseId;
    const linkedPulseId = req.query.linkedPulseId;
    const exitedCall = exitedCalls.get(callSid);

    console.log('Received Call Status:', callStatus);
    console.log('Call SID:', callSid);
    console.log('Call Request Body:', req.body);

    if (pulseId && linkedPulseId) {
        try {
            let statusText;

            if (
                ['initiated', 'ringing', 'answered', 'in-progress'].includes(
                    callStatus
                )
            ) {
                statusText = `In Progress: ${callStatus}`;
            } else {
                switch (callStatus) {
                    case 'completed':
                        const recognizedName = recognizedNames.get(callSid);
                        if (recognizedName) {
                            await mondayService.updateMondayContactName(
                                pulseId,
                                recognizedName
                            );
                            statusText = 'Completed: Name Received';
                        } else if (exitedCall) {
                            statusText = 'Completed: Call Exited';
                        } else {
                            statusText = 'Completed';
                        }
                        break;
                    case 'no-answer':
                        statusText = 'Incomplete: No Answer';
                        break;
                    case 'busy':
                        statusText = 'Incomplete: Busy';
                        break;
                    case 'failed':
                        statusText = 'Incomplete: Failed';
                        break;
                    case 'canceled':
                        statusText = 'Incomplete: Canceled';
                        break;
                    default:
                        statusText = 'Unknown Call Completion Status';
                }
            }

            await mondayService.updateCallStatus(linkedPulseId, statusText);
            console.log(`Call status updated to: ${statusText}`);

            if (
                [
                    'completed',
                    'no-answer',
                    'busy',
                    'failed',
                    'canceled',
                ].includes(callStatus)
            ) {
                recognizedNames.delete(callSid);
                exitedCalls.delete(callSid);
            }
        } catch (error) {
            console.error(
                'Error updating call status on Monday.com:',
                error.message
            );
            await mondayService.updateCallStatus(
                linkedPulseId,
                'Update Status Error'
            );
        }
    } else {
        console.log(
            'Missing linkedPulseId or pulseId, cannot update Monday.com'
        );
    }

    res.status(200).send('Call status received and processed.');
});

I can never get the callStatus to have a failed, incomplete status.

I’m not really sure where to go from here. I’ve been testing and playing around with it for most of the day. Any thoughts?

I tried using <Dial> (twiml.dial()), but I think that’s just used to connect an external call — or I’m way off with interpreting the documentation. I was using it to include a /finalStatus endpoint to see if that would be called. I separated out the completion and in-progress statuses while using that, but the endpoint was never called at all, despite being accessible on the server.

JS Discord BOT – Failed opening SSL key log file: C:sslkeys.txt

Bonjour je cherche à faire un bot en javascript malheureusement je rencontre une erreur.

Voici le code :

const Discord = require('discord.js');
const client = new Discord.Client({
  intents: [
    Discord.Intents.FLAGS.GUILDS,
    Discord.Intents.FLAGS.GUILD_MESSAGES,
    Discord.Intents.FLAGS.DIRECT_MESSAGES
  ]
});

const PHIL_USER_ID = 'PHIL_ID';
const SYTRIX_USER_ID = 'SYTRIX_ID';

client.on('ready', () => {
  console.log(`Logged in as ${client.user.tag}!`);
});

client.on('messageCreate', async (message) => {
  if (message.channel.type === 'DM' && message.author.id === PHIL_USER_ID) {
    const sytrix = await client.users.fetch(SYTRIX_USER_ID);
    sytrix.send(`Phil received a DM: "${message.content}"`);
  }
});

client.login('TOKEN');

Voici ce que je fais pour exécuter le code :
C:UsersphiliDocumentsPyhtonBOT>bot.js

Voici ce que cela me retourne :
C:UsersphiliDocumentsPyhtonBOT> [13224:0911/231258.263:ERROR:network_service_instance_impl.cc(692)] Failed opening SSL key log file: C:sslkeys.txt

==============================================================================

For non-French people :

Hello I’m trying to make a bot in javascript unfortunately I’m encountering an error.

Here is the code:

const Discord = require('discord.js');
const client = new Discord.Client({
  intents: [
    Discord.Intents.FLAGS.GUILDS,
    Discord.Intents.FLAGS.GUILD_MESSAGES,
    Discord.Intents.FLAGS.DIRECT_MESSAGES
  ]
});

const PHIL_USER_ID = 'PHIL_ID';
const SYTRIX_USER_ID = 'SYTRIX_ID';

client.on('ready', () => {
  console.log(`Logged in as ${client.user.tag}!`);
});

client.on('messageCreate', async (message) => {
  if (message.channel.type === 'DM' && message.author.id === PHIL_USER_ID) {
    const sytrix = await client.users.fetch(SYTRIX_USER_ID);
    sytrix.send(`Phil received a DM: "${message.content}"`);
  }
});

client.login('TOKEN');

Here’s what I do to execute the code:
C:UsersphiliDocumentsPyhtonBOT>bot.js

Here’s what it means to me:
C:UsersphiliDocumentsPyhtonBOT> [13224:0911/231258.263:ERROR:network_service_instance_impl.cc(692)] Failed opening SSL key log file: C:sslkeys.txt

Ce que j’ai déjà tester

J’ai chercher sur google des solutions,
La première c’est celle de supprimer le fichier sslkeys.txt mais celui ci à été recréer après un redémarrage. Donc cela n’a pas fonctionné….

J’ai il y a longtemps installer wireshark pour les études que j’ai désinstallé. J’ai fais des recherches sur mon erreur et j’ai donc tester d’installer et de désinstaller encore une fois wireshark pour régler le problème. Seulement cela n’a pas fonctionné.

J’ai avec de plus amples recherches trouvé que parfois la désinstallation se passe pas bien mais que le programme passe par dessus. J’ai donc regardé du côté du registre et vu que j’ai 2 clés wireshark qui sont resté dans mon registre : wireshark-capture-file_.cap et wireshark-capture-file_.erf
Je ne suis pas trop alaise avec la supression de clé de registre est ce que si je supprime cela n’affecte pas mon PC ?

==============================================================================

For non-French people :

I searched on google for solutions, the first one was to delete the sslkeys.txt file but it was recreated after a reboot. So it didn’t work….

A long time ago I installed wireshark for studies, which I uninstalled. I researched my error and tried to install and uninstall wireshark again to solve the problem. Only it didn’t work.

On further investigation, I found that sometimes uninstallation doesn’t go smoothly, but the program overrides it. So I looked at the registry and saw that I have 2 wireshark keys that remain in my registry: wireshark-capture-file_.cap and wireshark-capture-file_.erf I’m not too comfortable with deleting registry keys, but if I delete them won’t that affect my PC?

Ce que je cherche :

Je voudrais comprendre d’où vient cette erreur et surtout comment ne plus rencontrer cette erreur.

What I’m looking for:

I’d like to understand where this error comes from and, above all, how to avoid encountering it again.

Merci d’avoir lu ma question si vous avez besoin de plus d’informations je suis là !

Thank you for reading my question if you need more information I’m here!

AlpineJS – template x-if not prevent rendering

I have this code snippet. It’s a bit long but that’s the shortest I could make it to reproduce the error.
The idea is to have a data variable which displays selected data and a template object from which the user can select entries which should be added to data.

When I select the values from the three drop downs and click “add” it works the first time. But when I repeat it the second time I get this error:

Alpine Expression Error: Cannot read properties of undefined (reading '')
Expression: "Object.keys (template[select.a][select.b])"

<template x-for="i in Object.keys (template[select.a][select.b])" :key="i">...</template>

Uncaught TypeError: Cannot read properties of undefined (reading '')
    at [Alpine] Object.keys (template[select.a][select.b]) (eval at <anonymous> (https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js:5:665), <anonymous>:3:63)
...

But on line 44 and 53 I have x-if directives to check if select.a and select.b is != ''. This should prevent the following code from being executed/rendered at all. Is this a bug in alpine or do I make something wrong?

<html>
    <head>
        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
        <script>
            function App() {
                return {
                    template: {
                        a: {
                            b: {
                                c: 1
                            }
                        },
                    },
                    data: [],
                    select: {
                        a: '',
                        b: '',
                        c: '',
                    },
                    add: function () {
                        this.data.push (this.template[this.select.a][this.select.b][this.select.c]);
                        
                        this.select = {
                            a: '',
                            b: '',
                            c: '',
                        };
                    }
                };
            }
        </script>
    </head>
    <body x-data="App()">
        data: <div x-html="JSON.stringify (data)"></div>
        
        <div>
            <select x-model="select.a">
                <option disabled selected="selected" value="">choose</option>
                <template x-for="i in Object.keys (template)" :key="i">
                    <option :value="i" x-html="i"></option>
                </template>
            </select>
            
            <template x-if="select.a != ''">
                <div>
                    <select x-model="select.b">
                        <option disabled selected="selected" value="">choose</option>
                        <template x-for="i in Object.keys (template[select.a])"  :key="i">
                            <option :value="i" x-html="i"></option>
                        </template>
                    </select>
                    
                    <template x-if="select.b != ''">
                        <div>
                            <select x-model="select.c">
                                <option disabled selected="selected" value="">choose</option>
                                <template x-for="i in Object.keys (template[select.a][select.b])" :key="i">
                                    <option :value="i" x-html="i"></option>
                                </template>
                            </select>
                            
                            <template x-if="select.c != ''">
                                <button @click="add()">add</button>
                            </template>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </body>
</html>

Checkbox is selected but is returning false in code behind

I have a checkbox in a form. When I click the only button on the form, it calls a JS function. I put some logic in the function that alerts me if the checkbox is selected. If the checkbox is selected, it comes back true. Otherwise it comes back false. The JS alert works perfectly as intended.

However, after the postback from the button being clicked, I have logic pertaining to the Checkbox in C#. I have put the logic everywhere in the page and still cannot figure out the problem.

if (myCheckbox.Checked)
{
  // Certain code is implemented.
}
else
{
  // Other code is implemented.
}

Right now I have the code in the Page_LoadComplete(object sender, EventArgs e). I have verified in the code behind .cs file, any code pertaining to the status of the Checkbox (example: myCheckbox.Checked = false) is commented out. I have been looking at this around the clock for two days and it is driving me crazy. How is it possible I am getting a false value after the postback when the Javascript says it is selected (when it is selected) and not selected (when it is not selected).

  • I tried putting the logic (if (checkBox.checked)) everywhere in the page and am getting the same result.

  • I tried calling a JS function from the C# code behind file but found out I can’t return a value that way.

  • I tried using a HiddenField value to store the status of the Checkbox and that was unsuccessful as well.

  • I’ve searched the internet trying similar things other people used but had no luck.

I have and error and I repaired it but it’s still : Failed prop type: Invalid prop `textStyle` of type `array` supplied to `Cell`, expected `object`

This error comes out when I load the page of a react project and I have already fixed it several times but it is still there I don’t know what is happening: This is the part where the “problem” is

const Tabla = ({ title, data }: { title: string; data: string[] }) => {
    const headerTextStyle = { ...styles.headerText, ...styles.rowText, fontSize: 16 };
  
    return (
      <View>
        <Text>{title}:</Text>
        <Table>
          <Row data={['Nombre']} style={styles.headerRow} textStyle={headerTextStyle} />
          {data.map((item: string, index: number) => (
            <Row key={index} data={[item]} style={styles.row} textStyle={headerTextStyle} />
          ))}
        </Table>
      </View>
    );
  };

I tried to change the code so that it was taken as an object but it didn’t work