Category: javascript

I am currently trying to build a website using leaflet that allows the dragging of image overlays. I feel so close to getting it right, but for some reason, whenever I zoom in or out the image returns to its original position. I have tried a lot, but whatever I do seems to make it worse at this point lol. Here is the JS code I currently have:

// Function to convert kilometers to latitude/longitude changes
function kilometersToLatLon(kilometers, latitude) {
    var latChange = kilometers / 111.0;
    var lonChange = kilometers / (111.0 * Math.cos(latitude * Math.PI / 180));
    return { latChange: latChange, lonChange: lonChange };
}

// Define the center coordinates (Charleston, SC)
var centerLat = 32.7765;
var centerLon = -79.9311;

// Define image width and height in kilometers
var widthInKilometers = 9.1070;
var heightInKilometers = 8.6625;

// Convert kilometers to latitude and longitude changes
var latLonWidth = kilometersToLatLon(widthInKilometers, centerLat);
var latLonHeight = kilometersToLatLon(heightInKilometers, centerLat);

// Calculate top-left and bottom-right coordinates based on width and height
var topLeftLat = centerLat - latLonHeight.latChange / 2;
var topLeftLon = centerLon - latLonWidth.lonChange / 2;
var bottomRightLat = centerLat + latLonHeight.latChange / 2;
var bottomRightLon = centerLon + latLonWidth.lonChange / 2;

// Path to the image hosted on your local server (Live Server)
var imageUrl = 'http://127.0.0.1:5500/Images/overlay.png';

// Add the image overlay
var imageOverlay = L.imageOverlay(imageUrl, [[topLeftLat, topLeftLon], [bottomRightLat, bottomRightLon]], {
    opacity: 0.8,
    interactive: true
}).addTo(map);

// Make the ImageOverlay draggable
let imgElement = imageOverlay.getElement();
let draggable = new L.Draggable(imgElement);

// Enable the draggable functionality
draggable.enable();

// Initialize draggable and set the image overlay position relative to the map
draggable.on('dragstart', () => {
    map.scrollWheelZoom.disable();  // Disable zoom on the map
});

// Re-enable zoom on the map when dragging ends
draggable.on('dragend', () => {
    map.scrollWheelZoom.enable();   // Re-enable zoom on the map
});

// Update the overlay bounds as it is dragged
draggable.on('drag', () => {
    const imgPos = L.DomUtil.getPosition(imgElement);
    const topLeft = map.containerPointToLatLng(imgPos);
    const bottomRight = map.containerPointToLatLng({
            x: imgPos.x + imgElement.offsetWidth,
            y: imgPos.y + imgElement.offsetHeight,
    });

    imageOverlay.setBounds([topLeft, bottomRight]);
});

// Remove the draggable instance on map move and re-create it
map.on('moveend', () => {
    // Disable the current draggable instance
    draggable.disable();

    // Recreate the draggable instance after map move ends
    draggable = new L.Draggable(imgElement);
    draggable.enable(); // Re-enable dragging functionality
});

I have tried a lot of stuff for hours that awlays makes the code messy. Often times, I manage to prevent the issue, but by creating a bigger issue where, if I click on the image to drag it, it gets offset from the mouse corresponding to the offset between my original and current camera position.

So I’m currently trying to make a simple page that will send a request with a button. I’m struggling with getting the server to host the index.html without any issue at all. I have two issues which occur.

If I use slightly working server code, the console will log a problem with the request sending code in the client. Any other server code doesn’t work and gives me undefined errors.

I found out that when I use the live server VSCode extension, it works properly in generating the request but I cant actually have the request send to the server since the server code isn’t actually running due to the extension. If I try to use my own server with node server.js, the code will only work with a very specific server code that I wrote earlier that doesn’t work properly and gives me some errors.

Here is the index.html code thats responsible for calling the Javascript to send the request:

<button id="sendOfferButton">Send Offer</button>
<p id="status">Status: Waiting for interaction...</p>
<script src="script.js"></script>

Below is the server.js code which will allow the html to work, but gives me an issue where the script.js doesn’t work and gives me this console error:

Uncaught SyntaxError: Unexpected token ‘<‘

which I tested and found out is related to this line:

<script src=script.js></script> 

Meaning it doesn’t seem to be able to access the request generation code.

This is what I have in server.js:

const http2 = require('http2');
const fs = require('fs');
const path = require('path');

const options = {
    key: fs.readFileSync(path.join(__dirname, 'server.key')),
    cert: fs.readFileSync(path.join(__dirname, 'server.cert'))
};
const server = http2.createSecureServer(options, (req, res) => {
    const filePath = path.join(__dirname, '../client', 'index.html');

    fs.readFile(filePath, 'utf-8', (err, data) => {
        if (err) {
            res.statusCode = 500;
            res.end('Internal Server Error');
            return;
        }

        res.setHeader('Content-Type', 'text/html');
        res.end(data);
    });
});

server.listen(3000, () => {
    console.log('Server running on https://localhost:3000');
});

I have a pretty limited understanding of the http2 process and how it works so I don’t understand why the code I’ve tried won’t allow it to function properly. My best guess is the way I’m currently trying to implement the server is using strictly a static approach and cant do any updates with the script.js after its been loaded?

I’m not particularly sure how to make sure my server can function properly. I already verified that the client works properly and now my problem is just with just figuring out how to correctly get the server to host.

They have bad SEO, and I was just brought in. My recommendation immediately was to remove all JavaScript, WordPress, and other frameworks/plugins/widgets and write a new thing entirely in simple HTML & CSS.

What I’m thinking is a simple content editor [on a subdomain or even offline] for the nontechnical author to use for CRUDing pages and posts, and a handful of simple HTML templates that can be interpolated from the database.

Then ahead-of-time (AoT) thousands of HTML pages are to be generated with folders indicating hierarchy.

This seems like classic 1990s advice I’m giving. Is this correct advice?

I am trying to pass a specific route as a prop for a button component in my application.

import React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import { useRouter } from "expo-router";

// Define a type for the props
type MyComponentProps = {
  text: string;
  route: string;
};

const ContinueButton: React.FC<MyComponentProps> = ({ text, route }) => {
    const router = useRouter();
  return (
    <Pressable
                style={({ pressed }) => [
                  styles.button,
                  pressed && styles.buttonPressed,
                ]}
                onPress={() => router.push(route)}
              >
                <Text style={styles.buttonText}>{text}</Text>
        </Pressable>
  );
};

The line onPress={() => router.push(route)} is causing an issue im pretty sure. Before compiling vscode shows the error:

Argument of type ‘string’ is not assignable to parameter of type ‘RelativePathString | ExternalPathString | “/_sitemap” | /_sitemap?${string} | /_sitemap#${string} | “/(starting)” | “/(starting)/error” | /(starting)/error?${string} | /(starting)/error#${string} | … 37 more … | { …; }’.ts(2345)

if I just go ahead and run it, it throws:

TypeError: Cannot read property ‘pathname’ of undefined

Manifest: V3

I initially implemented a sleep function:

async sleep (ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms))
}

Problem: (only) when run from the service worker of my Chrome extension, the delay is random. Sometimes being very close to the ms parameter, sometimes VERY off (ex: ~5000ms instead of 500ms).

I know the timing is never guaranteed, but not only this issue only happens from the service worker (works fine from the content script or the chrome dev console), but also, this started to happen only a few weeks ago (~November 2024), while it was working fine for ~2 years before that, so adding that to the delay difference beeing that huge, I’m suspecting there’s something else going on.

To test things on a more basic levels, I added the following code in the service worker, using setInterval() instead:

self.addEventListener('activate', () => {
  console.log('+++++++++++++ Service Worker activated')
})
var lastHeartbeat = Date.now()
setInterval(() => {
  const now = Date.now()
  console.log(`${now - lastHeartbeat}ms`)
  lastHeartbeat = now
}, 100);

I don’t see any activations (besides the first time I start the Chrome extension) which rules out the possibility that the service worker gets idle/reactivated, but then the delays are just totally random, here’s a random sample:

101ms, 99ms, 2055ms, 100ms, 3511ms, 394ms, 1416ms, 4439ms, 1341ms, 2862ms, 1216ms, 1794ms,
 1885ms, 802ms, 303ms, 405ms, 77ms, 100ms, 367ms, 34ms, 1348ms, 52ms, 99ms

This seems to indicate that there’s something blocking/delaying things in the event loop?

I thought of using chrome.alarms instead, but unfortunately this can only have precision to the second, not less, which doesn’t work for me.

Maybe it’s something that changed after a recent chrome update..

Any ideas?
The only other post that’s vaguely similar is this one, but it unfortunately doesn’t really address the problem, and is 6 years old.

Thanks in advance for your help/ideas!

I got stumped on the attached VBA code trying to pass a javascript string from VBA to Adobe. The javascript “jsobject.app.alert” message executes fine and pops up in Adobe, but the “jsobject.ExecuteJS jsScript” line does not execute and throws error message 438. ChatGPT has got me this far, but I can’t seem to get past this error. I have the latest versions of Excel Pro and Adobe Acrobat DC installed and I have tried on both 32-bit and 64-bit machines. I have tested the jscript string in the Acrobat javascript console and it works fine. Any help would be appreciated. https://imgur.com/a/9lQQNAu

Sub AddTextToPDF()
    Dim acroApp As Object
    Dim acroAVDoc As Object
    Dim acroPDDoc As Object
    Dim jsObject As Object
    Dim pdfPath As String
    Dim jsScript As String
    ' Path to the PDF file
    pdfPath = "E:test.pdf"
    ' Check if the PDF file exists
    If Dir(pdfPath) = "" Then
        MsgBox "PDF file not found: " & pdfPath, vbExclamation, "Error"
        Exit Sub
    End If
    ' Create an Acrobat application object
    On Error Resume Next
    Set acroApp = CreateObject("AcroExch.App")
    Set acroAVDoc = CreateObject("AcroExch.AVDoc")
    On Error GoTo 0
    If acroApp Is Nothing Or acroAVDoc Is Nothing Then
        MsgBox "Adobe Acrobat is not installed or not available.", vbExclamation, "Error"
        Exit Sub
    End If
    ' Open the PDF file
    If acroAVDoc.Open(pdfPath, "") Then
        ' Get the PDDoc object from the AVDoc
        Set acroPDDoc = acroAVDoc.GetPDDoc
        ' Get the JavaScript object
        Set jsObject = acroPDDoc.GetJSObject
        'jsObject.app.alert "JavaScript is enabled and working!"  ' this code is working
        ' JavaScript to add a text annotation
        jsScript = "this.addAnnot({type: 'Text', page: 0, rect: [100, 500, 200, 550], contents: 'Finally, it works!'});"
        ' Execute the JavaScript
        jsObject.ExecuteJS jsScript
        ' Save the changes to the PDF
        acroPDDoc.Save &H1, pdfPath ' &H1 indicates incremental save
        MsgBox "Text annotation added successfully!", vbInformation, "Success"
        ' Close the PDF
        acroAVDoc.Close True
    Else
        MsgBox "Failed to open the PDF file.", vbExclamation, "Error"
    End If
    
    ' Quit Acrobat
    acroApp.Exit
    Set acroPDDoc = Nothing
    Set acroAVDoc = Nothing
    Set acroApp = Nothing
    Set jsObject = Nothing
End Sub

I have the latest versions of Excel Pro and Adobe Acrobat DC installed and I have tried on both 32-bit and 64-bit machines. I have tested the jscript string in the Acrobat javascript console and it works fine. Any help would be appreciated.

I have two components Auth and Main, which represent the Login screen and the Main screen of the app. Both are called by component AuthOrApp, which chooses which one to display based on the user’s state id.

//component AuthOrApp

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { login } from '../store/userSlice';
import { addShops } from '../store/shopsSlice';
import Auth from '../screens/Auth';
import Main from '../navigators/Main';
import { getData } from '../common';

export default props => {
    const [start, setStart] = useState(true);
    const dispatch = useDispatch();
    const user = useSelector(state => state.user);

    const fetchData = async () => {
        if (!user.id) {
            const userData = await getData();
            if (userData.id) {
                dispatch(addShops(userData.filterShops));
                dispatch(login({ name: userData.name, id: userData.id }));
            } else {
                setStart(false);
            }
        } else {
            setStart(false);
        }
    }

    useEffect(() => {
        fetchData();
    }, [user])

    return (!user.id) ? <Auth /> : <Main />;
}

When logging out, the user state id is cleared and the app returns to the login screen. The problem is that it mounts the Auth and Main component again.

I don’t understand why it reassembles the components instead of just rendering. Could someone explain it to me? How do I stop it from mounting again?

Button click event does not work in javascript. I have a div with a box id. When I try to assign an onclick to each button, only the last button works properly, the other buttons do not work.

Also, this is a simplified version of my code to explain. I should definitely use innerHTML in the original code. But as long as I’m using innerHTML, the code doesn’t work

also here is my html code:

id = (x) => {
  return document.getElementById(x)
};

let box = id('box')

btn = (text, func) => {
  var button = document.createElement('button');
  button.innerHTML = text;
  button.onclick = func;
  box.appendChild(button)
}

render = () => {

  for (let i = 0; i < 5; i++) {
    box.innerHTML += '</br>'
    btn('btn ' + i, () => {
      console.log(1)
    })
  }

}

render()

<!-- Project -->
<div id="box"></div>

How do we manage the behaviour of useParams
How it triggers in before or after useEffect

import react,{useEffect} from 'react'
import {useParams} from 'react-router-dom'

export default Slip(){
  const {slug} = useParams()
  useEffect(() => {
    // In my application role of slug is very important for application behaviour 
    const fetchdata = async () => {
      const getd = await axios.post('backend.com',{slug})
      // Here slug needs to be loaded completely without it application can't behave properly 
    }
  },[])
}

My company is working on a banking project where we take slug from parameter which is very important to get loaded to delete the transaction

So is there any way for asynchronous Behaviour of useParams or **when parameters are loaded then only code will execute **

Here is a a demo application code to show images in a carousel. It works well with static images. But I want to add images to the carousel dynamically on a button click.

I added images on a button click, and it adds it in the container, which I can see if I debug the page using the browser’s Developer Tools. But the image is not shown in the carousel.

Reference CodePen link

document.addEventListener("DOMContentLoaded", function() {
  let carousel = document.querySelector(".carousel");
  let items = carousel.querySelectorAll(".item");

  // Function to show a specific item
  function showItem(index) {
    items.forEach((item, idx) => {
      item.classList.remove("active");
      if (idx === index) {
        item.classList.add("active");
      }
    });
  }

  // Event listeners for buttons
  document.querySelector(".prev").addEventListener("click", () => {
    let index = [...items].findIndex((item) =>
      item.classList.contains("active")
    );
    showItem((index - 1 + items.length) % items.length);
  });

  document.querySelector(".next").addEventListener("click", () => {
    let index = [...items].findIndex((item) =>
      item.classList.contains("active")
    );
    showItem((index + 1) % items.length);
  });
});

//I tried the following function:
function buttonClicked() {
  const carouselContainer = document.querySelector('.carousel');

  // Create the carousel item
  const carouselItemContainer = document.createElement('div');
  carouselItemContainer.classList.add('item');

  // Create image element
  const imageElement = document.createElement('img');
  imageElement.src = "image URL";
  imageElement.alt = "test image";
  imageElement.classList.add("active");

  // Add a title below the image
  const imageTitle = document.createElement('p');
  imageTitle.textContent = "title of test image";
  imageTitle.classList.add('caption');

  carouselItemContainer.appendChild(imageElement);
  carouselItemContainer.appendChild(imageTitle);
  carouselContainer.appendChild(carouselItemContainer);
}

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  font-family: "Satoshi", sans-serif;
  font-size: var(--lx-text-01);
  font-weight: 500;
  color: #ffffe6;
  background-color: #10100e;
}

.carousel-container {
  width: 80%;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--lx-gap);

  .carousel {
    aspect-ratio: 16/9;
    width: 100%;
    position: relative;
    overflow: hidden;

    .item {
      opacity: 0;
      width: 100%;
      height: 100%;
      display: none;
      transition: opacity 0.5s ease-in-out;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .caption {
        width: 100%;
        padding: var(--lx-space-01);
        position: absolute;
        bottom: 0;
        text-transform: uppercase;
        text-align: center;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.5);
      }

      &.active {
        opacity: 1;
        display: block;
      }
    }
  }

  .btn {
    padding: 1em 2em;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    outline: none;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    color: #10100e;
    background-color: #ffffe6;
    transition: transform 0.2s ease-in-out;

    &:active,
    &:focus {
      transform: translateY(-50%) scale(0.9);
    }

    &:hover {
      transform: translateY(-50%) scale(0.96);
    }
  }

  .prev {
    left: -5%;
  }

  .next {
    right: -5%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Image Slider</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />

  <link rel="stylesheet" href="style - copy.css" />
  <script src="script - copy.js"></script>
</head>

<body>
  <main class="carousel-container">
  <div class="carousel">
    <div class="item active">
      <img src="https://images.unsplash.com/photo-1457732815361-daa98277e9c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Image 1" />
      <p class="caption">Caption for Image 1</p>
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1500206329404-5057e0aefa48?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1355&amp;q=80" alt="Image 2" />
      <p class="caption">Caption for Image 2</p>
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80" alt="Image 3" />
      <p class="caption">Caption for Image 3</p>
    </div>
  </div>
  <button class="btn prev">Prev</button>
  <button class="btn next">Next</button>
  <div class="dots"></div>
</main>
</body>

</html>

It adds the image to the carousel container but the image is not displayed in the carousel

Can anyone please help me with this problem?

How can I create an axis helper like the below image at the top left corner and in the middle. When I use axesHelper, the line doesnot have an arrow at the end and it is also thin. Below is the code I used.

// Create and add axis helpers
const axesHelper = new THREE.AxesHelper(10); // Adjust length as needed
scene.add(axesHelper);

The output is like below,

and I need the axis helper at the left corner as well. What I want is like the below image.

Looking for the best way, whether it be a npm package or some kind of algorithm that would most efficiently search a 40mb+ size JSON file for several matching keys. For example let’s say the JSON file has

{ name: "Test", age: 23, record_id: 2352352 }

and I would want to search the 20k+ objects in the JSON file for a match on any 2 of the 3 keys and values. I have to do this within a AWS Lambda function, so speed to cut down operation costs is ideal. What would be the best way to do this?

I have looked into past answers here on stack overflow but a large portion of them involved libraries that are no longer online. I considered a straight up for loop, but I can’t imagine that is anywheres remotely efficient.

Thank you for your help!

Cheers!

I am developping a Django Projekt and I want to display my backend loggings to the forntend. Thats why i created a central logging Handler that pushes logs into a buffer. Every 20 sec my frontend sends a request to flush the buffer and display the log events.

Central Loging Class (log.py):

import logging

class BufferedLogHandler(logging.Handler):
    def __init__(self):
        super().__init__()
        self.log_buffer = []  # Lokaler Puffer für Logs

    def emit(self, record):
        log_entry = self.format(record)  # Format den Log-Eintrag
        self.log_buffer.append(log_entry)
    
    def create_external_log(self, level=None, timestamp=None, message=None):
        asctime = timestamp
        msg = message
        record = logging.LogRecord(
                        level=level,   
                        msg=msg, 
                        asctime=asctime,
                        lineno=0,
                        exc_info=None,
                        args=None,
                        name= None,
                        pathname="frontend",
                    )
        self.emit(record=record)
        return BufferedLogHandler.create_empty_response()

    def flush_buffer(self):
        logs_to_send = self.log_buffer[:]
        print(f'logs_to_send:{logs_to_send}')
        print("---------------------")
        self.log_buffer = []
        return logs_to_send
    
    @staticmethod
    def create_empty_response():
        response = {'message':""}
        return response
    
buffered_handler = BufferedLogHandler()


def setup_logger(bufferedHandler):
    # Den Logger holen (Root-Logger oder benannten Logger)
    logger = logging.getLogger()  # Du kannst auch den Root-Logger verwenden

    # Setze das Log-Level (z.B. DEBUG, INFO)
    logger.setLevel(logging.DEBUG)

    # Erstelle einen Handler (z.B. für Konsole oder Datei)
    file_handler = logging.FileHandler('myapp.log')  # Für eine Log-Datei

    # Erstelle ein Format für die Log-Nachrichten
    formatter = logging.Formatter('%(asctime)s - %(levelname)s - %(filename)s - %(lineno)d - %(message)s')

    # Setze das Format für beide Handler
    bufferedHandler.setFormatter(formatter)
    file_handler.setFormatter(formatter)

    # Füge beide Handler dem Logger hinzu
    logger.addHandler(buffered_handler)
    logger.addHandler(file_handler)

    return logger

My first main class is the manage.py:

from mypath import log
logger = log.setup_logger(log.buffered_handler)
...
logger.info("Logs have been sent to the frontend.")

My second main class is the generate_pictures.py (management/commands/generate_picutres.py)

from another_relative_path import log
logger = log.setup_logger(log.buffered_handler)
...
logger.info("Picture has been created!")

I cannot seem to get both main files to interact with the same buffer in the logging.handler object. When checking the IDs of each imported object log.buffered_handler they dont match.

What have I missed? How can i access the same buffer from both files?

Good evening.

I’ve been trying to implement a button that uses a SVG path to define his shape and the subsequent animation on Hover.

I’ve created the animation and it works perfectly on the svg but my issue is how to mask the button with the path I created, I tried using clip-path and webkit-mask without succeding.

This is my starting svg:

<svg class="btnMain_svg" stroke-width="1" width="100%" height="100%" viewBox="0 0 50 50" id="svg-draw" >
    <path class="btnMain_path" 
      d="M28.306250000000002,6.300625 L28.306250000000002,6.300625 Q49.1875,6.300625,49.1875,27.181874999999998 L49.1875,23.005625000000006 Q49.1875,43.886875,28.306250000000002,43.886875 L21.881249999999998,43.886875 Q1,43.886875,1,23.005625000000002 L1,27.181875 Q1,6.300625,21.881249999999998,6.300625 Z">
    </path>
  </svg>

Is it possible to make the svg responsive based on the button below? I’m still new to the front-end world and i’m surely overlooking something, probably something with the viewBox.
I’ve put everything in a codepen if someone wants to look at it and give me some tips

https://codepen.io/DavidMartinez76/pen/PwYJGMm

Thank in advance to anyone who replies!!

Nodejs provides the following function to generate UUID:
crypto.randomUUID([options])

This package of Nodejs uses number as a seed for Mersenne Twister algorithm:
https://www.npmjs.com/package/mersenne-twister

How do I use UUID as a seed here when it accepts only a number?
What are my options?