Category: javascript

I have a wsdl file which has reference to multiple xsd files in nested folder system .
I want to parse it and show on the ui with react js library

I tried few libraries with node but it hits actual backend and doesn’t give parsed evelope

Different modals not opening on my website.

I copied one of the above responses (Manjunath Prabhakar) into an empty php file. This works perfectly. All 3 buttons open a different modal but when I incorporate the exact code into my website the only modal button that works is id=myBtn. What reasons would prevent the other modals from opening?

I’m making a guilded bot and this error appears each time I’m running it. Here’s what Node.JS prints out:

node:internal/modules/cjs/loader:452
      throw err;
      ^

Error: Cannot find module 'C:UsersasusDesktopAppsCodingsPROJECTSGUILDED BOTindex.js'. Please verify that the package.json has a valid "main" entry
    at tryPackage (node:internal/modules/cjs/loader:444:19)
    at Module._findPath (node:internal/modules/cjs/loader:715:18)
    at resolveMainPath (node:internal/modules/run_main:26:23)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:24)
    at node:internal/main/run_main_module:28:49 {
  code: 'MODULE_NOT_FOUND',
  path: 'C:\Users\asus\Desktop\Apps\Codings\PROJECTS\GUILDED BOT\package.json',
  requestPath: 'C:\Users\asus\Desktop\Apps\Codings\PROJECTS\GUILDED BOT'
}

Node.js v20.11.1

I tried the steps from this link to fix it but to no avail: https://www.freecodecamp.org/news/error-cannot-find-module-node-npm-error-solved/

Using Intl object in js, I can get localized country names with iso code. That’s great, but I need also region names and continents; like Europe, South Asia, Northern Afrika etc.

All this regions have UN M49 codes that are supposed to supported in Intl object, but they are not or maybe I’m doing something wrong. Some codes work, and some don’t. So I’m confused.

Is there a way to check all available region names in Intl?

Or does enyone know an alternative to get localized region and continent names by code?

const regions = new Intl.DisplayNames(['en'], { type: 'region' })

console.log(regions.of('150'))
console.log(regions.of('419'))

I would expect code ‘150’ to log Europe – because that’s the code for Europe – but it doesn’t. While for example, if I try ‘419’, it logs Latin America, as it should.

In our project we do a lot of

expect(await screen.findByText('sample text')).toBeInTheDocument()

expect(await screen.findByTestId('sample test id')).toBeInTheDocument()

And recently an argument was made that we can do this instead

await screen.findByText('sample text')

await screen.findByTestId('sample test id')

because if there is no element found the test will fail anyway. We also found a small and possibly inconsistent and irrelevant improvement of run speed of a test with this change

My question is: will our tests be faster and more resource efficient if we remove all those expect calls wherever possible?

I might have backed myself into a corner with this one, but I am creating an image carousel in svelte.

I want the carousel to work with horizontal scroll, and I want the image in the center to be wrapped with a different tag than the others.

so I’ve created this

    <div class="aspect-square overflow-hidden w-[520px] place-self-center">
        <div
            id="image-container"
            class="relative flex overflow-x-scroll snap-x snap-mandatory"
            style="scrollbar-width: none;"
            on:scrollend={(e) => {
                console.log("no longer scrolling", e);
                activeImage.set(distinctImages[Math.floor(e.target.scrollLeft / 520)])
            }}
        >
            {#each distinctImages as image}
                {#if image === $activeImage}
                    <FocusedHero {image} />
                {:else}
                    <Hero {image} />
                {/if}
            {/each}
        </div>
    </div>

It is a bit hacky, and I have the problem with it triggering scrollend whenever the content is being updated (which it is on scrollend, causing an infinite loop).

So is there any smarter way of doing this that works, and that keeps the requirement of having the “centered” image be of a different component?

I’m currently working implementing AES encryption in the backend using Python, but I’m encountering some issues in ensuring compatibility between frontend and backedn. I need help in integrating the frontend JavaScript code to work with it.

My backend Python code:

class Crypt():
    def pad(self, data):
        BLOCK_SIZE = 16
        length = BLOCK_SIZE - (len(data) % BLOCK_SIZE)
        return data + (chr(length)*length)

    def unpad(self, data):
        return data[:-(data[-1] if type(data[-1]) == int else ord(data[-1]))]

    def bytes_to_key(self, data, salt, output=48):
        assert len(salt) == 8, len(salt)
        data += salt
        key = sha256(data).digest()
        final_key = key
        while len(final_key) < output:
            key = sha256(key + data).digest()
            final_key += key
        return final_key[:output]

    def bytes_to_key_md5(self, data, salt, output=48):
        assert len(salt) == 8, len(salt)
        data += salt
        key = md5(data).digest()
        final_key = key
        while len(final_key) < output:
            key = md5(key + data).digest()
            final_key += key
        return final_key[:output]

    def encrypt(self, message):
        passphrase = "<secret passpharse value>".encode()
        salt = Random.new().read(8)
        key_iv = self.bytes_to_key_md5(passphrase, salt, 32+16)
        key = key_iv[:32]
        iv = key_iv[32:]
        aes = AES.new(key, AES.MODE_CBC, iv)
        return base64.b64encode(b"Salted__" + salt + aes.encrypt(self.pad(message).encode()))

    def decrypt(self, encrypted):
        passphrase ="<secret passpharse value>".encode()
        encrypted = base64.b64decode(encrypted)
        assert encrypted[0:8] == b"Salted__"
        salt = encrypted[8:16]
        key_iv = self.bytes_to_key_md5(passphrase, salt, 32+16)
        key = key_iv[:32]
        iv = key_iv[32:]
        aes = AES.new(key, AES.MODE_CBC, iv)
        return self.unpad(aes.decrypt(encrypted[16:])).decode().strip('"')
    
    def base64_decoding(self, encoded):
        base64decode = base64.b64decode(encoded)
        return base64decode.decode()
    
crypt = Crypt()

test = "secret message to be send over network"

encrypted_message = crypt.encrypt(test)
print("Encryp msg:", encrypted_message)
decrypted_message = crypt.decrypt(encrypted_message)
print("Decryp:", decrypted_message)

here’s what I’ve tried so far on the frontend with React and CryptoJS:

    import React from "react";
import CryptoJS from 'crypto-js';

const DecryptEncrypt = () => {
    function bytesToKey(passphrase, salt, output = 48) {
        if (salt.length !== 8) {
            throw new Error('Salt must be 8 characters long.');
        }

        let data = CryptoJS.enc.Latin1.parse(passphrase + salt);
        let key = CryptoJS.SHA256(data).toString(CryptoJS.enc.Latin1);
        let finalKey = key;

        while (finalKey.length < output) {
            data = CryptoJS.enc.Latin1.parse(key + passphrase + salt);
            key = CryptoJS.SHA256(data).toString(CryptoJS.enc.Latin1);
            finalKey += key;
        }

        return finalKey.slice(0, output);
    }

    const decryptData = (encryptedData, key) => {
        const decodedEncryptedData = atob(encryptedData);
        const salt = CryptoJS.enc.Hex.parse(decodedEncryptedData.substring(8, 16));
        const ciphertext = CryptoJS.enc.Hex.parse(decodedEncryptedData.substring(16));
        const keyIv = bytesToKey(key, salt.toString(), 32 + 16);
        const keyBytes = CryptoJS.enc.Hex.parse(keyIv.substring(0, 32));
        const iv = CryptoJS.enc.Hex.parse(keyIv.substring(32));

        const decrypted = CryptoJS.AES.decrypt(
            { ciphertext: ciphertext },
            keyBytes,
            { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }
        );

        
        return decrypted.toString(CryptoJS.enc.Utf8);
    };

    const encryptData = (data, key) => {
        const salt = CryptoJS.lib.WordArray.random(8); // Generate random salt
        const keyIv = bytesToKey(key, salt.toString(), 32 + 16);
        const keyBytes = CryptoJS.enc.Hex.parse(keyIv.substring(0, 32));
        const iv = CryptoJS.enc.Hex.parse(keyIv.substring(32));

        const encrypted = CryptoJS.AES.encrypt(data, keyBytes, {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });

        const ciphertext = encrypted.ciphertext.toString(CryptoJS.enc.Hex);
        const saltedCiphertext = "Salted__" + salt.toString(CryptoJS.enc.Hex) + ciphertext;

        return btoa(saltedCiphertext);
    };

    const dataToEncrypt = 'Data to be sent over network';
    const encryptionKey = "<secret passpharse value>";

    const encryptedData = encryptData(dataToEncrypt, encryptionKey);
    console.log("Encrypted data:", encryptedData);

    const decryptedData = decryptData(encryptedData, encryptionKey);
    console.log("Decrypted data:", decryptedData);

    return (<>
        Check
    </>);
}

export default DecryptEncrypt;

I’m encountering some issues in ensuring compatibility between frontend and backedn. Specifically, I’m struggling with properly deriving the key and IV, and encrypting/decrypting the data in a way that matches the backend implementation. Getting error as below when i try to send encrypted text to backend where it throws following error while decrypting,

packagesCryptoCipher_mode_cbc.py", line 246, in decrypt
    raise ValueError("Data must be padded to %d byte boundary in CBC mode" % self.block_size)
ValueError: Data must be padded to 16 byte boundary in CBC mode

I m bit new to implementating AES in a fullstack app, so learning and trying but still stuck with this issue. Could someone who has encountered similar issue or implemented encryption/decryption in JavaScript offer some guidance or suggestions on how to modify my frontend code to achieve compatibility with the backend? Any insights, corrections, or alternative approaches would be very helpful.

i have a user profile modal in my next app where its data and the user can change it by typing in inputs. The problem is that old data doesn’t overwrites in modal when i open it or close but in my db it changes. I can get new data only after page refresh.

How i render it:

  <>
    {children}
    <LogOut />
    <Profile />
  </>

Modal:

export const Profile = () => {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const profileModal = searchParams.get("profileModal");

  const { currentUser } = useGetCurrentUser(); // get data from a custom hook

  return (
   ...
  );
};

Hello testing comunity i would like to ask if some one achieved to start there electron app maximized or minimized because i have tried everything by adding arguments for starting maximize when building the app and by using selenium driver.menage().window().maximize(). Is there any other solution?

The expectation was to maximize or minimize the desktop electron app.

I’m trying to import this lib and I get the following error:

/Users/alexs/Documents/projects/xml-controller-test/dist/app.controller.js:20
const map_obj_1 = require("map-obj");
                  ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/alexs/Documents/projects/xml-controller-test/node_modules/map-obj/index.js from /Users/alexs/Documents/projects/xml-controller-test/dist/app.controller.js not supported.
Instead change the require of index.js in /Users/alexs/Documents/projects/xml-controller-test/dist/app.controller.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/alexs/Documents/projects/xml-controller-test/dist/app.controller.js:20:19)

I wouldn’t like to make any significant changes in my package.json that would the project. Though, I tried adding “type”: “module” to package.json, it didn’t help.

ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/alexs/Documents/projects/xml-controller-test/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

The way I do it:

import mapObject, { mapObjectSkip } from 'map-obj';

I have a basic nestjs package.json and tsconfig.json files.
Is there any way to import this library in a TS project?

I’m trying to make an Angular site that can search for data based on a number of input fields. When I run the site locally using ng serve it works fine, but when I compile it with ng build and host the resulting files using a Docker container, it throws the error Cannot read properties of undefined (reading '3') in the console and fails to properly load the site.

Commenting out the two buttons at the bottom of the HTML template seems to make the error go away, and the page loads properly (apart from lacking buttons) so I’m thinking the problem might be something to do with the (click) event binding. Any idea how I can fix this?

The typescript file, search.component.ts:

import { Component } from '@angular/core';
import { SearchEntry } from '../student.service';
import { StudentService } from '../student.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrl: './search.component.css'
})
export class SearchComponent {
  constructor(private studentService: StudentService) {}
  searchParams: SearchEntry = {
    lifetimeID: '', uni: '', pid: '', lastName: '', firstName: '', gradYear: '',
    status: '', entryTerm: '', termNumber: '', program: '', cluster: ''
  };
  searchResults: SearchEntry[] = [];

  searchStudents(params: SearchEntry): void {
    const resultObs = this.studentService.searchStudents(params);
    resultObs.subscribe(results => this.searchResults = results);
  }

  clearFields(): void {
    this.searchParams = {
      lifetimeID: '', uni: '', pid: '', lastName: '', firstName: '', gradYear: '',
      status: '', entryTerm: '', termNumber: '', program: '', cluster: ''
    };
  }
}

The HTML template, search.component.html:

<div class="wrapper">
    <h4>Search for Entries</h4>
    <input [(ngModel)]="searchParams.lifetimeID" placeholder="Lifetime ID"><br>
    <input [(ngModel)]="searchParams.uni" placeholder="UNI"><br>
    <input [(ngModel)]="searchParams.pid" placeholder="PID"><br>
    <input [(ngModel)]="searchParams.lastName" placeholder="Last Name"><br>
    <input [(ngModel)]="searchParams.firstName" placeholder="First Name"><br>
    <input [(ngModel)]="searchParams.gradYear" placeholder="Grad Year"><br>
    <input [(ngModel)]="searchParams.status" placeholder="Status"><br>
    <input [(ngModel)]="searchParams.entryTerm" placeholder="Entry Term"><br>
    <input [(ngModel)]="searchParams.cluster" placeholder="Cluster"><br>
    <input [(ngModel)]="searchParams.program" placeholder="Program"><br>
    <input [(ngModel)]="searchParams.termNumber" placeholder="Term Number"><br>
    <button type="button" (click)="searchStudents(searchParams)">Search</button>
    <button type="button" (click)="clearFields()">Clear</button><br>
</div>

<app-student-list [results]="searchResults"></app-student-list>

The app-student-list component referenced on the last line of the HTML template appears to work fine on its own, so I didn’t include the code for it.

Is there a typescript/react-based library for creating form with logical and/or fields? User should be able to dynamically add fields and set a logical relation (AND/OR/NOT) between them.

Thank you for any input.

I need to implement PWA for a project in Yii 2 framework in php. I have added the manifest.json file which is working as I checked in devtools. Also I added a service-worker file that registered successfull upon loading the browser. But the popup to install the app is not triggering in any device. I am stuck and need help.

sw.js

var staticCacheName = 'pwa-v' + new Date().getTime()

var filesToCache = [
        'css/bootstrap.css',
        'css/select2.min.css',
        'css/select2-bootstrap.css',
        'css/anno.css',
        'css/jquery.mThumbnailScroller.css',
        'css/jquery-ui.css',
        'css/bootstrap-theme.css',
        'css/fm.selectator.jquery.css',
        'css/lightgallery.min.css',
        'css/magnific-popup.css',
        'css/jquery.mCustomScrollbar.css',
        'css/bootstrap-datetimepicker.css',
        'css/croppie.css',
        'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css',
        'css/developer.css',
        'css/empwin.css?v=2.37',
    'js/bootstrap.js?v=0.01',
        'js/fm.selectator.jquery.js?v=0.01',
        'js/lightgallery-all.min.js?v=0.01',
        'js/jquery.magnific-popup.min.js?v=0.01',
        'js/jquery.mThumbnailScroller.js?v=0.01',
        'js/moment.js?v=0.01',
        'js/bootstrap-datetimepicker.min.js?v=0.01',
        'js/highlight.min.js?v=0.01',
        'js/jquery-ui.js?v=0.01',
        'js/bootstrap-transition.js?v=0.01',
        'js/jquery.geocomplete.min.js?v=0.01',
        'js/croppie.js?v=0.01',
        'js/webcam.js?v=0.01',
        'js/anchorme.min.js?v=0.01',
        'js/anno.js?v=0.01',
        'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',
        'js/jquery.ui.core.min.js?v=0.01',
        'js/jquery.ui.timepicker.js?v=0.01',
        'js/jquery.pinBox.min.js?v=0.01',
        'js/propeller.min.js?v=0.01',
        'js/select2.full.js?v=0.01',
        'js/video.js?v=0.01',
        'js/jquery.mCustomScrollbar.concat.min.js?v=0.01',
        'js/custom.js?v=3.49',
        'js/custom1.js?v=0.02',
        'js/blur.js?v=0.01',
        'js/exif.js?v=0.02',
        'js/browser-deeplink.min.js',



]

// Cache on install
self.addEventListener("install", event => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.addAll(filesToCache);
            })
    )
});

// Clear cache on activate
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(cacheName => (cacheName.startsWith("pwa-")))
                    .filter(cacheName => (cacheName !== staticCacheName))
                    .map(cacheName => caches.delete(cacheName))
            );
        })
    );
});

//Serve from Cache
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
            .catch(() => {
                return caches.match('offline');
            })
    )
});

manifest.json

{
    "theme_color": "#175795",
    "background_color": "#175795",
    "display": "standalone",
    "orientation": "portrait",
    "scope": "xxx",
    "start_url": "xxx",
    "name": "win",
    "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
  
}

I’m currently exploring options for uploading and processing a Potree file using Three.js. I attempted to use the solution provided in the GitHub repository
https://github.com/pnext/three-loader?tab=readme-ov-file)
but unfortunately, it didn’t work out for me.

I was wondering if there is any alternative methods or resources that could help achieve this task? My objective is to enable the viewing of the Potree file directly within a web browser using Three.js. so i can process it……..

I am creating invoices on Xero but a couple of times (maybe 3 or 4 in about 1000 calls) i get the error: TypeError: Converting circular structure to JSON.

NOTE – the invoice is still being created

Here’s the code where im getting the error:

    const invoices = {
      invoices: [invoice],
    };

    let invoiceData: { body: Invoices } | undefined;
    try {
      invoiceData = await this.xero?.accountingApi.createInvoices(
        this.getTenantId(),
        invoices,
        true,
        4,
      );
    } catch (error: any) {
      const errors = error?.response?.body?.Elements?.[0]?.ValidationErrors;
      throw errors;
    }

    const invoiceNumber = invoiceData?.body?.invoices?.[0]?.invoiceNumber;