im really new to web development and html. But with a bit of research I’ve managed to create a website with IIS that shows a png file that is created by another PC on network and constantly updated. The problem i have is how to implement a semaphore solution to not get any errors when multiple people opens this png and the other PC is constantly deleting old png->creating new with same name.

Right now i just use 1 hmtl file. But how do i store a semaphore variable that I can store on the webserver? As I just figured out that html is ran client side.

How to listen to pointerUp event from a different mouse button when a mouse button is pressed down?

Im trying to listen to pointerUp event from right mouse button while the left mouse button is held down. For some reason when any mouse button is held down subsequent pointer down events from any other mouse buttons are not triggering pointerUp events, is there a workaround for this issue?

Thanks for the help in advance 🙂

I’m offering an exciting challenge for all Google Apps Script enthusiasts and developers! Your mission: find a way to effectively conceal an iFrame link in a Google Apps Script so that the link remains hidden in the source code, even in developer tools. The goal is to make the link untraceable to the point where the complete application ID cannot be identified. If you can propose an innovative, working solution that significantly obscures the link, I’ll reward you with an exclusive fully unlimited Google account!What does this account include? Everything premium and unlimited:Unlimited Gmail storageUnlimited Google Drive storageUnlimited Google Apps Script quotasAccess to premium Google resources and toolsAbility to send unlimited emails via Gmail, and much more!I’m serious about rewarding innovative solutions. If your idea stands out, you could be one of the winners! You can DM me with your proposal, or alternatively, send an email to [[email protected]] for convenience.Looking forward to your brilliant solutions.

I have built a javascript function to create a project (= picture + title + category)
using an API using fetch. After the response of the API, I modify DOM to display the new list of projects.
Initially, the fetch was going well but now it is executed multiple time without any request.
The first project is created properly (once) but as soon as I create a second project, it is sent twice (2 projects created). If I create an other project after, it is created 3 ou 4 time. Then the next project will be created 6 or 7 time, etc…

I don’t know how to avoid multiple creation of project via fetch.

// ******************************* FONCTION ENREGISTREMENT DU NOUVEAU PROJET *************************************
let errorMessage = document.getElementById("errorMessage");
async function enregistrerProjet(imageInput, titleInput, categoryInput) {
    // Création de l'objet FormData
    const formData = new FormData();
    formData.append("image", imageInput);
    formData.append("title", titleInput);
    formData.append("category", categoryInput);

    try {
        // Envoi du projet via API /works   
        const response = await fetch("http://localhost:5678/api/works", {
            method: "POST",
            headers: {
                "accept": "application/json",
                "Authorization": "Bearer " + tokenLogin,
            },
            body: formData,
        })
        const responseProjet = await response.json();
        
        if (!response.ok) {
            throw new Error(`Une erreur s'est produite lors de l'ajout d'un élément (${response.status}). Veuillez réessayer plus tard.`)
        }
        projets.push(responseProjet); // ajout du nouveau projet au tableau projets

        // Récupération de l'élément du DOM qui accueillera la galerie
        const divGallery = document.querySelector(".gallery");
        // Création d’une balise dédiée au nouveau projet
        const idProjet = document.createElement("figure");
        idProjet.id = "portfolioFigure_" + responseProjet.id;
        idProjet.dataset.idCategorie = responseProjet.categoryId;
        // Création des balises 
        const imageProjet = document.createElement("img");
        imageProjet.src = responseProjet.imageUrl;
        imageProjet.alt = responseProjet.title;
        const titreProjet = document.createElement("figcaption");
        titreProjet.innerText = responseProjet.title;
        // Rattachement de la balise projet à la division Gallery
        divGallery.appendChild(idProjet);
        idProjet.appendChild(imageProjet);
        idProjet.appendChild(titreProjet);
        // ajout d'une balise image pour affichage projet
        idProjet.classList.add("image");
        document.getElementById("modifyProject").className = "modal-masque"; // masquage de la modale
        document.getElementById("galeriePhoto").className = "modal-wrapper"; // réinitialisation de la div galeriePhoto
        masquerModaleAjoutphoto(); // Masquer la modale 2 (Ajout photo)
        // Regénération de la galerie des projets
        document.querySelector(".gallery").innerHTML = "";
        genererProjets(projets);

    } catch (error) {
            errorMessage.textContent = "Erreur d'envoi du projet."; // vérifier le code erreur *************************
            // Attendre un appui clavier
            document.addEventListener("keydown", function(event) {
                event.preventDefault();
                errorMessage.textContent = ""; // Une touche est pressée, efface le message
            });
            // Attendre un clic de souris
            document.addEventListener("click", function(event) {
                event.preventDefault();
                errorMessage.textContent = ""; // Un click est détecté, efface le message
            });
            alert(error);
    };

};

I am now having a whole html string and need to create the page from it and await it to load before continuing next.

I first tried:

let writeHTMLAndLoad = function() {
    return new Promise((resolve) => {
        document.open();
        window.addEventListener("load",resolve());
        document.write(strHTML);
        document.close();
    });
}
await writeHTMLAndLoad();
//Code continue after...

But the script just directly continued. The html is seens written. But the page, mainly images and some html elements, just not loaded at all

I tried to put resolve without parenthesis, the script changed to await forever.
The same scenario, await forever, apply to cases of seaparting resolve (with or without parenthesis) into a dummy function

let writeHTMLAndLoad = function() {
    return new Promise((resolve) => {
        function dummy() {
            resolve();
        }
        document.open();
        window.addEventListener("load",dummy);
        document.write(strHTML);
        document.close();
    });
}
await writeHTMLAndLoad();
//Code continue after...

But I found the load event can be successully triggered, if I deliberately force the script to continue by resolving directly after document.close();

let writeHTMLAndLoad = function() {
    return new Promise((resolve) => {
        function dummy() {
            console.log("Loaded")
        }
        document.open();
        window.addEventListener("load",dummy());
        document.write(strHTML);
        document.close();
        resolve();
    });
}
await writeHTMLAndLoad();
//Code continue after...

In this case, the console.log("Loaded") printed out in the middle of the scirpt continued after.

May I know how I can resolve successully of the window load event?

I have to use the window load event as the indicator, as I have to use the images loaded.

I currently separated the code that intended to process after the load event into another function and asked the dummy function to call it. But in this case my script just separated into two large parts and prefer not to use this approach. So I would be really appreciated if the load event can be resolved correctly and so the code can be looked logically continue.

I cloned repo and then did a deployment onto Cloudflare worker for staging server. Server will not run live until this issue is resolved. I ran the command npm run frontend: build and it outputs the following error:

Seems like it is unable to import data from Zod validation module. Has anyone experienced a problem like this as I am not able to troubleshoot and figure this out.

Can someone please provide instructions, or better still an example, of how OpenAPI would firstly document and secondly generate Javascript and C# client code for the following RESTful service: –

    [HttpGet]
    public async IAsyncEnumerable<dynamic> yieldLastName(string inName, [EnumeratorCancellation]CancellationToken cancellationToken)
    {
        if (string.IsNullOrWhiteSpace(inName))
        {
            Console.WriteLine("Illeagal Parameter. inName is mandatory.");
            yield break;
        }

        // alter database [AdventureWorks2022] set ALLOW_SNAPSHOT_ISOLATION on;
        TransactionOptions txnOpts = new TransactionOptions() { IsolationLevel = IsolationLevel.Snapshot };

        List<dynamic> namesSelect = new List<dynamic>();

        SqlParameter searchName = new SqlParameter("LastName", System.Data.SqlDbType.Char);
        searchName.Value = inName + "%";

        var sql = @"
            select 
                  LastName,
                  count(*) as hitRate
            from 
                  Person.Person P
            where
                  LastName like @LastName
            group by
                  LastName
            ";

        using (TransactionScope scope = new TransactionScope(TransactionScopeOption.RequiresNew, txnOpts, TransactionScopeAsyncFlowOption.Enabled))
        {
            using (SqlConnection cxn = new SqlConnection(connStr))
            {
                SqlCommand cmd = new SqlCommand(sql, cxn);
                cmd.Parameters.Add(searchName);
                cmd.CommandTimeout = 120000;
                SqlDataReader reader = null!;
                Boolean hasRows = false;

                try
                {
                    await cxn.OpenAsync(cancellationToken);
                    reader = await cmd.ExecuteReaderAsync(cancellationToken);
                    hasRows = await reader.ReadAsync(cancellationToken);
                }
                catch (TaskCanceledException ex) when (ex.CancellationToken == cancellationToken) { }

                while (!cancellationToken.IsCancellationRequested && hasRows)
                {
                    string lastName = "";
                    int hitRate = 0;

                    if (!reader.IsDBNull(0))
                    {
                        lastName = reader.GetString(0);
                    }
                    hitRate = reader.GetInt32(1);

                    yield return new
                    {
                        LastName = Uri.EscapeDataString(lastName),
                        HitRate = hitRate
                    };

                    try
                    {
                        hasRows = await reader.ReadAsync(cancellationToken);
                    }
                    catch (TaskCanceledException ex) when (ex.CancellationToken == cancellationToken) { }

//                   await Task.Delay(100);  // Slow down the Demo
                }
            }
            scope.Complete();
        }
    } 

A complete working example can be found here You need to download a copy of the AdventureWorks database and need VisualStudio to run it.

I am trying to import { decode } from “@here/flexpolyline” which does not run in script.js.

I created a webpack.config.js and created a bundle.js to import the npm but it’s still not working.

https://glitch.com/edit/#!/google-maps-powerapps-iframe

Any help is appreciated.

It logs this error: Error: PERMISSION_DENIED: Permission denied

But the result in the code below is as shown in the image:

const result = await uploadBytesResumable(ref, file, metadata)

How then can we detect the error? It’s not helpful to merely have it logged and have the app carry on like no error ever occurred.

I’m trying to get an understanding of module imports in JS. I read a lot of tutorials and documents on the web and I fell like I have a grasp of the theory now, but still I can’t make things work in practice.

So, here’s what I’ve done.

I got three files in the same path:

try1.html
try2.html
f.js

try1.html:

<!-- try1.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Try1</title>
</head>
<body>

    helloooo

    <script type="module">

        import {printHello} from './f.js';

        document.body.appendChild(printHello());

    </script>
</body>
</html>

try2.html:

<!-- try2.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Try2</title>
</head>
<body>

    helloooo

    <script>

        function printHello() {
            let p = document.createElement('p');
            p.style = 'background: red'
            p.textContent = 'helloooooooooooooo';
            return p;
        }

        document.body.appendChild(printHello());

    </script>
</body>
</html>

f.js:

// f.js

function printHello() {
    let p = document.createElement('p');
    p.style = 'background: red'
    p.textContent = 'helloooooooooooooo';
    return p;
}

export {printHello};

You can see that what I’m trying to do is simply to call a function which will create a DOM element and attach it to the document.

If I do that in a script tag inside the html file, it works (as in try2.html case); instead, if I define the function inside the f.js file and then import it in the try1.html file, it won’t work (that is, the “helloooooooooo” red text won’t show up).

It’s all vanilla javascript and html, as I’m not using Node.js or anything and I’m loading the page simply opening the html file in the browser (firefox, for reference).

What is it I’m doing wrong? I can’t get my head around it. Please help!

I’m new to react and gatsby so I am following the gatsby tutorial online. I was steadily working through Part 2 when I ran into problem. On the tutorial they have created a second javascript file called about.js and added a basic component and exported it at the end. I did all that, granted I typed it all out myself and changed up the text in the html stuff a little but nothing that should affect the outcome of the program too much. But when I go to http://localhost:8000/about/ I get a 404 error and the gatsby development 404 page. To make things worse at the bottom it has a list of pages that it recognizes and http://…/about/ is one of them. Anyone know what is happening here? I will put the code for the home and about page along with screenshots below.

    import * as React from 'react'
    import { Link } from 'gatsby'

    const IndexPage = () => {
      return (
        <main>
          <h1>This is my header</h1>
          <p>This is my paragraph, WOWZA!</p>  
          <Link to='/about'>About</Link>
        </main>
      )
    }

    export default IndexPage

http://localhost:8000/

    import * as React from 'react'
    import { Link } from 'gatsby'

    const AboutPage = () => {
      return (
        <main>
          <h1>About Me</h1>
          <Link to="/">Back to Home</Link>
          <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
        </main>
      )
    }

    export const Head = () => <title>About Me</title>

    export default AboutPage

http://localhost:8000/about/

I tried rerunning gatsby develop to see if that did anything but it didn’t.

So I am building a web application from scratch and being a complete rookie with very little knowledge in backend I’m trying to connect the SpaceX’s API to mongoDB database and display it on the server side.

Now the problem i’m facing is that the name of each mission is “model” and the status is “upcoming”.
How do i fix that?

I tried checking the mapping in the database file. Nothing there!

#I tried removing multiple insertions, there ain’t any.

Help me peeps!

When using a composable which uses useRoute inside middleware I receive this warn: ‘[nuxt] Calling useRoute within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes.’

I tried the solutions from here: https://github.com/nuxt-modules/i18n/issues/2064 and here Nuxt i18n Calling useRoute within middleware may lead to misleading results, but they didn’t work for me. I’m trying to understand whether this is a bug that I should wait to be fixed or if there’s an actual solution. I’m using useRoute inside useStoreAuth(), but not inside checkSession. Since I added useStoreAuth to the middleware, it says I can’t use useRoute. Creating a separate composable for the signIn function where I use useRoute won’t work, because I need to access the signedIn ref from useStoreAuth in both checkSession and signIn functions. Besides, I need to use checkSession within signIn, which means if I create a separate composable called useStoreSession and add it to the middleware, it will also contain useStoreAuth with useRoute.

export default defineNuxtRouteMiddleware(async (to, _from) => {
    const { signedIn, checkSession } = useStoreAuth();

    await checkSession();

    if (!signedIn.value && to.path.startsWith('/profile')) {
        return navigateTo(`/sign-in?redirect=${encodeURIComponent(to.path)}`);
    }
    if (signedIn.value && to.path === '/sign-in') {
        return navigateTo('/');
    }
});

The way I use useRoute inside a composable:

export const useStoreAuth = () => {
    const route = useRoute();
    const signIn = async (signInData: SignInData) => {
        const { apiBase } = useRuntimeConfig().public;
        state.pending = true;
        state.error = null;
        state.successMessage = null;

        const res = await fetch(`${apiBase}/signIn`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(signInData),
        });

        try {
            if (res.ok) {
                await checkSession();
                if (state.signedIn) {
                  if (route.query.redirect) {
                      await navigateTo(`${route.query.redirect}`);
                  } else {
                      await navigateTo(`${route.query.redirect}` || '/');
                  }

                  state.successMessage = 'Signed in successfully';
              } else {
                    state.error = 'Error signing in';
                }
            } else if (res.status === 400) {
                state.error = 'Validation error';
            } else {
                const resData = await res.json();
                state.error = resData.message || "User doesn't exist";
            }
        } catch (err) {
            state.error = `An unexpected error occurred ${err.message}`;
        } finally {
            state.pending = false;
        }
    };


    return {
        ...toRefs(state),
        signIn,
    };
};

Looking for a possible solution.

I have an image displayed in a web page as well as several icons with other images. I am using the vodeo.js library from the following:

<link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>

When clicking on any image icon, the javascript replaces the image. So far, so good.

I have enhanced that to start by displaying that with a video. That works great, with the following code:

  <div id='toppicture' class='design-big-image'><center><video id='gunvideo' class='video-js vjs-default-skin' controls autoplay muted preload='auto' width='750'>
              <source type='application/x-mpegURL' src='http://localhost/gb2/template_videos/133/output.m3u8')>
              </video>
              <script>videojs('gunvideo')</script>

My links to replace the video with an image using the following Javascript code to replace the HTML work as well:

function toggleImage(smallImage) {
    newhtml = "<Center><img maxwidth=750 src=gb2/template_photos/template_photo_133_1.png id='big-image' alt='main gun image' /></Center>n"
    document.getElementById("toppicture").innerHTML = newhtml;
}

On to the problem. My link to replace the “” tag with video updates the HTML, but the web page displays a small video player with no content. When I remove the “control” option from the tag, nothing is seen. If I uncomment the line replacing the tag with an tag, the page updates as expected.

The Javascript code:

function toggleVideo(vidurl) {
    newhtml = "<center><video controls width=750 id='gunvideo' class='video-js vjs-default-skin'><source type='application/x-mpegURL' src='" + vidurl + "')></center></video><script>videojs('gunvideo').load()/script>n";
    document.getElementById("toppicture").innerHTML = newhtml;
    // document.getElementById("toppicture").innerHTML = "<h2>New HTML</h2>";
}

Looking at the HTML code after the replacement, I see the following (which is what I would expect and matches the HTML code on the initial page load that works) :

            <div id='toppicture' class='design-big-image'><center><video id='gunvideo' class='video-js vjs-default-skin' controls autoplay muted preload='auto' width='750'>
              <source type='application/x-mpegURL' src='http://localhost/gb2/template_videos/133/output.m3u8')>
              </video>
              <script>videojs('gunvideo')</script>

It looks like the update to the html source happens as expected, but I am not seeing the expected video output.

I think It is not about html or js file but I added html code too. Footer part is connected with html I checked that. In css code; .footer part is important but I added all code. Why the footer section doesn’t fill the bottom corners of the screen? I tried to solve it with gpt but it keep saying use margin: or these kind of nonsenses:

.footer { background: var(–secondary); text-align: center; padding: 8rem 0; /* */ position: relative; /* */ } .copyright { padding: 14px 0; /* t */ margin: 0; /* */ }

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

/* Base */

:root {
  --primary: #0051c9;
  --secondary: #e5f0ff;
  --white: #fff;
  --text: #212121;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Poppins", sans-serif;
}

html {
  font-size: 10px;
}

body {
  background: var(--white);
  overflow-x: hidden;
  color: var(--text);
}

.page-wrapper {
  max-width: 1840px;
  margin: 0 auto;
}



.footer {
  background: var(--secondary);
  text-align: center;
  padding: 0;
  padding-top: 8rem;
}

.footer h2 {
  margin-bottom: 8px;
}

.footer .btn {
  margin-top: 36px;
}

.contact {
  padding: 60px 130px;
}

.contact-me {
  text-align: left;
}

.contact-me h4 {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 150%;
  margin-bottom: 12px;
}

.icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.icon img {
  pointer-events: none;
  width: 23px;
}

.contact-details {
  gap: 8px;
}

.copyright {
  padding: 14px;
  border-top: 1px solid #cdcdcd;
}

/* End Footer */

.footer {
  background-color: #007bff;
  width: 100%;
  height: 100px;
  position: relative;
  bottom: 0;
  left: 0;
}

/* Large Screens */

@media (min-width: 1100px) {
  html{
    font-size: 11px;
  }
}

@media (min-width: 1480px) {
  html{
    font-size: 13px;
  }
}

/* Small Screens */

@media (max-width: 1000px) {
  html{
    font-size: 9px;
  }

  .section {
    padding: 6rem 2rem;
  }

  .footer {
    padding: 3rem 0px 0px;
  }

  .contact {
    padding: 40px 60px;
  }
}

@media (max-width: 820px) {
  html{
    font-size: 8px;
  }

  .slick-dots li::before {
    width: 28px;
    height: 8px;
    margin: 0;
  }

  .slick-dots li {
    margin: 0 8px;
  }

  .slick-dots {
    margin-left: -24px;
  }
}

@media (max-width: 768px) {
  .testimonials-container {
    max-width: 90%;
  }

  .message {
    min-height: unset;
    max-width: 700px;
  }

  .navbar {
    flex-direction: column;
    height: 90vh;
    padding: 60px 0;
    border: 4px solid var(--primary);
    border-top-color: transparent;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    justify-content: space-evenly;
    transition: 0.5s ease;
    transform: translateY(-1500px)
  }

  .nav-links {
    flex-direction: column;
  }

  .brand {
    margin-bottom: 30px;
  }

  .menu-btn {
    display: block;
    background-color: var(--primary);
    height: 45px;
    width: 45px;
    position: fixed;
    top: 22px;
    right: 20px;
    z-index: 2222;
    border-radius: 50%;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
  }

  .menu-btn-icon,
  .menu-btn-icon::before,
  .menu-btn-icon::after{
    width: 25px;
    height: 2px;
    background-color: var(--white);
    display: inline-block;
    transition: 0.2s all;
  }

  .menu-btn-icon {
    position: relative;
    margin-top: 22px;
  }

  .menu-btn-icon::before,
  .menu-btn-icon::after {
    position: absolute;
    content: "";
    left: 0;
  }

  .menu-btn-icon::before {
    top: -0.8rem;
  }

  .menu-btn-icon::after {
    top: 0.8rem;
  }

  .menu-btn.active .menu-btn-icon::after {
    transform: rotate(-135deg);
    top: 0;
  }

  .menu-btn.active .menu-btn-icon::before {
    transform: rotate(135deg);
    top: 0;
  }

  .menu-btn.active .menu-btn-icon {
    background-color: transparent;
  }

  .navbar.mobile {
    transform: translateY(0);
  }

  .section {
    padding: 4.5rem 1.4rem;
  }

  .hero-image {
    width: 60%;
  }

  .hero-content {
    padding-top: 30px;
    width: 90%;
    text-align: center;
  }

  .hero-content .btn {
    margin: 20px 0;
  }

  .hero h2 span {
    display: none;
  }

  .achievements {
    justify-content: center;
  }
  
  .section.flex,
  .project {
    flex-direction: column-reverse;
  }

  .project:nth-of-type(1) {
    flex-direction: column;
    margin-bottom: 30px;
  }

  .project-details,
  .project-image {
    width: 90%;
    text-align: center;
  }

  .skills-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 70%;
    margin: 0 auto;
  }

  .skill {
    margin: 0 auto;
    width: 175px;
  }

  .footer {
    padding-bottom: 0;
  }

  .contact {
    flex-direction: column;
    padding: 30px 50px;
  }

  .contact-me {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: 2.5px 0;
  }

  .contact-details {
    justify-content: center;
  }

  .contact-me h4{
    margin-bottom: 4px;
  }
}

@media (max-width: 450px) {
  .achievements {
    flex-direction: column;
  }

  .achievements span {
    margin-right: 20px;
  }

  .hero-content {
    padding: 0;
  }
  
  .skills-list {
    grid-template-columns: 1fr;
  }

  .skill {
    width: 90%;
  }

  .testimonials-container {
    padding: 25px 5px;
  }

  .message {
    margin: 0 5px;
  }

  .slick-dots {
    margin-left: -6px;
  }

  .contact-me {
    flex-direction: column;
  }

  .contact-me h4 {
    margin-bottom: 10px;
  }

  .copyright {
    flex-direction: column;
  }

I tried these kind of modifications but it did not work. It keeps getting a white frame.