Category: javascript

I am a newbie. I have been learning javascript and I feel like I almost grasp it but I am a very visual learner and I am having trouble visualizing how this works. I am learning with code academy. My ultimate goal is to understand how inputs and outputs are inserted into reusable functions.

I understand the general idea, but I get lost in the details of how the argument flows through or is ‘passed’ to the functions.

My specific questions are:

• When I call getFahrenheit(15), where exactly is the ’15’ passed to?
• In getFahrenheit(celsius), the argument is named ‘celsius’. Does ’15’ replace ‘celsius’ inside that function, and then get passed into multiplyByNineFifths()?
• In multiplyByNineFifths(number), does ’15’ replace ‘number’, so the second line becomes return 15 * (9/5);?
• When multiplyByNineFifths() returns ’27’, does that mean the call inside getFahrenheit(celsius) effectively becomes 27 + 32?
• Finally, does the code re-run both functions again, or is it just passing the returned value along?

The code below is a snippet example that I have questions about. No setup or context needed. This is the exact code I want to make sure I understand how it works.

function multiplyByNineFifths(number) {
  return number * (9/5);
};

function getFahrenheit(celsius) {
  return multiplyByNineFifths(celsius) + 32;
};

getFahrenheit(15); // Returns 59

I think my confusion is mostly about whether the return value actually “replaces” the function call inside the other function, or whether something else is happening behind the scenes.

I have tried googling my question and have not been able to find the answer. I googled “how do helper functions in javascript work?” I have found several questions about helper functions (like what they do, how they can improve readability of code, etc.), but none that explain how a code like this works. I am just looking for some helping clarifying how the inputs and outputs visually flow through when the getFahrenheit(15) function is called. I also read all ‘similarly phrased questions’ and do not see an on point explanation.

I am working on a user script (I’m using Tampermoney as my user script manager) to append a dynamic Rotten Tomatoes link to a Jellyfin movies/series page.

It works when I manually reload on the title’s page, but I want it work when I navigate to the page without a need for a manual reload.

Here’s the effect (when reloaded currently):

Here is my script:

// ==UserScript==
// @name         Rotten Tomatoes Links for Jellyfin
// @namespace    http://stpettersen.xyz
// @version      2025-09-07
// @description  This script adds a Rotten Tomatoes link for TV and movies on Jellyfin.
// @author       Sam Saint-Pettersen
// @match        https://jellyfin.mmedia.stpettersen.xyz/*
// @icon         https://www.rottentomatoes.com/assets/pizza-pie/images/favicon.ico
// @grant        none
// ==/UserScript==

(function() {
    // Replace @match with your Jellyfin server URL.
    'use strict';

    function waitForElement(selector, targetNode = document.body) {
        return new Promise((resolve) => {
            const element = document.querySelector(selector);
            if (element) {
                return resolve(element);
            }

            const observer = new MutationObserver(() => {
            const foundElement = document.querySelector(selector);
            if (foundElement) {
                observer.disconnect();
                resolve(foundElement);
            }
    });

    observer.observe(targetNode, {
      childList: true,
      subtree: true
    });
  });
}

function injectRTLink() {
    let targetEl = null;
    let links = document.getElementsByClassName('button-link')
    for (let i = 0; i < links.length; i++) {
        if (links[i].href.startsWith("https://www.themoviedb.org")) {
            targetEl = links[i];
            break;
        }
        if (targetEl != null) {
            break;
        }
    }
    let genre = "m";
    let year = "";
    let title = document.getElementsByTagName("bdi")[0].innerHTML.toLowerCase()
    .replace(/ /g,"_").replace(/'/g,"").replace(/_&amp;/g, "").replace(/:/g, "").replace(/,/g, "").replace(/-/g, "_");
    let otm = document.getElementsByClassName("originalTitle")[0];
    if (otm) {
        let ot = document.getElementsByClassName("originalTitle")[0].innerHTML;
        if (ot.length > 0) year = "_" + ot;
    }
    let ott = document.getElementsByClassName("originalTitle")[0];
    if (ott) {
        let ot = document.getElementsByClassName("originalTitle")[0].innerHTML;
        if (ot == "TV") genre = "tv";
    }
    targetEl.insertAdjacentHTML("afterend",
    `, <a id="rt-link" target="_blank" class="button-link emby-button" href="https://www.rottentomatoes.com/${genre}/${title}${year}">Rotten Tomatoes</a>`
    .replace("_TV", ""));
}

// Wait for bottom cards to load before attempting to get/insert links.
waitForElement('.card').then(element => {
    injectRTLink();
});
})();

Any pointers would be great. Thank you.

I need to draw a bar chart, not exactly but somewhat similar, like in the first picture.
I have one stacked bar consisting of 2 bars one narrow bar and one nonstacked with the same width as the stacked bar.

I don´t want to have any space between them.
When I play around with barPercentage and categoryPercentage I only get spaces around the narrow bar.

This is what I want:

And this is the only thing I can reproduce:

With this code:

const ctx = document.getElementById('capacityOverviewChart').getContext('2d');
const data = {
  datasets: [{
      label: 'Stacked A1',
      data: [{
        x: 'Mon',
        y: 10
      }, {
        x: 'Tue',
        y: 12
      }, {
        x: 'Wed',
        y: 8
      }, {
        x: 'Thu',
        y: 14
      }],
      backgroundColor: 'rgba(255, 99, 132, 0.6)',
      stack: 'stack1',
      barPercentage: 1.0,
      categoryPercentage: 0.8,
    },
    {
      label: 'Stacked A2',
      data: [{
        x: 'Mon',
        y: 15
      }, {
        x: 'Tue',
        y: 18
      }, {
        x: 'Wed',
        y: 12
      }, {
        x: 'Thu',
        y: 20
      }],
      backgroundColor: 'rgba(255, 159, 64, 0.6)',
      stack: 'stack1',
      barPercentage: 1.0,
      categoryPercentage: 0.8,
    },
    {
      label: 'Narrow B',
      data: [{
        x: 'Mon',
        y: 20
      }, {
        x: 'Tue',
        y: 18
      }, {
        x: 'Wed',
        y: 22
      }, {
        x: 'Thu',
        y: 16
      }],
      backgroundColor: 'rgba(75, 192, 192, 0.6)',
      stack: 'stack2',
      barPercentage: 1, // ~1/6th width
      categoryPercentage: 0.2,
    },
    {
      label: 'Normal C',
      data: [{
        x: 'Mon',
        y: 25
      }, {
        x: 'Tue',
        y: 30
      }, {
        x: 'Wed',
        y: 28
      }, {
        x: 'Thu',
        y: 32
      }],
      backgroundColor: 'rgba(54, 162, 235, 0.6)',
      stack: 'stack3',
      barPercentage: 1.0,
      categoryPercentage: 0.8
    }
  ]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: false
      },
    },
    scales: {
      x: {
        stacked: true,
        ticks: {
          display: true
        },
      },
      y: {
        stacked: false,
        beginAtZero: true,
      }
    }
  }
};

new Chart(ctx, config);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="capacityOverviewChart">

I want to locate a button which is in an iframe. To do so, I need to use the weird iframe notation:

page.locator('iframe[name="some_iframe_id"]').contentFrame().locator('#some_locator')

On the other hand, locating the same component on a page without an iframe is way simpler:

page.locator('#some_locator')

Why is it not possible to use the usual notation and why do I need to refer which iframe specifically to use? Shouldn’t Playwright be able to figure this out on its own?

We are busy with adding new features to Dragon1.

We have clients with large volume JSON files and some RAW data is with and without quotes and stuff. No that structured.

As CTO I am still doing coding once a week.

Some of my team members say we should let go of javascript and move to typescript.

But I need better arguments than I have heard so far.

Who has some good arguments.

We have done some comparison experiments on APIs and data conversions and javascript seems to be faster and less strict, which is easier for prototyping.

for instance this:

         const data = [
          { id: 1, value: 100 },
          { id: 2, value: '200' }, // This would cause a TS error
          { id: 3, value: 300 }
         ];

         const transformedData = data.map(item => ({
           id: item.id,
           // This line works because JS is flexible
           transformedValue: item.value * 2
          }));


          console.log(transformedData);
          // Output: [ { id: 1, transformedValue: 200 }, { id: 2, transformedValue: 400 }, { id: 3, transformedValue: 600 } ]

Very simple question.

I have pixel 6a below code works everywhere expect the real pixel device 6a which has android 16.

It works on Redmi note 11 which has android 11 and on Emulator which is pixel 6 (android 14). But not on the pixel device. When I use the below code

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : undefined}
  style={{ flex: 1 }}
  enabled
>

Sometimes the container goes up but just up to the input bar, only input bar gets hidden. But meanwhile when I turn off the screen and unlock my pixel 6a mobile, it gets corrected. I just want a global solution, can anyone help. I don’t know what is happening when turning off and on the screen.

This is my current code. It works but with a bug like gaps being produced often. But works but not smoothly.

const keyboardOffset = isKeyboardVisible ?  headerHeight : headerHeight + insets.bottom + 23;
  
  return (
    <KeyboardAvoidingView
    keyboardVerticalOffset={keyboardOffset}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
      style={{ flex: 1 }}
      enabled
    >
      <SafeAreaView style={styles.container}>
        {/* Header */}
        <View style={styles.header}></View>
        <FlatList />
        <MessageInput receiverUsername={selectedReceiverUsername || ''} status={status} />
      </SafeAreaView>
    </KeyboardAvoidingView>
  )

I have a REST API that I want to call from multiple React projects, and I was thinking to make a library that exposes the REST API calls, using the Redux Toolkit Query code generation.

I would like to let individual projects specify a base URL (as there are several API versions) and a custom function to get a user token, but I could not find a way to make this co-exist with the generated code.

The idea would be something along these lines:

import { myApi } from "./myApi";
import { fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const createMyApi = (baseUrl, getTokenFunction) => {
  
  const newBaseQuery = fetchBaseQuery({
    baseUrl,
    prepareHeaders: (headers) => {
      headers.set("Authorization", `Bearer ${getTokenFunction()}`);
      return headers;
    },
  });
  
  return ??? // return a version of the generated 'myApi' that uses newBaseQuery
};

Is this possible at all?

I have two files trying to handle /api/jobs—one for public viewing and one for admin actions. What’s the best practice for combining these into a single, secure route file without them conflicting?”

please solve my error

When exporting my HTML content to PDF using html2pdf, the text inside the element appears cut off and there is an unusually large space between elements. Specifically:

Inline-block elements (<span> and <p>) do not render correctly.

The <p> text seems cropped vertically, likely due to line-height or the way html2canvas calculates height.

Extra spacing appears around the elements, even though margin and padding are set to 0.

    const element = document.querySelector("#GGG");
    // Clone the element
    var clonedElement = element;
    clonedElement.style.display = "block";
    

    // Define the options for exporting
    const options = {
      margin: 0,
      padding:0,
      filename: filename,
      image: { type: "jpeg", quality: 1 },
      html2canvas: {
        scale: 4,
        useCORS: true,
        scrollX: 0,
        scrollY: 0,
        backgroundColor: null,
      },
      jsPDF: {
        unit: "pt",
        format: "a4",
        orientation: "portrait",
      },
      pagebreak: {
        mode: ["css", "legacy"],
      },
    };


    // Export to PDF
    html2pdf()
      .set(options)
      .from(clonedElement).outputPdf('bloburl').then((pdfUrl)=> {
        window.open(pdfUrl,'_blank');
      }).catch(e=>{
        console.log("error")
      });

    <div id="GGG">
    <span className="bg-black w-4 h-4 inline-block"></span>
    <p className="w-4 h-4 inline-block" style={{lineHeight:"100%"}}>GG</p>
    </div>

in HTML :

in PDF FILE :

When using the t.clik function of testcafe, clicking on a specific element will click on its child elements, resulting in unsatisfactory operation. How can I force click on the element itself without responding to clicks on child elements?

When I push the AdvancedMarker to an array, it then later on will not delete but I can clearly see that when it finds the marker in the array it is an element.

const markerToRemove = activeMarkers.find(m => m.title === imei);
if (markerToRemove)
{
    console.log(markerToRemove)
    markerToRemove.remove();

    activeMarkers = activeMarkers.filter(m => m !== markerToRemove);
    console.log(`Removed existing marker with IMEI: ${imei}`);
} else
{
    console.log(`No marker found with IMEI: ${imei}`);
}

const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: { lat: latitude, lng: longitude },
    content: el,
    title: imei,
});

marker.imei = imei; // Store IMEI for identification
activeMarkers.push(marker);

Any help would be appreciated!

I tried creating a new webpage and starting again and this did not fix the problem. I expected it to remove the marker.

When using the t.clik function of testcafe, clicking on a specific element will click on its child elements, resulting in unsatisfactory operation. How can I force click on the element itself without responding to clicks on child elements?

In PHPUnit, there is Test dependencies feature but in Jest I don’t see any like that.

I have tests just like this. (The whole Node.js project is in "type": "module".)

import fs from 'node:fs';

describe('Description of test file 1', () => {
    test('Test on file1', () => {
        expect(true).toBeTruthy();
        // create file for use in file2. also use it for test here too.
    });
});

Above is file1.test.mjs.

import fs from 'node:fs';

describe('Description of test file 2', () => {
    test('Test on file2', () => {
        expect(false).toBeFalsy();
        // use a file that created in file1. test it then delete.
    });
});

Above is file2.test.mjs.

I want to make sure that file2.test.mjs runs after file1.test.mjs.
How to mark it to run after file 1 (or also know in PHPUnit as depends on file1)?

I’m embedding a YouTube video using the IFrame Player API.
I want to hide only the progress bar (seek bar) but still allow users to change video quality via the gear icon.

I tried using controls: 0, but it hides the entire YouTube UI, including the quality selector.

Setting controls: 1 shows everything, but I only want to keep the quality menu and remove the timeline/progress bar.

Also, using CSS like this doesn’t work:

iframe .ytp-progress-bar {
  display: none !important;
}

Because the iframe is cross-origin, I can’t access or style the internal elements of the player.

Is there any way to hide just the progress bar while keeping the quality selector visible?
Even a hacky workaround would be appreciated.

What I’ve tried:

playerVars.controls = 0 → hides everything, including quality menu

playerVars.controls = 1 + CSS mask → can’t style inside iframe

setPlaybackQuality('hd1080') → deprecated / doesn’t work

My goal:

Hide only the timeline/progress bar

Keep the quality menu available (or programmatically set video quality)

Any ideas, tricks, or workarounds?

Thanks in advance!

I’m building a danmaku (bullet comments) system in a project that consists of HTML + CSS + TypeScript.
So far, I’ve tried two approaches:

Direct DOM manipulation

I create <div> or <img> elements for each danmaku.

Position updates are done using CSS transform: translate3d(...) for smooth GPU acceleration.

Performance is actually quite good, but I still see some unavoidable jitter/shaking when many elements are moving, especially with <img> tags.

Canvas 2D API

I render all danmaku on a <canvas>.

Surprisingly, this feels slower than DOM: more stuttering and even screen tearing/flickering.

Even with an offscreen buffer (OffscreenCanvas or double buffering), it doesn’t feel as smooth as DOM.

I also considered a third approach:

Pre-render each danmaku’s text into a small <canvas> once.

Later, just drawImage those cached canvases every frame instead of calling fillText.

But I’m worried this might introduce too much complexity and memory overhead if there are many comments.

Now I’m wondering:

Is this just the limitation of Canvas 2D API, and the only way to get smooth danmaku rendering at scale is WebGL?

Or are there known techniques to make Canvas-based text/images perform as well as DOM (e.g., caching, texture atlas, bitmap reuse)?

In practice, what do large-scale video platforms (like Bilibili, Niconico) use for this?

Any advice or references would be appreciated!