Category: javascript

I need to know how to convert a 2d plan of a room design into 3d so for example the user creates a 2d room layout such as creating basics room and adding walls then converts into 3d and then adds furniture .

i did not understand

I’m trying to build a simple banking website using vanilla TypeScript, HTML, and CSS, for now, then later add in the plaid API to test its operations. I’m currently testing the project structure locally using Live Server in Visual Studio Code.

My project structure looks like this:

front-end/
├── dist/
│   ├── main.js
│   ├── login/
│   │   └── login.js
│   ├── dashboard/
│   │   └── dashboard.js
│   └── utils/
│       └── app.js
├── public/
│   ├── index.html
│   ├── login.html
│   └── dashboard.html
├── src/
│   ├── login/
│   │   └── login.ts
│   ├── dashboard/
│   │   └── dashboard.ts
│   └── utils/
│       └── app.ts
└── style/
    └── styles.css

I encountering an NS_ERROR_CORRUPTED_CONTENT error when trying to load the app.js file in the dashboard.js module.

Here’s the error message from the console:

GET http://127.0.0.1:5500/front-end/dist/utils/app NS_ERROR_CORRUPTED_CONTENT

• The MIME type is incorrectly being set to text/html instead of application/javascript.
• All paths are correct, and I can Ctrl + Click to navigate to the modules within VS Code.
• I already cleared the cache, restarted the server, and rebuilt my TypeScript files using tsc.

.

The Dashboard Code:

Here’s the relevant code in dashboard.js and app.js:

dashboard.js:

import { fetchBalance, updateBalanceDisplay } from '../utils/app';

export default async function initDashboard() {
    const balance = await fetchBalance();
    updateBalanceDisplay(balance);
}

app.js

export function fetchBalance() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(1250.50);
        }, 1000); // Simulate a network delay
    });
}

export function updateBalanceDisplay(balance: number) {
    const balanceElement = document.getElementById('balance');
    if (balanceElement) {
        balanceElement.textContent = `$${balance.toFixed(2)}`;
    }
}

main.js (routing)

function handleRouting() {
    const path = window.location.pathname;
    if (path.includes('login.html')) {
        import('./login/login').then(module => {
            module.default();
        });
    } else if (path.includes('dashboard.html')) {
        import('./dashboard/dashboard').then(module => {
            module.default();
        }).catch(error => {
            console.error("Error loading dashboard module:", error);
        });
    }
}
handleRouting();

Question:

Why is the app.js file being served with a text/HTML MIME type, and how can I fix the NS_ERROR_CORRUPTED_CONTENT in my setup?

I’ve Tried:

Verified the file paths and ensured they're correct relative to the dist folder.
Cleared browser cache and hard-reloaded the page.
Disabled caching in Live Server settings in VS Code.
Tried loading the app.js file directly in the browser, but it still results in the same error

I expect it to atleast display the number that’s on the fetch balance function!!

I have constructed a singleton class as an external state management solution for my ReactJS app. My issue is that the function parameters inside components do not get updated.

export class ProductSearchStore {
    private static instance: ProductSearchStore;
    searchTerm: string = "";
    subscribers: Set<() => void> = new Set();

    private constructor() {}

    public static getInstance(): ProductSearchStore {
        if (!ProductSearchStore.instance) {
            ProductSearchStore.instance = new ProductSearchStore();
        }
        return ProductSearchStore.instance;
    }

    public subscribe = (cb: () => void): (() => void) => {
        this.subscribers.add(cb);
        return () => {
            this.subscribers.delete(cb);
        };
    };

    public set = (value: Partial<ProductSearchStore>): void => {
        this.searchTerm = value.searchTerm ?? this.searchTerm;
        this.subscribers.forEach((cb) => cb());
    };

    public get = (): string => {
        return this.searchTerm;
    };
}

export function useProductSearchStore(): [string, (term: string) => void] {
    const productSearchStore = useRef<ProductSearchStore>(ProductSearchStore.getInstance());
    const [searchTerm, setSearchTerm] = useState<string>("");

    function updateSearchTerm(): void {
        productSearchStore.current.set({ searchTerm: term });
    }

    useEffect(() => {
        const unsubscribe = productSearchStore.current.subscribe(() => {
            setSearchTerm(productSearchStore.current!.get());
        });

        return () => {
            unsubscribe();
        };
    }, []);

    return [searchTerm, updateSearchTerm];
}

Here is the implementation inside a React component:

const [searchTerm, setSearchTerm] = useProductSearchStore();

function updateSearchTerm(term: string) {
    console.log("searchTerm", searchTerm);
}

useEffect(() => {
    console.log("searchTerm", searchTerm);

}, [searchTerm]);

The useEffect function outputs the latest searchTerm correctly but the updateSearchTerm function is not it always returns an empty string.

I need to write a term paper but I have been struggling to find an idea.
It’s about “CMS: A comparison and adjustment options:
Investigating the use of Rust to create WebAssembly modules, integrate them into existing web projects, and perform performance analysis.”

I appricate every help.

I kinda know that some things are much more faster with Rust and WebAssembly as with Javascript but there are also some situations javascript do better. I am also not so quite sure what it means about existing web projects. So feel free to write what you understand and have in mind.

Thank you!!

How can I effectively manage multiple asynchronous data fetch requests in JavaScript using the Fetch API? I want to create an array of fetch requests, each returning a promise, and ensure that all results are processed before proceeding. What’s the best approach to achieve this while also handling potential errors in a clean way? Additionally, I would like to know how to handle timeouts and retries for the fetch requests.

o handle multiple asynchronous data fetch requests in JavaScript using the Fetch APi

I want to crossfade several text quotes (coming from a CMS) having various lengths within a container div of a specific width. This is what I came up with, but it’s 2024 and I feel like there has to be an easier way to do this, either using only CSS or not having to resort to using onResize. What I’m doing is looping through all the quotes twice: one for display and the other for size calculation – determining the “tallest” quote and setting the parent div to that height.

I don’t want to resort to importing a gallery/carousel library or js framework as a dependency for something that seems so simple. Just wondering if anyone has any ideas on simplifying this. Thanks!

I have a vuejs application and where I can dynamically add rows with some input fields (langugeId, type and name). Those are required fields. I am using vue-tiny-validate for validation library.

My idea is that every time I add/remove a line I regenerate the number of rules.
When I click the save button the function got called, the $test() function executes, but the $invalid valid property is always false. Putting breakpoint in every rule test function, the code never hit them (it should!).

  const createAttachmentRules = (attachments) => {
    const rules = {};
    attachments?.forEach((attachment, index) => {
      rules[index] = {
        type: {
          name: 'required',
          test: value => Number(value) >= 0,
          message: props.translation('Validation.Required')
        },
        languageId: {
          name: 'required',
          test: value => Number(value) >= 0,
          message: props.translation('Validation.Required')
        },
        name: {
          name: 'required',
          test: value => !!value,
          message: props.translation('Validation.Required')
        }
      };
    });

    return reactive(rules);
  };
 
  const attachmentRules = createAttachmentRules();
  const { result } = useValidate(state.attachments, attachmentRules, validationOptions);

 watch(() => state.attachments, (updatedAttachment) => {
    Object.assign(result, createAttachmentRules(updatedAttachment));
  });

const onSaveAsync = async (moveToNextTab = false) => {
    await result.value.$test();
    if (result.value.$invalid) {
      return;
    }   
  }

thnx

I have a JavaScript slideshow that displays images of various dimensions in a browser window. It uses object-fit: scale-down to resize the image to fit the container. I’d like to add a border to the image, but when I apply the style border: 2px solid black to the <img> element, it seems to surround what would be the image in its original, unscaled size.

Is there a way, either with CSS or with JavaScript, to apply the border to the resized image?

const duration = 2000; // time (msec) to display each slide
const sizes = [
  [4000, 500],
  [1000, 4000],
  [600, 400],
  [100, 200]
];
const sleep = ms => new Promise(r => setTimeout(r, ms));
let size_index = 0;

function show_slides(duration) {
  let this_duration = duration;
  const my_parent = document.querySelector('#slide-div');
  if (size_index == sizes.length) {
    size_index = 0;
  }
  let w = sizes[size_index][0];
  let h = sizes[size_index][1];
  ++size_index;

  let my_randomizer = `https://placehold.co/${w}x${h}?text=${w}+x+${h}npx`;
  fetch(my_randomizer)
    .then(my_response => my_response.blob())
    .then(my_blob => {
      let my_url = URL.createObjectURL(my_blob);
      sleep(this_duration)
        .then(() => {
          URL.revokeObjectURL(my_parent.querySelector('img').src);
          my_parent.querySelector('img').src = my_url;
          show_slides(duration);
        });
    })
    .catch(my_error => console.error('Error: ', my_error));
}

html {
  height: 100%;
  width: 100%;
}

body {
  /* prevent body from displacing */
  margin: 0;
  /* body should perfectly superimpose the html */
  height: 100%;
  width: 100%;
}

.outer-div {
  display: flex;
  flex-flow: column;
  height: 100%;
  /* Now create left/right margins */
  margin: 0 0.5em;
}

.inner-fixed-div {
  margin-top: 0.5em;
}

.inner-remaining-div {
  margin-bottom: 1em;
  flex-grow: 1;
  /* hints the contents to not overflow */
  overflow: hidden;
}

.picture-div {
  /* force the div to fill the available space */
  width: 100%;
  height: 100%;
}

.picture-div-img {
  /* force the image to stay true to its proportions */
  width: 100%;
  height: 100%;
  /* and force it to behave like needed */
  object-fit: scale-down;
  object-position: center;
  /* does not properly enclose image: */
  border: 2px solid black;
}

<!DOCTYPE html>
<html lang="en">
<!-- Self-contained slideshow demo -->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body onload="show_slides(duration);">
  <div class="outer-div">
    <div class="inner-fixed-div">
      <h1>Lorem Epsom</h1>
    </div>
    <div class="inner-remaining-div">
      <!-- This div will hold the <img> -->
      <div id="slide-div" class="picture-div">
        <!-- Placeholder <img> element for slides -->
        <img class="picture-div-img">
      </div>
    </div>
    <!-- end of inner-remaining-div -->
  </div>
  <!-- end of outer-div -->
</body>

</html>

I have a simple CSS keyframes animation (from https://codepen.io/hopefulcodegirl/pen/WNwmOQX) – I was wondering if there is a way to stop the animation at a specific keyframe (this would be based on data I get from backend) – so that the progress bar stops at some give percentage. The only way I can think of is generating CSS files on first website render with different keyframes defined inside, depending on the target percent value. But this hardly seems like an efficient method. Is my only option to just redo the animation in JS?

.color-container {
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  animation: background_load 5s infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  width: 50%;
  /*margin: 280px auto;*/
  /*padding: 20px 40px;*/
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
}

.Loading {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 10px;
  background: #f1f1f1;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
  border-radius: 4px;
  overflow: hidden;
}

.Loading:after {
  content: '';
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  animation: load 5s forwards;
}

@keyframes load {
0.0% {
 width: 0.0%;
 background: #94e02d;
}
2.04% {
 width: 2.04%;
 background: #96e02c;
}
4.08% {
 width: 4.08%;
 background: #98e12b;
}
6.12% {
 width: 6.12%;
 background: #9ae12a;
}
8.16% {
 width: 8.16%;
 background: #9ce229;
}
10.2% {
 width: 10.2%;
 background: #9ee328;
}
12.24% {
 width: 12.24%;
 background: #a1e327;
}
14.29% {
 width: 14.29%;
 background: #a3e426;
}
16.33% {
 width: 16.33%;
 background: #a5e525;
}
18.37% {
 width: 18.37%;
 background: #a7e524;
}
20.41% {
 width: 20.41%;
 background: #a9e623;
}
22.45% {
 width: 22.45%;
 background: #ace622;
}
24.49% {
 width: 24.49%;
 background: #aee721;
}
26.53% {
 width: 26.53%;
 background: #b0e821;
}
28.57% {
 width: 28.57%;
 background: #b2e820;
}
30.61% {
 width: 30.61%;
 background: #b4e91f;
}
32.65% {
 width: 32.65%;
 background: #b6ea1e;
}
34.69% {
 width: 34.69%;
 background: #b9ea1d;
}
36.73% {
 width: 36.73%;
 background: #bbeb1c;
}
38.78% {
 width: 38.78%;
 background: #bdec1b;
}
40.82% {
 width: 40.82%;
 background: #bfec1a;
}
42.86% {
 width: 42.86%;
 background: #c1ed19;
}
44.9% {
 width: 44.9%;
 background: #c4ed18;
}
46.94% {
 width: 46.94%;
 background: #c6ee17;
}
48.98% {
 width: 48.98%;
 background: #c8ef16;
}
51.02% {
 width: 51.02%;
 background: #caef16;
}
53.06% {
 width: 53.06%;
 background: #ccf015;
}
55.1% {
 width: 55.1%;
 background: #cef114;
}
57.14% {
 width: 57.14%;
 background: #d1f113;
}
59.18% {
 width: 59.18%;
 background: #d3f212;
}
61.22% {
 width: 61.22%;
 background: #d5f211;
}
63.27% {
 width: 63.27%;
 background: #d7f310;
}
65.31% {
 width: 65.31%;
 background: #d9f40f;
}
67.35% {
 width: 67.35%;
 background: #dcf40e;
}
69.39% {
 width: 69.39%;
 background: #def50d;
}
71.43% {
 width: 71.43%;
 background: #e0f60c;
}
73.47% {
 width: 73.47%;
 background: #e2f60b;
}
75.51% {
 width: 75.51%;
 background: #e4f70b;
}
77.55% {
 width: 77.55%;
 background: #e6f80a;
}
79.59% {
 width: 79.59%;
 background: #e9f809;
}
81.63% {
 width: 81.63%;
 background: #ebf908;
}
83.67% {
 width: 83.67%;
 background: #edf907;
}
85.71% {
 width: 85.71%;
 background: #effa06;
}
87.76% {
 width: 87.76%;
 background: #f1fb05;
}
89.8% {
 width: 89.8%;
 background: #f4fb04;
}
91.84% {
 width: 91.84%;
 background: #f6fc03;
}
93.88% {
 width: 93.88%;
 background: #f8fd02;
}
95.92% {
 width: 95.92%;
 background: #fafd01;
}
97.96% {
 width: 97.96%;
 background: #fcfe00;
}
100.0% {
 width: 100.0%;
 background: #ffff00;
}
}

        <div class="color-container">
          <div class="container">
            <div class="Loading"></div>
          </div>
        </div>

So, I have a single page that has a lot of content and animation that I set up to run in only one html file. It is a exposition of museum online.
But I want to call (and generate) a specific url for some steps of this page. For example, there’s a place called ARQUIVO (Archive) that I want to give the url for user:

https://indisciplinar.com.br/?arquivo

And for that, it should call a global function that goes for a step in animation that it’s already set as callArquivo().

This callArquivo() is defined in functions.js and it is already called in html.

After all this calls, I have a script tag:

const loader = document.getElementById('preloader')
window.addEventListener('load', onload)

function onload(){
  document.getElementById('buttonStart').style.display = 'block'
  document.getElementById('loadingText').style.display = 'none'
}

function start(){
  console.log('started')
  callArquivo()
  loader.style.display="none"
  returnScroll()
  setTimeout(goScroll(50),1000)
}


if(window.location.search.split('?')[1] == 'arquivo'){
    start()
} else { console.log('notArquivo') }

When I call in address bar https://indisciplinar.com.br/?arquivo,
I got in console
the first step of console.log(‘started’), but it stucks in second step callArquivo().
The response is that “callArquivo() is not defined at start (?arquivo:1184:13)”

I don’t know if it is something to do with github pages, I think it’s not, because, it won’t work locally neither.

ChatGPT suggested me some stuff like add “index.html” before in url as: https://indisciplinar.com.br/index.html?arquivo
But it’s still not working. I got the same response of Uncaught ReferenceError.

I don’t know what exactly should I do or even what to study or search to solve this issue.
Could I have some answer?

Sorry my English. I’m not good speaker.

I just want to have an option to have custom url parameters to call functions that they were set up in functions.js file.

I have created a script that seperates my geojson feature collection into 3 groups with the TimeDimension plugin and it appears to work correctly until i try to add custom icons to each group. Then the part of the code that does the icon change gets ignored and default icons are being loaded

icon

var icon1 = L.icon({
    iconUrl: 'img/icon1.png',
    iconSize: [47, 69],
    iconAnchor: [23.5, 69],
    popupAnchor: [0, -69]
});

function

function onEachFeature(feature, layer) {
  console.log('Feature before pointToLayer:', feature); // Debugging line
  var group = feature.properties.group.toLowerCase();

  console.log('Feature Group:', group); // Debugging line
  console.log('Feature Properties:', feature.properties); // Debugging line

  if (group === 'group1') {
    group1LayerGroup.addLayer(layer);
  } else if (group === 'group2') {
    group2LayerGroup.addLayer(layer);
  } else if (group === 'group3') {
    group3LayerGroup.addLayer(layer);
  } else {
    group1LayerGroup.addLayer(layer);
  }
}
console.log(
  'GeoJSON Data before pointToLayer:',
  JSON.stringify(geojsonData, null, 2),
);
console.log('icon:', icon1);
L.geoJSON(geojsonData, {
  onEachFeature: onEachFeature,
  pointToLayer: function (feature, latlng) {
    console.log('Feature in pointToLayer:', feature); // Debugging line
    console.log('LatLng in pointToLayer:', latlng); // Debugging line

    if (feature.properties.hasOwnProperty('last')) {
      console.log('Creating Marker with Icon-group1'); // Debugging line
      return new L.Marker(latlng, {
        icon: icon1,
      });
    }

    console.log('Creating CircleMarker'); // Debugging line
    return L.circleMarker(latlng);
  },
}).addTo(map); // Ensure the geoJSON layer is added to the map
console.log('After L.geoJSON creation');

All logs appear to be give proper data or at least i think they do. The markers, the groups and the timeline work properly on the loaded page but i don’t get any console logor any errors from anything within pointToLayer.

I tried to see the examples from the timeDimension but none of them have geojson source with groups and custom icons. I tried to isolate the layers and on one point managed to see the popups that not working either being shown in some part of the path of the markers.

I think it’s a problem of either sequence of function utilization or simply something is messing with the icons along the way. Since the rest of the functionality is working i presume that my geojson structure is proper and since i get no warning or error that my structure is correct.

Any ideas?

having code

 public function ajaxCallback(array &$form, FormStateInterface $form_state)
  {
      $response = new AjaxResponse();
      $response->addCommand(new InvokeCommand('document', 'sendMessage', ['test']));
      return $response;
  }

js code

(function ($, Drupal, drupalSettings) {

  $(document).ready(function(){

    $(document).bind('sendMessage', function(msg) {
      alert('MY_EVENT');
    });

  });

})(jQuery, Drupal, drupalSettings);

whan i call ajax function having error
Ajax: TypeError: $element[response.method] is not a function

why it does not working?
how can i call js function from drupal ajax?

const p1 = new Promise((_, reject) => {
  reject(1);  
}).then((r)=>console.log(r)).catch((r)=>console.log(r)); 

const p2 = new Promise((resolve, _) => {
  resolve(10);  
}).then((r)=>console.log(r)).catch((r)=>console.log(r));

// output -> 10, 1

Shouldn’t the output be 1, 10.Because the catch block of p1 is added to the microtask queue before then block of p2?
Below example gives expected output of 1,10

const p1 = new Promise((_, reject) => {
  reject(1);  
}).catch((r)=>console.log(r))

const p2 = new Promise((resolve, _) => {
  resolve(10);  
}).then((r)=>console.log(r)).catch((r)=>console.log(r));

I’m building queries in node, I need a javascript version of the postgres function quote_ident. Is there one readily available, from some package I can include?

I’m working on a browser extension. In Chrome, I can simply do this:

manifest.json:

"background": {
        "service_worker": "scripts/vh_service_worker.js",
},

and in my service worker, I can use ìmportScript("somefile.js") without issues.

In Firefox, background.service_worker is not implemented for Manifest v3.

Attempt #1:
I load the service worker as background script:

manifest.json:

"background": {
        "scripts": ["scripts/vh_service_worker.js"]
    },

This generally works well, but unfortunately it does not seem to be executed in the WorkerGlobalScope, so the function importScripts() is not available.

Attempt #2:
I tried to use the background script to register a service worker manually:

manifest.json:

"background": {
        "scripts": ["scripts/vh_service_worker_loader.js"]
    },

vh_service_worker_loader.js:

if ("serviceWorker" in navigator) {
    navigator.serviceWorker
        .register("scripts/vh_service_worker.js")
        .then((registration) => {
            console.log("Service Worker registered with scope:", registration.scope);
        })
        .catch((error) => {
            console.error("Service Worker registration failed:", error);
        });
}

But unfortunately there is no navigator.serviceWorker entry available, so the if condition always return false.

So my question is:
How can I use importScripts() in Firefox for an extension using Manifest V3 ?