Category: javascript

I’m little bit confused with docker and containers, let’s say I have 2 folders

• front
• back

on front folder i use purgecss to delete unused css from my scripts and also from my .pug filels inside back without docker this is easy to just do something like

../back/src/ui/views/**/*.pug

now I’m trying to migrate my setup to docker and docker compose

services:
  nginx:
    build:
      context: ../nginx
      dockerfile: Dockerfile
    container_name: nginx
    ports:
      - '3000:80'
      - '443:443'
    volumes:
      - ../../core/front/static:/usr/share/nginx/static:ro
    networks:
      - app-network

  front:
    build:
      context: ../../core/front
      dockerfile: infra/Dockerfile.dev
    container_name: front
    volumes:
      - ../../core/front/:/app
    networks:
      - app-network

  back:
    build:
      context: ../../core/back
      dockerfile: infra/Dockerfile.dev
    container_name: back
    environment:
      NODE_ENV: development
    volumes:
      - ../../core/back/:/app
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

now the path ../back/src/ui/views/**/*.pug won’t work anymore since front and back are running in different containers not locally anymore, is it possible to do that or it’s not possible if both running in different containers ?

I have a simple web page with some divs with data in them, and I would like to make some of the text editable by using Malle.js. This is super simple in theory, and it works perfectly for any text that is put directly into the HTML with the attribute data-malleable.

However, I am generating all that HTML with another bit of javascript. I thought doing that with a promise and then initialising Malle in the then clause should do the trick, but it doesn’t.

This is what I’ve got:

let promise = new Promise(function(resolve, reject) {
    let t = "test";
    createOutput();
    resolve(t);
}).then((t) => {
    console.log(t); //this works!
    console.log(document.querySelectorAll('.percent')); // this works as well
    // this still only targets the element that I put directly in the HTML
    let malle = new Malle({
        fun: (value, original, event, input) => {
            console.log(`New text: ${value}`);
            console.log(`Original element:`);
            console.log(original);
            return myFunctionReturningAPromiseString();
        },
    }).listen();
});

So the question is, how can I get Malle to grab all those lovely generated spans that have the data-malleable attribute?

I was reading the MDN documentation on this in DOM event handlers which states:

When a function is used as an event handler, its this parameter is bound to the DOM element on which the listener is placed.

However, in practice this seems to be slightly misleading, because the listener’s this is actually bound to whatever EventTarget you attached it to—even if it isn’t an HTML element. For example:

// 'document' is not an Element node, but an EventTarget
document.addEventListener('visibilitychange', function() {
  // `this` === document
  console.log(this.hidden, document.hidden); // both true/false
});

Here, inside the handler, this.hidden behaves exactly like document.hidden. Similarly, if I do:

window.addEventListener('resize', function() {
  console.log(this === window); // true
});

…the same principle applies: this is the EventTarget (in this case, window), not necessarily a DOM Element.

1. Is the MDN wording inaccurate or just informal?
2. What is the precise specification language for what this refers to in an event listener callback?
3. Should MDN’s phrasing be updated to mention “EventTarget” rather than “DOM element”?

Any references to the DOM/EventTarget spec or other authoritative sources would be greatly appreciated!

I am trying to implement a simple Okta PKCE authentication. I am getting redirected to my callback URL with this error:

error=invalid_request&error_description=PKCE+code+challenge+contains+illegal+characters.

There is an article describing it, but it is not really helpful. The problem seems to be that my code_challenge contains the characters + and =, which is totally normal for base64. The okta docs say:

The code_challenge is a Base64-encoded SHA256 hash of the code_verifier

This is how I generate the hash, for testing I just use constant string:

import * as node_crypto from 'node:crypto';

class OktaAccessManager {
    constructor() {
        // todo: remember and periodically purge
        this.challenges = new Map();
    }

    createChallenge() {
        const randomString = "ddd";
        const hash = node_crypto.createHash('sha256')
               .update(randomString)
               .digest('base64');
        const challenge = {
            hash: hash,
            method: 'sha256',
            secretString: randomString
        };
        return challenge;
    }

Then I just generate simple redirect in my Express server:

const redirectUrl = `https://${SERVER_HOSTNAME}/auth/okta-callback`;
const challenge = oktaManager.createChallenge();
const params = new URLSearchParams({
    client_id: "XXXXXXXXXXXXXXXXX",
    state: "state-AAAAAAA-AAAA-AAAA-25cf-386e3d8967e9",
    redirect_uri: redirectUrl,
    response_type: "code",
    scope: "email openid",
    code_challenge: challenge.hash,
    code_challenge_method: "S256",
});
const fullURL = new URL(`https://${OKTA_SERVER}/oauth2/v1/authorize`);
fullURL.search = params.toString();
res.header("Cache-Control", "no-store");
res.header("Pragma", "no-cache");
res.header("X-Content-Type-Options", "nosniff");
res.header("X-Frame-Options", "DENY");
res.header("X-XSS-Protection", "1; mode=block");
res.redirect(301, fullURL.toString());

When I do this, I get redirected to my redirect_uri with the GET params describing the error.

So what exactly do I do with the base64 so that okta accepts it?

I have the following HTML structure (simplified JSX output):

<span>
  <div className="employment-detail">
    <span className="tuple-details_subDetail__ntttw">
      <span title="Developer III - Full Stack Web Development">
        <span>Developer III - Full Stack Web Development</span>
      </span>
      at
      <span title="UST Global">
        <span>UST Global</span>
      </span>
    </span>
  </div>

  <span>, since Dec ‘25</span>
</span>

Issue is this is being rendered as –

Developer III - Full Stack Web Development at UST Global
, since Dec ‘25

which looks very tacky
I want this to behave as it is one single line and output to be –

Developer III - Full Stack Web Development at UST Global, since Dec ‘25

I cannot change the HTML structure (i.e., can’t replace the with a ), but I can modify the CSS.

Is there a pure CSS solution to ensure everything appears on the same line and avoids this awkward line break before the comma?

Thanks in advance!

I’m trying to show a table in HTML from a JSON file stored in LittleFS in ESP32 microcontroller.

This file (named log.txt in LittleFS) is updated from a RFID routine or manually by /manage-users page, and this functions are working.

The JSON file is correctly uploaded and readed by the program (ArduinoJson.h) and the structure is:

[
  {
    "room": 302,
    "uid": "AAAAAAAA",
    "guest": 2,
    "hour": "20/05/25 10:45"
  },
  {
    "room": 203,
    "uid": "BBBBBBBB",
    "guest": 1,
    "hour": "05/12/91 10:25"
  }
]

I’m trying to show it in a HTML table with javascript but I fail miserably, the data is coming from:

server.on("/view-log", HTTP_GET, [](AsyncWebServerRequest* request) {
    request->send(LittleFS, "/log.txt", "text/plain", false);
});

This is served from ESPAsyncWebServer.h library, the HTML code is:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="refresh" content="30">
        <meta charset="UTF8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>ESP WEBSERVER</title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
    <nav>
        <div class="nav-container">
            <a href="/" class="brand">User Management</a>
            <ul class="nav-menu">
                <li><a href="/"> full log</a></li>
                <li><a href="add-user">Add user</a></li>
                <li><a href="manage-users">Manage users</a></li>
            </ul>
        </div>
    </nav>
    <div class="main-container">
        <section class="main-selection">
            <h2>Full access log</h2>
            <table id="tableData">
                <thead>
                    <tr>
                        <th>Room</th>
                        <th>Uid</th>
                        <th>Guest</th>
                        <th>hour</th>
                    </tr>                       
                </thead>
                <tbody id="data-output">
                    <!-- DATA -->
                </tbody>
            </table>
        </section>
    </div>
    <div class="main-container">
        <a href="get?delete=log"><buttton class="button button-delete">DELETE log.txt</button></a>
    </div>
    <script>
        async function loadTableData(){
            try{
                const response = await fetch('view-log');
                const data = await reponse.text();
                var table = document.getElementById('data-output')
                for (var i = 0; i < data.length; i++){
                    var row = `<tr>
                            <td>${data[i].room}</td>
                            <td>${data[i].uid}</td>
                            <td>${data[i].guest}</td>
                            <td>${data[i].hour}</td>
                        </tr>`
                    tab.innerHTML += row
                }
            } catch (error) {
                console.error('Error loading log data:', error);
            }
        }
        loadTableData();
    </script>
</body>
</html>

In the browser console I’m getting the error

(index):58 Error loading log data: ReferenceError: reponse is not defined at loadTableData ((index):46:18)

Probably for the way i’m feeding data to the script, but I’m completely a noob with javascript so I’m forced to ask for help here.
By now I’m feeding the table in only HTML code but it’s not fittable in an expasion of the website so I want to reach a javascript solution for this kind of problem.
Thank you in advance for helping me!

I have one scenario where I need to pass URL, USERNAME and Password for the execution.

Usually I do passing environment variables through command line similar to

npx cypress run --headed --browser chrome --env URL=https://testurl.com,USER=admin,PASSWORD=test

But when I tried to implement cypress-parallel to enable parallel execution, I’m not able to pass Environment variables.

Have provided the below code in package.json

  "scripts": {
    "cy:run": "npx cypress run --headed --browser chrome",
    "cy:parallel": "cypress-parallel -d 'cypress/e2e/ui/FunctionalValidations/' -t 3 -s cy:run"
  }`

and tried to run script with Environment variables it is not accepting the values.

npm run cy:parallel --env URL=https://testurl.com,USER=admin,PASSWORD=test`

How can I pass environment variables to the cypress-parallel method to get executed?

what is the better : code A or code B , for more performance and why.

Code A :

document.getElementById("ff").addEventListener("click", VV);
    function VV() {
        let cc = document.getElementById("cc");
        function CC() {
             cc.innerHTML = "cc";
        }
        return CC();
    }

Code B :

document.getElementById("ff").addEventListener("click", VV);
        function VV() {
            let cc = document.getElementById("cc");
           cc.innerHTML = "cc";
        }

I am facing a truly peculiar problem. I have a function that calls another function to validate height

const validateHeight= async () => {
  const {currentFormData} = cloneDeep(state);
  let validHeight;
  //heightValidationLogic here, also includes API calls
  if(validHeight){
      return [true, max_height];
    } 
  else {
    return [false, 0];
  }
  const peculiarFunction = async () => { //This is the main function
    let isvalidHeight = true;
    let maxHeight = 0;
    const {currentFormData} = cloneDeep(state);
      if(currentFormData.map){ //checks if the map property is true
        setState({...state, isLoading:'hasMap'})
        [isValidHeight,maxHeight] = await validateHeight(); //Here, the other function is called
        //Other height based logic
        setState({...state, isLoading:''})
      }
    //Code to continue with form submission or show to error for invalid height 
  };

Issue is, the setState({...state, isLoading:'hasMap'}) line before the function call returns the error setState(...) is undefined, and the peculiar behaviour is, if I return the response from the validateHeight() function as an object return {isValidHeight: true, availableHeight: max_height}rather than as an array to be destructured, the error goes away. How does the function call cause an error in a line before it is even called?

I’ve logged the response from validateHeight() in both cases constantly, there are no errors in the function and the values are always exactly what I expect when the function runs. I added a try catch statement in the peculiar function and slowly limited the number of lines in it to see if its an issue with asynchronous operations and that the error is occuring somewhere else. As long as both the setState() call and the validateheight() function are in the same block/scope, the error occurs. The moment any one of them is no longer under the same try-catch statement, the error goes away, everything is working now.
The issue also does NOT occur with the second setState() statement that comes after the function call, it never returns an error with any combination of try-catch statements.
I understand that I have the alternative of returning the response as an object and will be moving forward with it, but I do want to understand this strange behaviour and find an answer for it. Hopefully someone here can help.

Kindly advice some good libraries for pivotTable tree for web (js, react, or any others).

Also, I need expandable rows and columns to hide some data and see totals.

Can you advice some from your practice?

Something like that, and library should handle dates data in header. Many of discovered libs either are not good at that, or asks money.

I`ve try webdatarocks.com solution, but after reaching its limit in 1 Mb (JSON size) it asks to purchase full for ~$1k.

TLDR: I want to use JavaScript to execute Linux programs on the browser (as an experiment) but I don’t know how to use JavaScript to execute any programs.

I wanted to experiment if I could take a compiled program from Linux usually written in a language like C/C++. Then execute and show results in a website.

For example, Taking a compiled C program that takes user input and gives it as output. Then making my website execute it. Taking input in a input form and returning output as a div. But How can JavaScript be used to execute programs?

I want an image to be clickable, and display a popup when clicked, but even though I’ve added the onclick attribute, when I run the servlet the image isn’t clickable.

I don’t get any errors, I just can’t click on the image. I don’t think the showPopup function is getting called at all. I tried checking with console.log and it doesn’t print anything.

const PFPpopudID = "PFP-Select";

function ShowPopup(popupID) {
  const popup = document.getElementById(popupID);
  popup.classList.toggle("show");
}

.profile {
  display: flex;
}

.user-info {
  background-color: #0089D1;
  border-right: solid 5px #FFBCB8;
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: center;
  flex-grow: 1;
  max-width: 300px;
  min-height: 100vh;
  padding-top: 10px;
  padding-bottom: 10px;
}

.profile-pic {
  width: 200px;
  height: 200px;
}

.profile-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  visibility: hidden;
  z-index: 10;
  background-color: white;
  border: solid #FFBCB8 5px;
  border-radius: 10%;
}

.profile-popup-show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 0.5s
}

<div class="profile">
  <div class="user-info">
    <c:set var="un" value="${sessionScope.username}" />
    <img class="profile-pic" src="Default images/Default PFP.png" alt="Profile Picture" onclick="ShowPopup(PFPpopudID)">
    <h1>${un}</h1>
    <div class="user-desc">
      ${userDAO.getUserDescription(un)}
    </div>
  </div>
  <span id="PFP-select" class="profile-popup">
    Popup
  </span>
</div>

In Github,
when showing projects in the board styles,
someone’s action comes to another user’s board before refreshing a page.

It appears the website does not open the websocket,
how do they achieve this synchronization?

I read javascript files but couldnt reach where they implement the system.

I am working on a book management system, and I am using the Google Books API to fetch book cover images. However, even though I am correctly fetching the data from the API, the book cover images are not being displayed on the page.

I tried to use the imageLinks.thumbnail field from the API response to load the cover image, but it’s not appearing on the page. Instead, it either shows a broken image or doesn’t display anything at all.

API URL Example:

const url = `https://www.googleapis.com/books/v1/volumes?q=isbn:${isbn13}`;

AOU Resoibse Example :

{
  "items": [
    {
      "volumeInfo": {
        "imageLinks": {
          "thumbnail": "http://books.google.com/books/content?id=LTs6MwAACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api"
        }
      }
    }
  ]
}

But the image doesn’t load as expected.

I used the following code to fetch and display the cover image:

let coverUrl = data.items[0].volumeInfo.imageLinks.thumbnail;

I expected the book cover to be displayed using this URL, but the image either doesn’t load or gives an error like “There was an error processing this image.” I’ve also tried validating the image URL by checking it directly in the browser, and it works fine, but it doesn’t work in my app.

I would like to know how to properly display book cover images using Google Books API, and why the image might not be loading in my app.

I’ve hit a roadblock with parallel processing of async methods. Specifically, in the following code, I’m waiting for each chat’s promise to resolve sequentially, which ends up being slow:

for (const member of response.chatMembers) {
  const chat: ChatsDto = member.chat;
  if (!chat.isGroup) {
    const secondUser = chat.chatMembers[0]?.user;
    if (!secondUser) throw new NotFoundException('Other user not found');
    chat.isOnline = await this.utilGateway.isUserOnline(secondUser.id);
  }
}

I’ve tried using Promise.all, but I can’t assign chat.isOnline without awaiting the isUserOnline function. As a result, Promise.all doesn’t seem to help in this case:

const chats = await Promise.all(
  t2.map(async (member) => {
    const chat: ChatsDto = member.chat;
    if (!chat.isGroup) {
      const secondUser = chat.chatMembers[0]?.user;
      if (!secondUser) throw new NotFoundException('Other user not found');
      chat.isOnline = await this.utilGateway.isUserOnline(secondUser.id);
    }
  })
);

I couldn’t find any solutions online, so I’d appreciate any advice from more experienced JS developers.