Blancer.com Tutorials and projects

I’m just starting to learn how to write a script for Google Forms. I’ve spent several days trying to solve this problem, but I still can’t figure it out. Can someone help me?

I’m trying to extract the value from a field called “notificar” in the form responses so I can use it to send an email later. But I can’t see what I’m doing wrong here.

Here is the relevant part of the code:

const datos = e.namedValues || {};
  const claveNotificar = Object.keys(datos).find(k => k === "notificar");
  const correoDestino = claveNotificar ? datos[claveNotificar][0] : "";

For context, the form has a question exactly named “notificar”, and I expect that value to be in e.namedValues after the form is submitted.

But when I check the logs, “claveNotificar” is undefined and “correoDestino” ends up empty. Am I missing something in how Google Forms passes data to the trigger?

Thank you in advance!

When managing state in vanilla JavaScript—without using frameworks like React or Vue—which design pattern is most suitable.

My requirements are:

• Reactivity
• Time Travel (Undo/Redo)
• Testing and Debugging should be easy
• Single Source of Truth: Maintain state in one central location
• Immutable Updates: Create new objects instead of mutating existing ones
• Separation of Concerns: Keep state management separate from UI code
• Performance: Only update what’s necessary when state changes

Currently I am considering Flux-like Pattern and Redux-like Pattern.

But can not make up my mind as i am not sure if there is a better solution than this.

Please help.

The following code below uses “off” to eleminate multiple tiggers on click messing up some other code. The function with “#del-bmarks” only excutes on click once and never again unless the web page is refreshed. What am I doing wrong? Please advise!

 $(document).ready(function() {

    $(document).off().on("click", ".ai-link", function () { 

     //CODE HERE   

    }):
    
    $(document).on("click", "#del-bmarks", function () {

    //EXECUTES ONLY ONCE ONCLICK    

    };
  });

I’m trying to understand how asynchronous programming works in JavaScript, specifically using Promises and async/await. I have a basic understanding of callbacks, but I’m struggling to grasp how Promises and async/await improve asynchronous code readability and error handling.

Could someone provide a clear example of how to use Promises and async/await in a simple scenario, such as fetching data from an API? I’m also interested in understanding how error handling works in both cases.

Here’s what I’ve tried so far:

Using Promises:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Using async/await:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

I’m not sure if I’m using these correctly or if there’s a better way to handle asynchronous operations. Any guidance or best practices would be appreciated.

I have a page that loads a javascript file. At the top of the javascript file I am declaring my constants for Bootstrap 5 tooltips:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

On the document ready, I am using moment.js to compare today versus the due date of a particular event. In a javascript function, if the event date 2 days or closer to today, then a span element is added to the page, with this markup:

$("#warning"+i).html('<span class="exp-warn" data-bs-toggle="tooltip" data-bs-title="This pick will expire soon." data-bs-placement="right"><i class="bi bi-exclamation-diamond-fill"></i></span>');

The javascript logic is working correctly and displaying the event’s warning, but the tooltip itself is not displaying when I hover over the element.

Is there any code I need to add for tooltips that are added to the page afterr or during the document ready?

I tried multiple setups with this code, and I cannot find a solution any help would be appreciated.

function birdPics() {
     var ads = new Array(5);
      ads[0] = "15 images/bluejay.jpg";
      ads[1] = "15 images/falcon.jpg";
      ads[2] = "15 images/hawk.jpg";
      ads[3] = "15 images/owl.jpg";
      ads[4] = "15 images/prariewarbler.jpg";
      
      var ads = document.getElementById("animalPics");

I tried a few different implementations of the ‘setTimeout’, and nothing seemed to apply the changes made.

As you might or might not know: the printing function of ultimate guitar has become a pro function and users can’t even print their own freely contributed material any more. Another case of enshittification. So I’m working on a workaround.

I had some success with bookmarklets (bookmark with javascript). It allows me to create my own print button and if I’m on a tab I can just click the bookmarklet to print. Here is the prettified code:

(() => {
    let t = document.title.substring(0, document.title.length - 22).replace("^(?:[0-9]*)", ""),
        w = window.open("", "PRINT", "height=400,width=600");
    w.document.write("<html><head><title>" + t + "</title></head><body><h2>" + t + "</h2><pre>");
    document.getElementsByTagName("pre")[0].innerHTML.replace(/<span ?[^>]*>(.*?)</span>/g, "$1").split(/r?n/).forEach(x => {
        if (x.match(/^(?:(?:s+|^)[CDEFGAB](?:##?|bb?)?(?:maj|min|m|sus|aug|dim)?[0-9]*(?:(?:add|##?|bb?)[0-9]*)*)+s*(?[xX]?[0-9]*[xX]?)?s*$/)) {
            w.document.write('<span style="font-weight:bold;">' + x + "</span>n")
        } else {
            w.document.write(x + "n")
        }
    });
    w.document.write("</pre></body></html>")
    w.document.close()
    w.focus()
    w.print()
    w.close()
})()

Logic

1. The original document title is '(' #notifications ')' SONG_TITLE ('CHORDS'|'TABS') 'by' Artist '@ Ultimate-Guitar.com'. So I’m removing the number of notifications in front and the stuff in the end to use it as title and filename.

2. Create new site with title and pre with chords.

3. Remove spans from pre (some chords are in spans, some not, pretty random)

4. Match lines with chords on them and make them bold.

5. Print.

Problems

1. Bolding the lines only works in Chrome, works in Firefox and Brave, but no bold chords, worked in Opera GX without the w.close(), doesn’t work at all in Edge. Can you help me make it more browser independent?

2. The regex matching lines with chords on it is okay for most chords, but it is not perfect. It shouldn’t just work on lines, but detect individual chords (it has to because people write stuff like “fade”, “repeat”, “N.C.” and other stuff in-between the chords. But on the other hand you don’t want to make every “A” bold, probably need something with a lot of look-ahead and -behind to decide whether a potential chord symbol is used as such. Do you have better suggestions?

Feeling a bit stuck after reading a ton of articles and following a bunch of other Stack answers (none of which have worked, most of which don’t relate to my exact problem).

I’ll describe the problem and behavior first, then talk through what I’ve tried so far, and then show the code.

Problem

Doing development locally using Vue/Vite with Firebase tools installed including the emulators and am adding Google signin. The behavior seems to be that both signInWithRedirect and signInWithPopup really want to use https for their URLs and nothing I can do has convinced them to do otherwise. This results in errors for both telling me that they cannot establish a secure connection (either in the redirect, because it tries to redirect to https://localhost:5173/, or it wants to popup an iframe and assign the iframe uri to https://localhost:5173). The host and port match what my project is running on, of course.

What I have tried

Oh, a lot of things. I may be forgetting some, but the most obvious ones include:

• Ensuring that my Google OAuth project has whitelisted http://localhost:5173 as both a source and redirect URI
• Ensuring that Firebase is connected to that Google Oauth project
• Ensuring that my .env.local has an entry for the auth_domain to be overridden and that it’s successfully being overridden (though, note if I try and add the protocol it strips out the : so that it becomes https://http//localhost:5173/…)
• Trying to pass the Auth emulator URL as a string to the signInWith<X>() function as described in one of the Firebase docs I found, this resulted in a firebase auth argument error, and looking at the actual API documentation, it doesn’t appear supported (or if it is, it’s not documented there).
• Clearing the browser cache did nothing to affect any of this behavior (not sure why it would, given what’s happening, but it was one of the Stack recommendations that I found).

Code

The code I’ve tried both ways, but here you go:

        const auth = getAuth(app);
        const provider = new GoogleAuthProvider();
        console.log(import.meta.env.VITE_FIREBASE_AUTH_DOMAIN)
        // signInWithRedirect(auth, provider)
        // .then((result) => {
        //     console.log(result)
        // }).catch((err) => {
        //     console.log(err.message)
        // });

        signInWithPopup(auth, provider)
            .then((result) => {
                const credential = GoogleAuthProvider.credentialFromResult(result);
                const token = credential.accessToken;
                const user = result.user;
                console.log(JSON.stringify(user));
            }).catch((error) => {
                console.error(error.message);
            })

Is there a way to get the GoogleAuthProvider to recognize that I’m working on Localhost and therefore will never be able to work with HTTP?

Thanks!

I am using angular UI tool and I want to integrate Quantum Metrics that will help with live feedback and recorded replay sessions.

Could you please help me how to implement quantum metrics in angular solution.

Thanks in advance.

Firstly my code is running successfully after I did some changes in my code but these changes didn’t apply my web page.it running on previous code I mean , it display same output as before changing a code output

I want to fix my problem

I’m programming a basic chatroom using the PeerJS library, and I would like to have autocomplete functional for that library. However, I am using the web version of VSCode because I am using a shared computer that I can’t install anything on, so I can’t use TypeScript or Automatic Type Acquisition as I can’t use NPM. Is there any way for me to get autocomplete working?

Problem

Environment variables defined in nuxt.config.ts are retrieved correctly, but external scripts (e.g., Google Analytics and Chatway) relying on these variables are not working. The scripts are appended to the DOM but fail to initialize.

What Works

• Formspree form ID (config.public.FORMSPREE) works as expected.

What Fails

• Google Analytics script is appended but tracking does not work.
• Chatway script is appended but the chat widget does not appear.

Relevant Code

const loadAfterConsentScripts = () => {
  const config = useRuntimeConfig();
  const scripts = [
    `https://www.googletagmanager.com/gtag/js?id=${config.public.GOOGLE_ANALYTICS}`,
  ];
  loadScripts(scripts);

  // Initialize Google Analytics
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", config.public.GOOGLE_ANALYTICS);
};

const loadChatwayScript = () => {
  const config = useRuntimeConfig();
  const chatwayScript = document.createElement("script");
  chatwayScript.id = "chatway";
  chatwayScript.async = true;
  chatwayScript.src = `https://cdn.chatway.app/widget.js?id=${config.public.CHATWAY}`;

  chatwayScript.onload = () => {
    console.log("Chatway script loaded.");
    if (window.Chatway && typeof window.Chatway.init === "function") {
      window.Chatway.init();
    } else {
      console.error("Chatway did not initialize.");
    }
  };

  document.body.appendChild(chatwayScript);
};

Environment

• Nuxt Version: 3.17.2

Question

Why are the Google Analytics and Chatway scripts failing to initialize, even though the environment variables are correctly retrieved and the scripts are appended to the DOM? How can I ensure these scripts initialize properly in Nuxt 3?

Thank you! Any help is appreciated.

I’m new here and I’m new in this field (still studying). I’m not sure whether and where to post this question, I apologize for that. I’ve been wanting to ask this for while, but have none to ask to. I’m curious about it though.
Which are the elements that let someone know if a code was written by a human or by AI? How can you tell? Is that a question I am allowed to ask?

I’m still in the learning process and on the way I’ve used Copilot and Gemini as tools to better understand and have things explained to me when I didn’t understand it on my own. I’m not sure if I’ve done wrong in using AI in such a way, thus I’ve wanted to ask if a code written by AI is so different and what elements make someone say “ah, yes that’s AI generated”.

Thank you in advance.

I’m encountering the following error right after I deploy my Discord.js v14 bot:

TypeError: Cannot read properties of undefined (reading 'has')
at Client.<anonymous> (/home/runner/bot/index.js:45:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)

Relevant code (simplified)

    client.on('voiceStateUpdate', async (oldState, newState) => {
  const oldChannel = oldState.channel;
  if (oldChannel && createdRooms.has(oldChannel.id)) {
    // Error is thrown on the next line:
    if (
      oldChannel.members.size === 0 ||
      (oldChannel.members.size === 1 && oldChannel.members.has(client.user.id))
    ) {
      await oldChannel.delete();
      createdRooms.delete(oldChannel.id);
    }
  }
  // ...other logic...
});

What I’ve tried:

• Logged oldChannel.members and saw GuildMemberManager { cache: Collection(1) } before the crash
• Verified the bot has both ViewChannel and ManageChannels permissions
• Tested both locally and on VPS same error every time

Questions:

• Why is oldChannel.members sometimes undefined when I expect a `GuildMemberManager?
• How can I safely check or await until oldChannel.members is ready before calling .has()?
• Is there a better pattern to auto-delete an empty voice channel without triggering this exception?
  Any guidance would be much appreciated. Thanks!

I have a PWA and a Chrome extension, which work in conjunction. I need to be able to receive notifications from BE, do not loose any of them and also be able to programmatically close them (i.e. when such notification is expired).

The most straightforward way is to leverage Push API, but the client does not want to make adjustments to their BE, so I’m stuck with websockets.

Is there something I’m missing and is there a way to make use of websockets in this manner, or I have to push for Push API?

Note: I’m not interested in conserving resources in mobile browsers, main platform will be desktop.

I tried doing this both from PWA service-worker and extension service-worker, but it seems that there is no way to guarantee that both service workers will be up and running, even if websocket is actively communicating.