How to make a Discord bot command that allows a user to perform an action with another user?

I am making a fairly basic Discord bot for my server, its mainly just random responses and some user interaction. I’ve figured out how to send random messages through a command but I don’t know where to start with adding user interaction.

I am looking to allow a user to perform an action using a slash command plus mentioning the user, for example /hug @dean or something like that, and then have it mention the user and have a little message in an embed that can preferably be random if possible.

This is the gist of what I have so far but its not much and certainly doesn’t work, most of what ive tried either doesn’t get a response or gives me an error for an invalid string format, probably with the user thing but I can’t figure out how to do it properly and the documentation doesn’t seem to tell me how or I’m misunderstanding it.

const { SlashCommandBuilder, EmbedBuilder } = require('discord.js');

module.exports = {
    data: new SlashCommandBuilder()
    .setName("Hug")
    .setDescription ('Give a friend a hug!'),
    async execute(interaction) {
        const embed = new EmbedBuilder()
            .setTitle("ProtoOwner throws a stick!")
            .setColor(0x0099ff)
            .addFields([
                { name: "[{User} hugs {user}!]", value: reply[randomNum] }
            ]);
        await interaction.reply({ embeds:  });
    }
}

I have tried a few different ways but still can’t manage to get anything to work, if there is a better way to do this rather than using a slash command I’m open to suggestions.

Ternary operator in Prisma WHERE statement

Let’s say there is an entity Device, which can be linked to some UserGroups (many-to-many). The task is to write a method which would return list of Devices either linked or not linked to a certain UserGroup (based on boolean parameter). It seems logical to use none for one case and some for another. That’s just for context, no questions here (The question follows below).

A working example for not linked devices looks like this:

const result = await prisma.device.findMany({
where { 
  user_groups: {
    none: {
      user_group_id: {
        equals: userGroupId
      }
    }
  }
}
});

But I’d like to adjust a part of Prisma query to something like this, assuming that linked is a boolean variable:

(linked ? some : none) : {
  user_group_id: {
    equals: userGroupId
  }
}

But this syntax doesn’t seem to be correct. I use Prisma 5.x, in case the version matters.

Question: Is there a way to write it properly, with ternary operator inside Prisma query?

XMLHttpRequest gets no response when it takes too long to complete (readystate=4 and status=0)

I’ve got a problem on my website, I’m using a form to get a file from a user, and if the file is of a certain type, it gets converted to a mp4 using exec with ffmpeg. However when the conversion takes too long to complete the request doesn’t get any response (even tho it does complete in the background)

Here’s my function which contains the request :

uploadForm.onsubmit = event => {
            event.preventDefault();
            let formdata = new FormData(uploadForm);
            let  request = new XMLHttpRequest();
            request.open('POST', uploadForm.action);
            request.upload.addEventListener('progress', function(e) {
                var fileSize = formFile.files[0].size;
                if (e.loaded <= fileSize) {
                    var percent = Math.round(e.loaded / fileSize * 100);
                    progressbar.style.width = percent + '%';
                    progressbar.innerHTML = percent + '%';
                } 

                if(e.loaded == e.total){
                    progressbar.style.width = '100%';
                    progressbar.innerHTML = '100%';
                    conversionSpin.classList.remove("d-none");
                }
            });
            request.onreadystatechange = function() {
                if (request.readyState === 4){
                    console.log("readystate 4 atteint");
                    console.log(request.status);
                }
            }
            request.onload = function(){
                document.body.innerHTML = request.response;
            }
            request.send(formdata);
        };

And here’s the piece of php that handles the request :

$newname = pathinfo($filename, PATHINFO_FILENAME) . ".mp4";
        $sql = "INSERT INTO videos (name, category, title, mail, comments, ipuser)
        VALUES ('$newname', '$category', '$title', '$mail', '$comments', '$ipuser')";
        
        try {
            $conn->query($sql);
            echo "<div class='alert alert-success' role='alert'>Nouvel enregistrement dans la base de donnée réussi </div><br>";
          } catch (Exception $e){
            if (substr($e->getMessage(),0,9) == "Duplicate") {
              die("<div class='alert alert-danger' role='alert'>Erreur: Ce nom de fichier existe déjà dans nos archives. Si vous êtes sûr que nous ne disposons pas déjà de ce fichier, merci de le renommer puis de réessayer.</div><br>");
            } else {
              die("<div class='alert alert-danger' role='alert'>Erreur: " . $e->getMessage(). "<br>Contactez l'administrateur</div><br>");
            }
          }

          $moved = move_uploaded_file($_FILES['formFile']['tmp_name'], "../assets/videos/check/$filename");
          $error = $_FILES['formFile']['error'];
          
          if( $moved ) {
              echo "<div class='alert alert-success' role='alert'>Envoi réussi</div></br>";         
            } else {
              echo "<div class='alert alert-danger' role='alert'>Envoi échoué, veuillez contacter l'administrateur et lui donner le code d'erreur suivant : # $error </div><br>";
            }

        exec('ffmpeg -i "../assets/videos/check/' . $filename . '" "../assets/videos/check/' . $newname . '" && rm "../assets/videos/check/' . $filename . '"');

The whole process is working as intended but when the ffmpeg conversion takes too long the request gets no response, does not trigger onload function and gets a readyState of 4 with a status code of 0. The conversion and the removal of the original file does work tho.

If anyone has any insight on how to solve this issue that’d be greatly appreciated.

I haven’t tried much, I tried looking on the internet for an answer but this seems to be a first, I tried moving the loading of the new body innerHtml into the onload function as can be seen in my code, which does not get called at all when the problem is happening. I tried with several files (several AVIs and MPGs) they all work fine except a really big MPG which conversion takes very long to complete, thus causing the issue I’m facing.

Laravel Multi-Role/Multi-Tenant Auth: Customer Login Redirect Loop (Session/Middleware Issue)

I’m facing a persistent and unusual issue with a multi-role, multi-tenant Laravel application and I’m hoping someone can shed some light on what might be happening.
The Goal:I have a multi-tenant application where each tenant is a hotel. The application has four main user roles:
1.Admin (Super Admin)
2.Hotel Manager (Manages a specific hotel/tenant)
3.Branch Manager (Manages a branch under a hotel)
4.Customer (Belongs to a specific hotel/tenant)
The Problem:Logins for Admin, Hotel Manager, and Branch Manager work perfectly. However, when a Customer tries to log in, they are stuck in a redirect loop back to the login page.The laravel.log file clearly shows that the customer authentication is successful, a session is created, and a redirect to /customer/dashboard is initiated. But the user never reaches the dashboard and is immediately sent back to the login page.
My Environment:
•PHP: 8.2.12
•Framework: Laravel (latest version)
•Local Server: XAMPP, served with php artisan serve –port=8001
•Authentication: Custom login logic (not using standard Laravel Fortify/Jetstream).
What I’ve Tried (The Debugging Journey):This is where it gets strange. The core of the problem seems to be that my application is not loading the updated versions of certain PHP files, specifically my middleware.
1.Initial Diagnosis: I suspected an issue in my CustomerAuth middleware or the CustomerDashboardController. I added detailed Log::info() statements to CustomerAuth.php to trace the session state.
2.The Core Issue – Files Not Updating: The detailed logs I added never appear in laravel.log. This proves that despite my changes, Laravel is still running an old, cached, or otherwise outdated version of CustomerAuth.php.
3.Troubleshooting Steps Taken (Repeatedly):
•Cleared all caches: I have run php artisan optimize:clear, config:clear, cache:clear, view:clear, and route:clear countless times.
•Restarted the server: I have stopped (Ctrl+C) and restarted the php artisan serve process after every change.
•Cleared browser cache: Performed a hard refresh and cleared all site data from the browser.
•Checked file paths: The file path is correct: C:xampphtdocsmyprojectappHttpMiddlewareCustomerAuth.php.
•Composer Dump-Autoload: I ran composer dump-autoload successfully.
4.Isolating the Session: To confirm that the session itself was working, I modified my LoginController to redirect customers to a temporary, unprotected route (/customer/test-session). This worked! The test page loaded and successfully displayed the customer’s session data.
This proves:
•The customer session is being created and persists correctly after login.
•The problem is triggered when the request hits the customer.auth middleware or the associated controller/route.
The Block:Even after proving the session works, and after restoring the original LoginController logic, I am still unable to get my application to execute the updated CustomerAuth.php file containing the debug logs. The laravel.log remains clean of my new log statements, and the customer is still stuck in the login loop.My Question:Given that I’ve cleared all standard caches and restarted the server, what could possibly be preventing Laravel (specifically when running under php artisan serve on Windows/XAMPP) from loading the latest version of a PHP file? Is there a deeper caching mechanism (like Opcache, though I haven’t configured it explicitly) or a known issue with this kind of setup that I’m missing?I’m at a loss for why this one specific middleware file refuses to update in the running application.
Any help or new ideas for debugging this environment-specific issue would be greatly appreciated.
Thank you

apply same css styles to divs in the arithmetic sequence of three

I have 10 items in my database table. I want to apply same CSS style to the divs in the arithmetic sequence of 3 items.

For example, items [0, 3,6,9] will have css style slideInDown, items [1,4,7] will have css style slideFloat and items [2,5,8] will have style slideInUp.
@if ($i % 3 == 0), I think this will satisfy the series [0, 3,6,9] but how to write logic for other two series.

My code::

@for ($item = 0; $item < count($posts); $item++)
    @if ($i % 3 == 0)    <!-- for items [0,3,6,9]  -->                
        <div class="content">
            <div class="slideInDown text-center">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @elseif($i == 2) <!-- what will be logic for items [2,5,8]  --> 
        <div class="content">
            <div class="slideInUp">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @else  <!-- for items [1,4,7]  --> 
        <div class="content">
            <div class="slideFloat">
                <p> $posts[$item]['post_content'] </p>
            </div>
        </div>
    @endif
@endfor

using for loop to render image in background image [closed]

I am trying to render an image in my carousel from the database, using a for loop.

But I am stuck on how to use a for loop here, and how to render an image in style="background-image:url.

My code:

<div class="banner-carousel banner-carousel-1 mb-0">
    @for ($i = 0; $i < count($sliders); i++)
        <div class="banner-carousel-item" style="background-image:url(images/{{$sliders[i]['']]}})">
            <div class="slider-content">

                <div class="row align-items-center h-100">
                    <div class="col-md-12 text-center">
                        <p data-animation-in="slideInLeft" data-duration-in="1.2">
                        <h2 class="slide-title" data-animation-in="slideInDown">Meet Our Engineers</h2>
                        <h2 class="slide-title" data-animation-in="slideInLeft">17 Years of excellence in</h2>
                        <h3 class="slide-sub-title" data-animation-in="slideInRight">Construction Industry
                        </h3>
                        </p>
                    </div>
                </div>

            </div>
        </div>
    @endfor
</div>

My image is in public/images folder in the app.

Laragon + Visual Studio Php Server & Live Server + Live Server Web Extension Not Auto-Reloading Together

I’m attempting to set up a development environment where I can edit PHP files stored under C:laragonwww, and have the browser automatically reload when I save changes. I am using Laragon to run the PHP and database servers, and I want to use the Live Server extension in Visual Studio Code to facilitate live reloading.

What works:

  • Static files in the project directory load correctly at http://127.0.0.1:5500/ with Live Server.
  • Laragon is running smoothly, providing database access, and the PHP server is accessible at http://localhost:3000/laragon/www/.
  • My virtual hosts are active, with the document root set to C:laragonwww.

What doesn’t work:

  • When I make changes to PHP files, the Live Server extension does not automatically reload the page.
  • Reloading only works for static files, not PHP pages served by Laragon.

Setup details:

  • Web server: Laragon PHP server at http://localhost:3000/laragon/www/
  • Static files: load at http://127.0.0.1:5500/ with Live Server
  • Ports: Apache at 8080 (with SSL at 443), PHP at 3000
  • Files are saved within C:laragonwww

Attempts made:

  • Accessed PHP pages via localhost:8080, localhost:3000, and 192.168.131.1:8080/3000
  • Tried various URL paths and directory configurations.
  • Checked configurations and tried to configure Live Server to proxy or watch PHP files (though I understand Live Server is primarily for static content).

Questions:

  • Has anyone managed to get Live Server or similar tools to automatically reload PHP pages served through Laragon?
  • Are there specific configurations, extensions, or alternative tools recommended for live reloading PHP files?
  • Are there known limitations or best practices for PHP development with live reload integrations?

Thanks in advance for any guidance or experiences. I appreciate your help!

audio playing and rendering issue

I’m working on a chat interface that supports uploading and rendering audio messages using WaveSurfer.js. To handle multiple audio attachments, I created a reusable function renderWaveform(uniqueId, url) that initializes the waveform player for each uploaded audio file.

Each uploaded audio message has its own container with:

A play/pause button

A WaveSurfer waveform

A timestamp

When I call renderWaveform(uniqueId, url) after inserting the audio HTML dynamically:

The waveform renders correctly.

The audio plays, but the time display (audioprocess) sometimes shows incorrect or delayed updates.

The finish event occasionally doesn’t reset the play button or display the correct final duration.

Also, when multiple audio files are uploaded, sometimes the waveform doesn’t render or conflicts appear.

Delayed waveform rendering using setTimeout().

Ensured each container has a unique ID (waveform${uniqueId}).

Used wavesurfer.on(‘ready’), on(‘audioprocess’), and on(‘finish’) properly.

Verified the DOM is ready before initializing WaveSurfer.

Ensuring each audio waveform renders and updates its time correctly.

Fixing audioprocess to reliably show the current playback time.

Making sure finish resets the UI state (button + time) for each audio message.

function renderWaveform(uniqueId, url) {
    const wavesurfer = WaveSurfer.create({
        container: `#waveform${uniqueId}`,
        waveColor: "#ccc",
        progressColor: "#4CAF50",
        barWidth: 2,
        height: 30,
        responsive: true,
    });

    wavesurfer.load(url);

    wavesurfer.on("ready", () => {
        document.getElementById(`text${uniqueId}`).textContent = formatTime(wavesurfer.getDuration());
    });

    wavesurfer.on("audioprocess", (currentTime) => {
        document.getElementById(`text${uniqueId}`).textContent = formatTime(currentTime);
    });

    wavesurfer.on("finish", () => {
        document.getElementById(`text${uniqueId}`).textContent = formatTime(wavesurfer.getDuration());
        document.getElementById(`playPause${uniqueId}`).classList.remove("playing");
    });

    document.getElementById(`playPause${uniqueId}`).addEventListener("click", () => {
        wavesurfer.playPause();
    });
}

    // send Audio File
function appendAudioFile (uniqueId,audioUrl)  {
    let time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    const now = new Date();
    // let uniqueId = 'id-'
    //     + now.getFullYear()
    //     + (now.getMonth() + 1).toString().padStart(2, '0')
    //     + now.getDate().toString().padStart(2, '0')
    //     + now.getHours().toString().padStart(2, '0')
    //     + now.getMinutes().toString().padStart(2, '0')
    //     + now.getSeconds().toString().padStart(2, '0')
    //     + index
    //     + now.getMilliseconds().toString().padStart(3, '0')
    //     + '-' + Math.floor(Math.random() * 10000);

    const chatBox = document.getElementById("chatBox");

    chatBox.insertAdjacentHTML("beforeend", `<div class="chatBoxListMessage sent audioAttachment" data-audio-url="${audioUrl}">
                                <div class="chatbox-message-item sent">
                                         <span class="profileimage">
                                                     <svg viewBox="0 0 212 212"
                                                         preserveAspectRatio="xMidYMid meet" class="ln8gz9je ppled2lx"
                                                         version="1.1" x="0px" y="0px" enable-background="new 0 0 212 212"
                                                         xml:space="preserve">
                                                         <path fill="currentColor" class="background"
                                                             d="M106.251,0.5C164.653,0.5,212,47.846,212,106.25S164.653,212,106.25,212C47.846,212,0.5,164.654,0.5,106.25 S47.846,0.5,106.251,0.5z">
                                                         </path>
                                                         <g>
                                                             <path fill="#FFFFFF" class="primary"
                                                                 d="M173.561,171.615c-0.601-0.915-1.287-1.907-2.065-2.955c-0.777-1.049-1.645-2.155-2.608-3.299 c-0.964-1.144-2.024-2.326-3.184-3.527c-1.741-1.802-3.71-3.646-5.924-5.47c-2.952-2.431-6.339-4.824-10.204-7.026 c-1.877-1.07-3.873-2.092-5.98-3.055c-0.062-0.028-0.118-0.059-0.18-0.087c-9.792-4.44-22.106-7.529-37.416-7.529 s-27.624,3.089-37.416,7.529c-0.338,0.153-0.653,0.318-0.985,0.474c-1.431,0.674-2.806,1.376-4.128,2.101 c-0.716,0.393-1.417,0.792-2.101,1.197c-3.421,2.027-6.475,4.191-9.15,6.395c-2.213,1.823-4.182,3.668-5.924,5.47 c-1.161,1.201-2.22,2.384-3.184,3.527c-0.964,1.144-1.832,2.25-2.609,3.299c-0.778,1.049-1.464,2.04-2.065,2.955 c-0.557,0.848-1.033,1.622-1.447,2.324c-0.033,0.056-0.073,0.119-0.104,0.174c-0.435,0.744-0.79,1.392-1.07,1.926 c-0.559,1.068-0.818,1.678-0.818,1.678v0.398c18.285,17.927,43.322,28.985,70.945,28.985c27.678,0,52.761-11.103,71.055-29.095 v-0.289c0,0-0.619-1.45-1.992-3.778C174.594,173.238,174.117,172.463,173.561,171.615z">
                                                             </path>
                                                             <path fill="#FFFFFF" class="primary"
                                                                 d="M106.002,125.5c2.645,0,5.212-0.253,7.68-0.737c1.234-0.242,2.443-0.542,3.624-0.896 c1.772-0.532,3.482-1.188,5.12-1.958c2.184-1.027,4.242-2.258,6.15-3.67c2.863-2.119,5.39-4.646,7.509-7.509 c0.706-0.954,1.367-1.945,1.98-2.971c0.919-1.539,1.729-3.155,2.422-4.84c0.462-1.123,0.872-2.277,1.226-3.458 c0.177-0.591,0.341-1.188,0.49-1.792c0.299-1.208,0.542-2.443,0.725-3.701c0.275-1.887,0.417-3.827,0.417-5.811 c0-1.984-0.142-3.925-0.417-5.811c-0.184-1.258-0.426-2.493-0.725-3.701c-0.15-0.604-0.313-1.202-0.49-1.793 c-0.354-1.181-0.764-2.335-1.226-3.458c-0.693-1.685-1.504-3.301-2.422-4.84c-0.613-1.026-1.274-2.017-1.98-2.971 c-2.119-2.863-4.646-5.39-7.509-7.509c-1.909-1.412-3.966-2.643-6.15-3.67c-1.638-0.77-3.348-1.426-5.12-1.958 c-1.181-0.355-2.39-0.655-3.624-0.896c-2.468-0.484-5.035-0.737-7.68-0.737c-21.162,0-37.345,16.183-37.345,37.345 C68.657,109.317,84.84,125.5,106.002,125.5z">
                                                             </path>
                                                         </g>
                                                     </svg>
                                         </span>
                                         <span class="p0s8B">
                                                     <svg viewBox="0 0 8 13" height="13" width="8"
                                                         preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px"
                                                         y="0px" enable-background="new 0 0 8 13" xml:space="preserve">
                                                         <path opacity="0.13"
                                                             d="M5.188,1H0v11.193l6.467-8.625 C7.526,2.156,6.958,1,5.188,1z">
                                                         </path>
                                                         <path fill="currentColor"
                                                             d="M5.188,0H0v11.193l6.467-8.625C7.526,1.156,6.958,0,5.188,0z">
                                                         </path>
                                                     </svg>
                                         </span>
                                         <div class="sentMessagesBox">
                                             <button type="button" class="optionMessage">
                                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
                                             </button>
                                             <span class="chatbox-message-item-text">
                                                <div class="audio_file_section">
                                                     <div class="loaderSpinner">
                                                          <svg class="spinner-container" width="65px" height="65px" viewBox="0 0 52 52">
                                                            <circle class="path" cx="26px" cy="26px" r="20px" fill="none" stroke-width="4px"></circle>
                                                          </svg>  
                                                        </div>
                                                     <div class="audio_button_playPause">
                                                         <button class="playPauseBtn" id="playPause${uniqueId}">
                                                              <svg class="playA" viewBox="0 0 34 34" height="34" width="34" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 34 34"><path fill="currentColor" d="M8.5,8.7c0-1.7,1.2-2.4,2.6-1.5l14.4,8.3c1.4,0.8,1.4,2.2,0,3l-14.4,8.3 c-1.4,0.8-2.6,0.2-2.6-1.5V8.7z"></path></svg>
                                                              <svg class="pauseA" viewBox="0 0 34 34" height="34" width="34" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 34 34"><path fill="currentColor" d="M9.2,25c0,0.5,0.4,1,0.9,1h3.6c0.5,0,0.9-0.4,0.9-1V9c0-0.5-0.4-0.9-0.9-0.9h-3.6 C9.7,8,9.2,8.4,9.2,9V25z M20.2,8c-0.5,0-1,0.4-1,0.9V25c0,0.5,0.4,1,1,1h3.6c0.5,0,1-0.4,1-1V9c0-0.5-0.4-0.9-1-0.9 C23.8,8,20.2,8,20.2,8z"></path></svg>
                                                         </button>
                                                     </div>
                                                     <div class="audio_wave_section">
                                                         <div id="waveform${uniqueId}" class="audio_wave_list"></div>
                                                         <div class="audio_bottom">
                                                         <span id="text${uniqueId}" class="show_duration show_d_${uniqueId}"></span>
                                                         <span class="chatbox-message-item-time">${time} <span class="message-view-svg">  
                                                        <svg  class="tickMessage d-none" viewBox="0 0 16 11" height="11" width="16" preserveAspectRatio="xMidYMid meet" class="" fill="none"><path d="M11.0714 0.652832C10.991 0.585124 10.8894 0.55127 10.7667 0.55127C10.6186 0.55127 10.4916 0.610514 10.3858 0.729004L4.19688 8.36523L1.79112 6.09277C1.7488 6.04622 1.69802 6.01025 1.63877 5.98486C1.57953 5.95947 1.51817 5.94678 1.45469 5.94678C1.32351 5.94678 1.20925 5.99544 1.11192 6.09277L0.800883 6.40381C0.707784 6.49268 0.661235 6.60482 0.661235 6.74023C0.661235 6.87565 0.707784 6.98991 0.800883 7.08301L3.79698 10.0791C3.94509 10.2145 4.11224 10.2822 4.29844 10.2822C4.40424 10.2822 4.5058 10.259 4.60313 10.2124C4.70046 10.1659 4.78086 10.1003 4.84434 10.0156L11.4903 1.59863C11.5623 1.5013 11.5982 1.40186 11.5982 1.30029C11.5982 1.14372 11.5348 1.01888 11.4078 0.925781L11.0714 0.652832ZM8.6212 8.32715C8.43077 8.20866 8.2488 8.09017 8.0753 7.97168C7.99489 7.89128 7.8891 7.85107 7.75791 7.85107C7.6098 7.85107 7.4892 7.90397 7.3961 8.00977L7.10411 8.33984C7.01947 8.43717 6.97715 8.54508 6.97715 8.66357C6.97715 8.79476 7.0237 8.90902 7.1168 9.00635L8.1959 10.0791C8.33132 10.2145 8.49636 10.2822 8.69102 10.2822C8.79681 10.2822 8.89838 10.259 8.99571 10.2124C9.09304 10.1659 9.17556 10.1003 9.24327 10.0156L15.8639 1.62402C15.9358 1.53939 15.9718 1.43994 15.9718 1.32568C15.9718 1.1818 15.9125 1.05697 15.794 0.951172L15.4386 0.678223C15.3582 0.610514 15.2587 0.57666 15.1402 0.57666C14.9964 0.57666 14.8715 0.635905 14.7657 0.754395L8.6212 8.32715Z" fill="currentColor"></path></svg>
                                                                       <svg class="waitTime" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg></span></span>
                                                         </div>
                                                     </div>
                                                </div>
                                             </span>
                                             </div>
                                         <div class="more-info-dropdown">
                                             <ul>
                                                  <li>
                                                      <a href="" class="DownloadAttachment" download="">
                                                          <span class="ms-info-svg"><svg viewBox="0 0 24 24" height="24" width="24" preserveAspectRatio="xMidYMid meet" class="" fill="none"><path d="M12.3536 15.6464C12.1583 15.8417 11.8417 15.8417 11.6464 15.6464L7.69481 11.6948C7.30912 11.3091 7.30886 10.6801 7.68772 10.2877C8.0761 9.88547 8.72424 9.87424 9.11962 10.2696L11 12.15V5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5V12.15L14.8804 10.2696C15.2758 9.87424 15.9239 9.88547 16.3123 10.2877C16.6911 10.6801 16.6909 11.3091 16.3052 11.6948L12.3536 15.6464ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V16C4 15.4477 4.44772 15 5 15C5.55228 15 6 15.4477 6 16V18H18V16C18 15.4477 18.4477 15 19 15C19.5523 15 20 15.4477 20 16V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z" fill="currentColor"></path></svg></span>
                                                          <span>Download</span>
                                                      </a>
                                                  </li> 
                                             </ul>
                                         </div>
                                </div>
                          </div>
                   `);
    chatBox.scrollTop = chatBox.scrollHeight;
}

// get Audio File opposite users
function getAttachmentAudioFileOppositeUsers (uniqueId,item, url) {
    let time = new Date(item.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    const now = new Date(item.created_at);
    let shortName =  getShortName(item.name)
    let name = item.name || item.senderName
    // let uniqueId = 'id-'
    //     + now.getFullYear()
    //     + (now.getMonth() + 1).toString().padStart(2, '0')
    //     + now.getDate().toString().padStart(2, '0')
    //     + now.getHours().toString().padStart(2, '0')
    //     + now.getMinutes().toString().padStart(2, '0')
    //     + now.getSeconds().toString().padStart(2, '0')
    //     + now.getMilliseconds().toString().padStart(3, '0')
    //     + '-' + Math.floor(Math.random() * 10000);


    let imageHtml = item.profileimage ? `<img src="${item.profileimage}" border-radius: 50px;">` : `${shortName}`;
    const chatBox = document.getElementById("chatBox");
    chatBox.innerHTML +=`<div class="chatBoxListMessage received audioAttachment" data-audio-url="${url}">
                                <div class="chatbox-message-item received">
                                         <span class="profileimage1 ${item.profileimage ? "border-none":""}">${imageHtml}</span>
                                         <span class="p0s8C">
                                    <svg viewBox="0 0 8 13" height="13" width="8" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 8 13" xml:space="preserve">
                                                                     <path opacity="0.13" fill="#0000000"
                                                                         d="M1.533,3.568L8,12.193V1H2.812 C1.042,1,0.474,2.156,1.533,3.568z">
                                                                     </path>
                                                                     <path fill="currentColor" d="M1.533,2.568L8,11.193V0L2.812,0C1.042,0,0.474,1.156,1.533,2.568z"></path>
                                    </svg>
                                    </span>
                                         <div class="sentMessagesBox">
                                             <button type="button" class="optionMessage">
                                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
                                             </button>
                                             <span class="chatbox-message-item-text">
                                               <span class="receivedName">${name} <p>(${item.userRole == '1'
            ? 'Superadmin'
            : item.userRole == '3'
                ? 'Hospital Admin'
                : item.userRole == '4'
                    ? 'Hospital Supervisor'
                    : item.userRole == '5'
                        ? 'Hospital Agent'
                        : item.userRole == '6'
                            ? 'Super Admin Supervisor'
                            : item.userRole == '7'
                                ? 'Super Admin Agent'
                                : item.userRole == '8'
                                    ? 'Diognostic Admin'
                                    : item.userRole == '9'
                                        ? 'Diognostic Supervisor'
                                        : item.userRole == '10'
                                            ? 'Diognostic Agent'
                                            : 'Unknown'})</p></span>
                                                <div class="audio_file_section">
                                                     <div class="audio_button_playPause">
                                                         <button class="playPauseBtn" id="playPause${uniqueId}">
                                                              <svg class="playA" viewBox="0 0 34 34" height="34" width="34" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 34 34"><path fill="currentColor" d="M8.5,8.7c0-1.7,1.2-2.4,2.6-1.5l14.4,8.3c1.4,0.8,1.4,2.2,0,3l-14.4,8.3 c-1.4,0.8-2.6,0.2-2.6-1.5V8.7z"></path></svg>
                                                              <svg class="pauseA" viewBox="0 0 34 34" height="34" width="34" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 34 34"><path fill="currentColor" d="M9.2,25c0,0.5,0.4,1,0.9,1h3.6c0.5,0,0.9-0.4,0.9-1V9c0-0.5-0.4-0.9-0.9-0.9h-3.6 C9.7,8,9.2,8.4,9.2,9V25z M20.2,8c-0.5,0-1,0.4-1,0.9V25c0,0.5,0.4,1,1,1h3.6c0.5,0,1-0.4,1-1V9c0-0.5-0.4-0.9-1-0.9 C23.8,8,20.2,8,20.2,8z"></path></svg>
                                                         </button>
                                                     </div>
                                                     <div class="audio_wave_section">
                                                         <div id="waveform${uniqueId}" class="audio_wave_list"></div>
                                                         <div class="audio_bottom">
                                                         <span id="text${uniqueId}" class="show_duration show_d_${uniqueId}"></span>
                                                         <span class="chatbox-message-item-time">${time} </span>
                                                         </div>
                                                     </div>
                                                </div>
                                             </span>
                                             </div>
                                         <div class="more-info-dropdown">
                                             <ul>
                                                  <li>
                                                      <a href="${url}" class="DownloadAttachment" download="">
                                                          <span class="ms-info-svg"><svg viewBox="0 0 24 24" height="24" width="24" preserveAspectRatio="xMidYMid meet" class="" fill="none"><path d="M12.3536 15.6464C12.1583 15.8417 11.8417 15.8417 11.6464 15.6464L7.69481 11.6948C7.30912 11.3091 7.30886 10.6801 7.68772 10.2877C8.0761 9.88547 8.72424 9.87424 9.11962 10.2696L11 12.15V5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5V12.15L14.8804 10.2696C15.2758 9.87424 15.9239 9.88547 16.3123 10.2877C16.6911 10.6801 16.6909 11.3091 16.3052 11.6948L12.3536 15.6464ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V16C4 15.4477 4.44772 15 5 15C5.55228 15 6 15.4477 6 16V18H18V16C18 15.4477 18.4477 15 19 15C19.5523 15 20 15.4477 20 16V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z" fill="currentColor"></path></svg></span>
                                                          <span>Download</span>
                                                      </a>
                                                  </li> 
                                             </ul>
                                         </div>
                                </div>
                          </div>
                   `;

           chatBox.scrollTop = chatBox.scrollHeight;
}

  

    let uniqueId = 'id-'
                                        + now.getFullYear()
                                        + (now.getMonth() + 1).toString().padStart(2, '0')
                                        + now.getDate().toString().padStart(2, '0')
                                        + now.getHours().toString().padStart(2, '0')
                                        + now.getMinutes().toString().padStart(2, '0')
                                        + now.getSeconds().toString().padStart(2, '0')
                                        + now.getMilliseconds().toString().padStart(3, '0')
                                        + index
                                        + '-' + Math.floor(Math.random() * 10000);

and im creating unique id using date

Comparing for loops vs spread and concat for merging arrays in JavaScript — performance and best practices?

I’m learning JavaScript and practicing merging arrays. Here’s one of the methods I wrote using two for loops:

const arr1 = [4, 5, 7, 9, 8];
const arr2 = [-1, -2, 0, 12];
const arr3 = [];

for (let i = 0; i < arr1.length; i++) {
  arr3.push(arr1[i]);
}

for (let i = 0; i < arr2.length; i++) {
  arr3.push(arr2[i]);
}

console.log(arr3); // [4, 5, 7, 9, 8, -1, -2, 0, 12]

My question:
Are there any performance or readability trade-offs between the manual for loop approach and using concat() or spread?

Especially in large-scale applications or performance-sensitive cases — is there a real difference?
Would love to learn the best practice here.

Scaling problem with html5 experimental strategy game

My HTML5 game is now uploaded and while I was coding it offline, I had the idea of 800×600 resolution. All the images and clicks are from

X: 0-800 and Y: 0-600

It’s working ok on my laptop and also the uploaded version is also working ok when I open it from https://iashu.itch.io/rivers with password: parola

When I open it from browser on my andoid phone I can’t see the bottom 180 pixels (so I see 800×420 pixels scaled to fill the whole phone screen)

I tried changing a lot of values in my index.html (usually I don’t have to change it… I am starting from a empty project https://drive.google.com/file/d/1YVQ2ZV6rGjPNvJ1Hh_G9PTbyNXGMdYYX/view?usp=drive...

and only code everything in the game.js file)

I also tried changing settings on the site itch.io, but nothing seems to work.

Asynchronously and quickly make many API requests in JavaScript while handling or preventing 429 CORS error messages

How can I asynchronously create two hundred API requests in a quick manner to an API, that is https://api.dictionaryapi.dev, in JavaScript? I want to catch CORS errors with an error status of 429 after using fetch() so that I can retry them or wait longer if needed, but I want to throw other errors.

The following code demenstrates an issue of solving the errors. It progressively waits longer to avoid those 429 errors, but it is way too slow. Additionally, the order of the executions do not matter.

(async () => {
    function wait(seconds) {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve()
            }, seconds * 1000);
        })
    }

    class FetchError extends Error {
        constructor() {
            super();
        }
    }

    let i = 0;
    let list = [];

    const someWords = ["webisode", "gin rummy", "cruder", "decarburising", "corn-cob pipe", "viva voce", "jaunting-car", "station blacks", "fit into", "dry mounting", "misfile", "gain time", "name day", "encouraged", "spahi", "tricorns", "in seventh heaven", "clarkias", "co-equal", "jomon", "plant", "data set", "sutra", "hypnotised", "talkshows", "quilts", "mince-pie", "grassroot", "crossfit", "price relative", "green plover", "abeyance", "ferrocyanide", "anatomically", "manful", "dust devils", "squibbed", "kyu grades", "girning", "transgendered", "narcosis", "go hot and cold", "gambling dens", "cochleae", "rowing machine", "overloud", "poetize", "rattlesnake", "speeddating", "pastored", "harmonised", "be worth one's weight in gold", "non-employment", "clinch", "intelligibility", "frog orchid", "grantor", "asthenic", "bandhs", "cedilla", "subaudition", "bassinets", "inferential", "paper bank", "episternum", "gaba", "apocarpous", "carolinian", "cab sauvs", "constrain", "bell-hop", "sympto-thermal method", "dance cards", "mescaline", "cobalts", "paper-taffeta", "palmtop", "sagittal", "bazooms", "stew", "doronicums", "fish kettle", "national grids", "religo", "catchphrases", "multiprogramming", "re-taken", "called", "sheet feeder", "chirognomy", "albizzia", "straight-jacketing", "strike while the iron is hot", "odalisques", "scouser", "metabolite", "breaded", "palavers", "seceding", "hunks", "consequence", "brillo pad", "biweekly", "ultrafine", "compellingly", "inert gas", "suffragis", "dedendums", "stochastic", "overcharging", "high-and-mighty", "bordures", "farm-worker", "pesthouse", "world-beater", "meditates", "enacted", "ophthalmic optician", "bed-bugs", "molds", "geocode", "leave the door open", "retrodictions", "tiresome", "explicit", "gearlevers", "profoundly", "anti-semitism", "hemstitched", "a bit much", "bituminizing", "upbeats", "preppy", "outfalls", "schlemiels", "bench seats", "monologise", "commoditize", "disinhibited", "conservatism", "talked", "annuls", "disadvantageous", "wild men", "radiation patterns", "non-literary", "round dances", "transvaluing", "slokas", "streeties", "medical emergency", "side valve", "urophilia", "chain letter", "quick-freezes", "transliterated", "dobermann pinschers", "alkali metal", "out-vote", "cachinnated", "nurdle", "quinquenniums", "interfluve", "p45", "dazzles", "nonreturnable", "midship", "overturns", "mast", "hyperkalemia", "don't", "suntan lotions", "unsteadiest", "meissen", "apprehensive", "gastarbeiters", "squabbled", "deprecated", "soft-paste", "heaths", "cabin cruiser", "millies", "unicorns", "repeat fees", "gavels", "suck-holing", "saviour siblings", "interspacing", "paused", "catoptric", "coral snakes", "blood brother", "beast of prey", "nullities", "afterpains", "lgbtqia", "act of grace", "atory", "blocker", "pervasive"];

    let success = 0;
    const successIntervals = 20;
    await someWords.reduce(async (array, item) => {
        await array;
        try {
            if (success >= successIntervals) await wait((success / successIntervals) << 0);
            let data = await fetch("https://api.dictionaryapi.dev/api/v2/entries/en_US/" + item);
            switch (data.status) {
                case 404:
                    throw new FetchError("Error 404: Cannot fetch " + item);
                default:
                    if (data.status >= 200 && data.status < 300) break;
                    throw new FetchError("Error " + data.status + ": Cannot fetch " + item);

            }
            const wordData = await data.json();

            if (wordData === null || wordData?.title === "No Definitions Found") throw new FetchError("No definition found for " + item);
            const completeWordData = {
                word: item,
                data: wordData
            };
            list.push(completeWordData);
            i++;
            success < successIntervals * 1.5 ? success++ : success = 0;
        } catch (e) {
            if (!(e instanceof FetchError || e instanceof TypeError)) throw e;
            console.error(e);
        }
    })
})();

EventSource is not a constructor 2

I’m getting error “ERROR!undefined” when running the below code:

import {EventSource} from 'eventsource';
const es = new EventSource('https://ac1.mqtt.sx3ac.com/api/gap/nodes?filter_mac=DC:0D:30:00:07:25&filter_rssi=-75&mac=CC:1B:E0:E2:52:D4&active=1&event=1&chip=1&access_token=a2eb308b262ed05b7aacc84609f0118a8c5830c8186a37bd1455a89e17fd9939');
checkTime();
var startTime = new Date().getTime();
es.onmessage = function(e) {
var endTime=new Date().getTime();
console.log(e.data);
};
es.onerror = function(e) {console.log('ERROR!'+e.status);es.close();return; };
function checkTime() {
        setTimeout(function() {
                es.close();
                return;
        }, 60000);
}

Any clues what could be the problem, or how can I return the full error message?
Thanks

Noob Seeking Front-End Resources [closed]

I am new to web development and coding. I do have a plan/roadmap of how to learn, which is in a nutshell (front-end, backend, APIs, databases, hosting/deployment, Auth/security, Web3).

What are the best resources to follow and enable practicing of front-end technologies (HTML, CSS, JS)? Thanks!

Here’s what I have tried: Udemy, Coursera, some YouTube but there is so much, I would like to understand what the majority have found useful. I am really in search of good examples that do not contain errors.

Why does await inside a forEach not work as expected in JavaScript? [duplicate]

I’m trying to run asynchronous code inside a forEach loop using async/await, but it’s not working as expected.

Here’s a simplified version of what I’m trying to do:

const asyncTask = async (item) => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log(item);
};

const items = [1, 2, 3];

items.forEach(async (item) => {
  await asyncTask(item);
});

console.log("Done!");