Category: javascript

I wanted to apply a fancy border with concave corners, so I used SVG. Everything looks fine on screen, but on the print dialog, the border is cut off by the right edge of the page. The border doesn’t get cut off if I give the card a max-width less than the width of the paper, but I don’t want to do that. I tried on Chrome and Edge.

I thought the div’s bounding box wasn’t fully calculated, so I tried requestAnimationFrame() during the print trigger, but no luck.

Below is a minimal example. I gave comments for code changes I tried.

function applyCardBorders() {
  let oldCardBorders = document.getElementsByClassName('card-border');
  Array.from(oldCardBorders).forEach(cardBorder => cardBorder.remove());

  let maxCornerRadius = 12;
  let cards = document.getElementsByClassName('card');

  Array.from(cards).forEach(card => {
    drawBorder(card, maxCornerRadius);
  });
}

function drawBorder(card, maxCornerRadius) {
  // tried it this way too
  // let w = card.offsetWidth;
  // let h = card.offsetHeight;
  let w = card.getBoundingClientRect().width;
  let h = card.getBoundingClientRect().height;
  let cornerRadius = Math.min(h / 3, maxCornerRadius);

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svg.style.position = "absolute";
  svg.style.left = "0px";
  svg.style.top = "0px";
  svg.style.pointerEvents = "none";
  svg.classList.add('card-border');
  // tried it this way too
  // svg.setAttribute("width", "100%");
  // svg.setAttribute("height", "100%");
  svg.setAttribute("width", w);
  svg.setAttribute("height", h);

  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  path.setAttribute("d", `M ${w-cornerRadius},${1} 
                A ${cornerRadius+2},${cornerRadius+2} 0 0 0 ${w-1},${cornerRadius} 
                L ${w-1},${h-cornerRadius} 
                A ${cornerRadius+2},${cornerRadius+2} 0 0 0 ${w-cornerRadius},${h-1} 
                L ${cornerRadius},${h-1} 
                A ${cornerRadius+2},${cornerRadius+2} 0 0 0 ${1},${h-cornerRadius} 
                L ${1},${cornerRadius} 
                A ${cornerRadius+2},${cornerRadius+2} 0 0 0 ${cornerRadius},${1} 
                Z`);
  path.setAttribute("stroke", "#666461");
  path.setAttribute("stroke-width", "2");
  path.setAttribute("fill", "none");

  svg.appendChild(path);
  card.appendChild(svg);
}

window.addEventListener('load', async () => {
  requestAnimationFrame(() => {
    applyCardBorders();
  });
});

window.addEventListener('resize', () => {
  applyCardBorders();
});

// tried it this way too
// const mediaQueryList = window.matchMedia("print");
// mediaQueryList.addEventListener("change", (mql) => {
//  requestAnimationFrame(() => {
//      applyCardBorders();
//  });
// });
window.addEventListener("beforeprint", () => {
  applyCardBorders();
});
window.addEventListener("afterprint", () => {
  applyCardBorders();
});

.card {
  /* don't want to do this because it is paper size dependent, but it works */
  /* max-width: 6in; */
  background-color: #b7cece;
  padding: 8px;
  position: relative;
}

<div class="card">
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
</div>

I’m trying to send OTP emails using Nodemailer in my Node.js project, but I keep getting the following error:

SMTP Connection Error: Error: Missing credentials for “PLAIN”
at SMTPConnection._formatError (…)
at SMTPConnection.login (…)
…
code: ‘EAUTH’,
command: ‘API’

I’ve enabled 2FA and created an App Password for Gmail.

Question:
Why am I still getting the Missing credentials for “PLAIN” error and how can I fix it?

I’m developing an Android application and noticed that a red warning icon (triangle with an exclamation mark) appears when opening an external browser via Linking or when a system permission popup appears. This happens only in Android apps. Can anyone help me understand why this happens and how to resolve it?

Warning icon below the permission popup in red box

I have checked the code nothing seeps to be helpful, changes some setting in androidManifest.xml and also checked the mainActivity.kt files

In my Blazor Web App with .NET 9, I was trying to monitor if the editor loses focus. While I can monitor the editor itself, I have no idea how to properly integrate QuillJS’s hasFocus event with a C# approach to handle this. For this reason, I’ve decided to mimic the behavior of the @onblur event in a <div id="editor"></div>, assuming it’s possible…

My initial attempt was to see if @onblur would work, but it didn’t:

<div id="editor" @onblur="FormatOnBlurQuill"></div>
@code {
    private void FormatOnBlurQuill(FocusEventArgs e)
    {
        Console.WriteLine("Test focus blur"); // not working
    }
}

I suspected that this wasn’t the same as an InputText or a related form field that can handle @onblur events.

However, I tried to see if I could get the editor’s focus status this way:

JavaScript code

window.previewContent = function () {
    const quill = new Quill('#editor', {
        modules: {
            toolbar: '#toolbar-container'
        },
        placeholder: 'Compose a product description here...',
        theme: 'snow'
    });
    window.quillEditor = quill;
};

window.getQuillFocusState = function () {
    if (window.quillEditor) {
        return window.quillEditor.hasFocus();
    }
}

C# code:

@code {
    private async Task SomeMethod()
    {
        await JS.InvokeVoidAsync("previewContent");
        bool isQuillFocused = await JS.InvokeAsync<bool>("getQuillFocusState");
        Console.WriteLine($"Is quill focused: {isQuillFocused}"); // Is quill focused: False
    }
}

I’m not familiar with how to handle events with JavaScript in a Blazor Web App to continuously monitor the focus status of the QuillJS editor.

My question for this context:

• How can I make my Blazor Web App continuously be aware of the focus event in the QuillJS editor and take decisive actions on the server-side based on its actual focus state?

I am a solo developer working with React, Flask, and SQLite, and would like to hear from experienced developers about common mistakes people make so I can avoid them early and ensure high quality and maintainability long term.

I’ve done research, but I want to learn more from others’ experiences so I don’t make the same mistakes and have more confidence coding.

I’m using MobX v6+ and trying to assign a ref-type object to a nested property inside an observable structure. Here’s the setup:

import { observable } from 'mobx';

const foo = observable({
  bar: {
    gar: {
      zar: 123
    }
  }
});

By default, foo.bar.gar becomes deeply observable. But I want to replace gar with a plain object and have MobX treat it as a reference, so that only reassignment of gar triggers reactions—not mutations inside it.

I tried:
foo.bar.gar = observable.ref({ zar: 456 });
But this throws a TypeScript error:
An argument for 'propertyKey' was not provided.

I understand that observable.ref is meant to be used as an annotation, but I need to apply it at runtime, not during object construction or inside makeObservable.

In short:

• How can I assign a ref-type object to a nested property like foo.bar.gar at runtime?
• Is there a MobX-supported way to wrap a value with ref behavior dynamically?
• If not, is there a workaround to prevent MobX from deeply observing the new value?

I’m building a React-based website for a finance company that offers Fixed Deposits, RBI Floating Rate Bonds, and Capital Gain Bonds. We have an internal REST API that returns interest rate details in JSON format, for example:

{
“fixed_deposit”: {
“one_year”: “7.5%”,
“three_years”: “8.0%”,
“five_years”: “8.5%”
},
“capital_gain_bonds”: {
“54EC”: “5.75%”
},
“rbi_bonds”: {
“floating_rate”: “8.1%”
}
}

I want to:

Fetch this data securely (without exposing API keys in frontend).

Display the rates in a simple React table.

I tried fetching the finance company’s API directly from my React frontend using fetch(). I expected the JSON with interest rates to display in my table, but instead I got a CORS error and realized the API key would be exposed, which is not secure.

How does JavaScript execute asynchronous tasks in the event loop?

What are the key strengths and weaknesses of callbacks compared to promises?

How does async/await improve readability, and what are its limitations?

I want to understand how JavaScript handles asynchronous operations and the differences between the main approaches: callbacks, promises, and async/await.

I’m developing a web application with a text-to-speech feature. Users can select text on the page and then click a “Play text to speech” button to have it read aloud. This works perfectly on desktop browsers, but on iPad Safari, the text selection gets automatically cleared when the user taps the button.

Current HTML:

<button onclick="event.preventDefault(); event.stopPropagation(); playTextToSpeech()">Play text to speech</button>

Expected behavior: The text selection should remain active when tapping the button, so the speech function can read the selected text.

Actual behavior: iPad Safari automatically clears the text selection when the button is tapped, making it impossible to access the selected text.

Is there a way to prevent iOS Safari from clearing text selections when interacting with buttons?

What I Tried:
I added event.preventDefault() and event.stopPropagation() to button’s onclick handler:

My reasoning was:

event.preventDefault() would prevent the button’s default behavior
event.stopPropagation() would stop the event from bubbling up to parent elements
Together, these would prevent any interference that might be clearing the text selection

What I was Expecting:
Expected that by preventing the button’s default behavior and event propagation, the text selection would remain active when you tapped the button on iPad Safari. Your workflow should have been:

User selects text on the page
User taps “Play text to speech” button
Text selection remains highlighted/active
playTextToSpeech() function can access the selected text via getSelectedText()
Selected text gets read aloud by the speech engine

I am developing an e-commerce website and using Razorpay as the payment gateway. Currently, Razorpay shows available offers only when the user selects an online payment method through the Razorpay checkout popup.

I want to display all available offers on the product details page before the user places an order. However, I have encountered some challenges:

The Razorpay GET Offers API requires an order_id, which is only generated after creating an order. Therefore, I cannot fetch offers before the order exists.

I also checked the Create Offer API, but it is meant for creating new offers, not fetching existing ones.

I have searched the Razorpay documentation and community forums, but I couldn’t find any API or method to retrieve the available offers before order creation.
Is there a way to fetch and display Razorpay offers on the product page before the user creates an order? If not, what is the recommended approach to show available payment offers to users before checkout?

Any guidance or examples would be greatly appreciated.

I’m trying to make an HTML page that shows a property from a json file, and so far, it’s just returning an [object promise]

This is my code

<p id="sentence">Failed</p>
    <script type="module">
    const jsonsent = fetch("https://example.com/jsonfile.json");
    document.getElementById("sentence").innerHTML = jsonsent;
    </script>

It just ends up making <p id="sentence> read as “[object promise]” like Spamton

Note: things like filenames and urls have been changed from the original code I’m using but should work the same, if example.com had “jsonfile.json”

I’ve been working on understanding the basics of webgl and I am trying to make a 3D-cube. I’ve written two files clfCube.html and clfCube.js. I want each of the 8 vertices to have a different color and I want to twist the cube along the Z axis at an angle of 30 degrees.

The colors of the vertices should be:
Black (0.0, 0.0, 0.0, 1.0)
Red (1.0, 0.0, 0.0, 1.0)
Yellow (1.0, 1.0, 0.0, 1.0)
Green (0.0, 1.0, 0.0, 1.0)
Blue (0.0, 0.0, 1.0, 1.0)
Magenta (1.0, 0.0, 1.0, 1.0)
White (1.0, 1.0, 1.0, 1.0)
Cyan (0.0, 1.0, 1.0, 1.0).

I’ve tried a lot of different solutions but I’m not really making any progress besides depicting a 2D square and messing with the colors

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>3D Cube</title>


<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec3 vPosition;
attribute vec3 vColor;
varying vec4 color;

void 
main() 
{
    gl_Position = vec4(vPosition, 1.0);
    color = vec4(vColor, 1.0);
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;

varying vec4 color;

void main()
{
    gl_FragColor = color;
}
</script>

<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="clfCube.js"></script>
</head>

<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn’t support the HTML5 canvas element
</canvas>
</body>
</html>

"use strict";

var canvas;
var gl;

var points = [];
var colors = [];

var theta = 0.0;

window.onload = function init() 
{
    canvas = document.getElementById("gl-canvas");

    gl = WebGLUtils.setupWebGL(canvas);
    if (!gl) { alert("WebGL isn't available"); }

    // 8 cube vertices
    var vertices = [
        vec3(-0.5, -0.5,  0.5), // 0
        vec3( 0.5, -0.5,  0.5), // 1
        vec3( 0.5,  0.5,  0.5), // 2
        vec3(-0.5,  0.5,  0.5), // 3
        vec3(-0.5, -0.5, -0.5), // 4
        vec3( 0.5, -0.5, -0.5), // 5
        vec3( 0.5,  0.5, -0.5), // 6
        vec3(-0.5,  0.5, -0.5)  // 7
    ];

    // Build cube faces
    quad(vertices, 0, 1, 2, 3); // front
    quad(vertices, 1, 5, 6, 2); // right
    quad(vertices, 5, 4, 7, 6); // back
    quad(vertices, 4, 0, 3, 7); // left
    quad(vertices, 3, 2, 6, 7); // top
    quad(vertices, 4, 5, 1, 0); // bottom

    //
    // Configure WebGL
    //
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);

    // Load shaders and initialize attribute buffers
    var program = initShaders(gl, "vertex-shader", "fragment-shader");
    gl.useProgram(program);

    // Color buffer
    var cBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);

    var vColor = gl.getAttribLocation(program, "vColor");
    gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vColor);

    // Vertex buffer
    var vBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);

    var vPosition = gl.getAttribLocation(program, "vPosition");
    gl.vertexAttribPointer(vPosition, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition);

    // Get uniform location for MVP
    program.uMVP = gl.getUniformLocation(program, "uMVP");

    render(program);
};

function quad(vertices, a, b, c, d) {
    triangle(vertices, a, b, c);
    triangle(vertices, a, c, d);
}

function triangle(vertices, a, b, c) {
    var vertexColors = [
        vec4(0.0, 0.0, 0.0, 1.0), // black
        vec4(1.0, 0.0, 0.0, 1.0), // red
        vec4(1.0, 1.0, 0.0, 1.0), // yellow
        vec4(0.0, 1.0, 0.0, 1.0), // green
        vec4(0.0, 0.0, 1.0, 1.0), // blue
        vec4(1.0, 0.0, 1.0, 1.0), // magenta
        vec4(1.0, 1.0, 1.0, 1.0), // white
        vec4(0.0, 1.0, 1.0, 1.0)  // cyan
    ];

    points.push(vertices[a]); colors.push(vertexColors[a]);
    points.push(vertices[b]); colors.push(vertexColors[b]);
    points.push(vertices[c]); colors.push(vertexColors[c]);
}

function render(program) {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    theta += 1.0; // rotation speed (degrees)
    var model = mult(rotateY(theta), rotateX(theta * 0.7));
    var view = translate(0.0, 0.0, -2.0);
    var projection = perspective(45.0, 1.0, 0.1, 10.0);

    var mvp = mult(projection, mult(view, model));

    gl.uniformMatrix4fv(program.uMVP, false, flatten(mvp));

    gl.drawArrays(gl.TRIANGLES, 0, points.length);
    requestAnimationFrame(function () { render(program); });
}

I am customizing a javascript application using the framework the application gives. I am able to modify the code of a single file.

I’ve found a bug in the application itself and I’d like to correct it from the single file I’m given. Typically, this could be achieved on a single instance with something like this:

class A {
    doathing(){
        console.log("A thing");
    }
}
let a = A();
a.doathing = () => console.log("A different thing");
...
a.doathing() // log: A different thing

But in this case I don’t have access to the instance when I need to change the behavior. I need to change the class itself so that all future instances have the new behavior. So I’m looking for something like this:

class A {
    doathing(){
        console.log("A thing");
    }
}

darkmagic(A, () = console.log("A different thing"));
...
let a = A();
...
a.doathing() // desired log message is: A different thing

Is this possible? Is there a way I could create my own class that overrides it and then ensure everywhere else in the app that uses it uses my class? Any other crazy ideas?

Check this dialog box implementation.

const open = document.getElementById('open')
const dlg = document.getElementById('dlg')
open.addEventListener('click', function () {
  dlg.showModal()
})
dlg.addEventListener('close', function () {
  console.log('You chose:', dlg.returnValue)
})

<button id="open">Open</button>
<dialog id="dlg">
  <form method="dialog">
    <p>Are you sure?</p>
    <button value="no">No</button>
    <button value="yes">Yes</button>
  </form>
</dialog>

Follow these steps:

1. Run the above code snippet with Firefox.
2. Click “Open” button.
3. Click “No” in the dialog box.
4. The console log shows You chose: no.
5. Click “Open” button again.
6. Cancel the dialog box by pressing Esc.
7. The console log shows You chose: no.

Why does the console log show You chose: no in step 7. Shouldn’t dlg.returnValue be empty string in step 7 because the dialog box was canceled using Esc? I was expecting ‘You chose: ` in step 7.

I confirmed this with Firefox 143.

I want to pass a string to nodemailer so that it results in

=C2=A0

i tried to pass in both 'Â ' (the literal chars), "xC2xA0", etc.

But they always result in =C3=A9

A longer example in case anyone can see a pattern. I pass chars that would result in:

=C2=A0=E2=80=8C=C2=A0=E2=80=8C=C2=A0=E2=80=8C=C2=A0=E2=80=8C=...

but get:

=C3=82=C2=A0=C3=A2=C2=80=C2=8C=C3=82=C2=A0=C3=A2=C2=80=C2=8C=...

i’m using only setting textEncoding: 'quoted-printable' in the options besides emails and html/text. Everything else is default.

If I pass the same string i’m sending to html on nodemailer via:

    let out = ""; // line is the string passed to nodemailer's html.
    for (let k = 0; k < line.length; k++) {
        const code = line.charCodeAt(k);
        out += "=" + code.toString(16).toUpperCase().padStart(2, "0");
    }
    console.log(out);

I do get the expected output just fine.