Category: javascript

I am tying to group objects by a specific property from an array object without using reduce method. Is it possible? If it is possible how to do it?

const arr = [
  { name: 'Alice', age: 21 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 21 },
  { name: 'David', age: 25 },
  { name: 'Eve', age: 30 }
];

Output should be like below:

console.log(arr);

// {
//   '21': [{ name: 'Alice', age: 21 }, { name: 'Charlie', age: 21 }],
//   '25': [{ name: 'Bob', age: 25 }, { name: 'David', age: 25 }],
//   '30': [{ name: 'Eve', age: 30 }]
// }

I’m using React Hook Form (RHF) for form handling and Yup for validation in my React app. I have a dynamic list of rows, each containing an Autocomplete component from Material-UI (MUI), along with other form fields. The goal is to validate and track each row’s input.

Issue:
When I change the value of an Autocomplete dropdown in one of the rows, I use the watch() function from RHF to check if the selected option has already been used elsewhere in the form. This is done to prevent selecting a duplicate option in any of the rows.

While this approach works correctly, I’m encountering performance issues when the watch() function is active. Specifically, when I change a dropdown value, the form becomes very slow, and other inputs start lagging significantly. This issue doesn’t occur until I change the Autocomplete value, and once the dropdown value is updated, the form’s responsiveness suffers.

What I’m trying to achieve:
I need to track the value of the Autocomplete dropdown and check for duplicates across rows using watch().

At the same time, I want the form to remain fast and responsive, even when the dropdown values are updated.

Here’s a simplified version of my code:

<Controller
  control={control}
  name={`goals.${index}.${GoalInputs.TERRITORY}`}
  render={({ field: { onChange, ...field } }) => {
    const findTerritory = territoryOptions?.find(({ value }) => value === field?.value);
    return (
      <SingleSelect
        {...field}
        fullWidth
        options={territoryOptions}
        value={findTerritory || null}
        onValueChange={(_, value) => {
          const goals = watch('goals') as GoalValues[];
          const isExist = goals?.find(({ territory }: any) => territory === value?.value);
          if (isExist) {
            showError({ message: 'This territory is already selected' });
            onChange('');
          } else {
            onChange(value?.value);
          }
        }}
        error={!!error?.[GoalInputs.TERRITORY]}
        helperText={error?.[GoalInputs.TERRITORY]?.message as string}
        sx={{ minWidth: 200 }}
      />
    );
  }}
/>

I have tried ChatGPT to solve the issue, but it didn’t work.
Also, I have tried to use the getValues function, but it was also having the same problems.

Trying to integrate React Hook Form and Zod in a react native project by applying validation rules using Zod to a signup form, but when I press the button, Zod isn’t triggered to show any errors, even if the input fields are empty

const signUpSchema = z.object({
  firstName: z
    .string({ message: 'First name is required' })
    .min(2, { message: 'First name must be longer than 2 characters' }),
  lastName: z
    .string({ message: 'Last name is required' })
    .min(2, { message: 'Last name must be longer than 2 characters' }),
  mobileNom: z.string({ message: 'Mobile number is required' }),
  email: z.string({ message: 'Email is required' }),
  password: z
    .string({ message: 'Password is required' })
    .min(8, { message: 'Password must be longer than 8 characters' }),
});

const AuthForm = ({
  headerText,
  navLinkText,
  submitBtnText,
  onSubmit,
  routeName,
  error,
}) => {
  const [permissionResponse, requestPermission] = MediaLibrary.usePermissions();
  const [image, setImage] = useState();

  // START
  const form = useForm({
    resolver: zodResolver(signUpSchema),
    defaultValues: {
      firstName: '',
      lastName: '',
      mobileNom: '',
      email: '',
      password: '',
    },
  });

  // END

  async function handleUpload() {
    if (permissionResponse.status !== 'granted') {
      await requestPermission();
    }

    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images', 'videos'],
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  }

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={{ flex: 1 }}
    >
      <SafeAreaView edges={['bottom']}>
        <ScrollView
          contentContainerStyle={styles.container}
          keyboardShouldPersistTaps="handled"
        >
          <FormProvider {...form}>
            <Text style={styles.text}>{headerText}</Text>
            <Text style={styles.note}>
              * Please note that every field must be filled.
            </Text>
            {routeName == 'login' && (
              <>
                <View style={styles.name}>
                  <CustomTextInput
                    containerStyle={{ flex: 1 }}
                    placeholder="First Name"
                    name="firstName"
                  />
                  <CustomTextInput
                    containerStyle={{ flex: 1 }}
                    placeholder="Last Name"
                    name="lastName"
                  />
                </View>
                <CustomTextInput
                  autoCapitalize="none"
                  autoCorrect={false}
                  placeholder="Mobile Number"
                  inputMode="numeric"
                  name="mobileNom"
                />
              </>
            )}
            <CustomTextInput
              autoCapitalize="none"
              autoCorrect={false}
              placeholder="Email"
              inputMode="email"
              name="email"
            />
            <CustomTextInput
              autoCapitalize="none"
              autoCorrect={false}
              secureTextEntry
              placeholder="Password"
              name="password"
            />
            {routeName === 'login' && (
              <CustomTextInput
                autoCapitalize="none"
                autoCorrect={false}
                secureTextEntry
                placeholder="Confirm Password"
                name="confirmPassword"
              />
            )}
            {routeName == 'login' && (
              <Pressable style={styles.upload} onPress={handleUpload}>
                <Feather name="upload" style={styles.icon} />
                <Text style={styles.uploadText}>Upload your syndicate id</Text>
              </Pressable>
            )}

            {routeName == 'signup' && (
              <Pressable onPress={() => {}}>
                <Text style={styles.note}>Forgot your password?</Text>
              </Pressable>
            )}
            <Pressable style={styles.btn} onPress={form.handleSubmit(onSubmit)}>
              <Text style={styles.btnText}>{submitBtnText}</Text>
            </Pressable>
            <Link style={styles.btnSecondary} href={routeName}>
              {navLinkText}
            </Link>
          </FormProvider>
        </ScrollView>
      </SafeAreaView>
    </KeyboardAvoidingView>

and this is the code for each input field

const CustomTextInput = ({ containerStyle, name, ...textInputProps }) => {
  const {
    field: { value, onChange, onBlur },
    fieldState: { error },
  } = useController({ name });


  return (
    <View style={[styles.field, containerStyle]}>
      <TextInput
        {...textInputProps}
        style={[styles.input, error ? styles.errorInput : {}]}
        value={value}
        onChangeText={onChange}
        onBlur={onBlur}
      />
      <Text style={styles.error} numberOfLines={1}>
        {error?.message}
      </Text>
    </View>
  );
};

Zod rules never show up on the screen or in the console

I got a .css file linked to my HTML file.
And somewhere, as a basis to my question, I got this:

<div class="input_container">

Later on, with javascript, I can add a .error to activate some class changes.

inputControl.classList.add('error');

Changing the class="input_container" to <div class="input_container.error">

Perfect.
But now when I enter this page through a diffrent direction, I want/need PHP to add this .error aswell.

And the following (simplified) does to work.

$style = "input_container";

<div class=<? echo """.$style."""; ?>>

I’m using Chart.js in a Vue 3 application. I have this thing just about wrapped up with how I want it. However, there is this small white gap before the start of the graph as it is drawn that I cannot seem to get rid off. There is no gap at the end of the chart when I inspect it. I’d like to be able to get rid of it as it throws of the centering of the chart in its container. Worse case I’ll negative pad it but that feels hacky.

Thanks in advance for any insight on how to remove this.

Here is the configuration options I’m using so far

const options = computed(() => ({
  indexAxis: "y",
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: { display: false },
    tooltip: { enabled: false },
    datalabels: { display: false },
  },
  scales: {
    x: {
      stacked: true,
      min: 0,
      max: total.value,
      beginAtZero: true,
      grid: { display: false, drawBorder: false },
      ticks: { display: false },
      border: { display: false },
      barPercentage: 1.0,
      categoryPercentage: 1.0,
    },
    y: {
      stacked: true,
      beginAtZero: true,
      grid: { display: false, drawBorder: false },
      ticks: { display: false },
      border: { display: false },
      barPercentage: 1.0,
      categoryPercentage: 1.0,
    },
  },
  animation: {
    duration: 800,
    easing: "easeOutQuart",
  },
  layout: {
    padding: 0,
  },
  chartArea: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
}));

And here is the gap that I’m dealing with

This Node.js application uses Express and MySQL to serve book and order data through various API endpoints. The server listens on port 3000 and uses a custom lekerdez function that wraps db.query in a Promise for cleaner async handling. It exposes endpoints like /vegpont, /vegpont2, /tipusok, /regenyek, and /magyarul, each running different SQL queries to retrieve information such as book counts, categories, titles, and filtered order data. Error handling is included, returning appropriate HTTP 500 responses when SQL queries fail. Static files are served from the public directory.

Does anybody have a frontend solution for this backend?

const express = require('express');
const mysql = require('mysql');

const app = express();
app.use(express.static("public"));

const db = mysql.createConnection({
    host: '',
    user: '',
    database: ''
});

app.listen(3000,() => {
    console.log('A szerver elindult a 3000-es porton...');  
});

function lekerdez(sql) {
    return new Promise((resolve, reject) => { 
      db.query(sql, (err, rows) => {
        if (err) {
          reject(err);
        } else {
          resolve(rows);
        } 
      });
    });
}   

app.get('/vegpont',(req, res) => {   
    const sql1 = `SELECT COUNT(*) AS 'osszes', (COUNT(*) * rg.ar) AS 'osszeg', rg.id, rg.kategoria, rg.magyar, rg.angol, rg.ev, rg.ar
                FROM regeny rg left JOIN rendeles re ON rg.id = re.regenyid GROUP BY rg.id;`;
    lekerdez(sql1)
    .then((adatok)  => {
        res.send(adatok);
    })
    .catch((hiba) => {
        console.log(hiba);
        res.status(500).send(`Hiba történt az adatok lekérdezése során: ${hiba}`);
    });    
});

app.get('/vegpont2',(req, res) => {   
    const sql1 = `SELECT * from rendeles;`;
    lekerdez(sql1)
    .then((adatok)  => {
        res.send(adatok);
    })
    .catch((hiba) => {
        console.log(hiba);
        res.status(500).send(`Hiba történt az adatok lekérdezése során: ${hiba}`);
    });    
});

app.get('/tipusok',(req, res) => {   
    const sql1 = `SELECT kategoria AS 'Főszereplő', COUNT(*) AS 'Regények száma' FROM regeny GROUP BY kategoria;`;
    lekerdez(sql1)
    .then((adatok)  => {
        res.send(adatok);
    })
    .catch((hiba) => {
        console.log(hiba);
        res.status(500).send(`Hiba történt az adatok lekérdezése során: ${hiba}`);
    });    
});

app.get('/regenyek',(req, res) => {   
    const sql1 = `SELECT magyar FROM regeny ORDER BY magyar;`;
    lekerdez(sql1)
    .then((adatok)  => {
        res.send(adatok);
    })
    .catch((hiba) => {
        console.log(hiba);
        res.status(500).send(`Hiba történt az adatok lekérdezése során: ${hiba}`);
    });    
});

app.get('/magyarul',(req, res) => {
    const sql1 = `SELECT re.datum AS 'Dátum', re.darab AS 'Mennyiség' FROM regeny rg left JOIN rendeles re ON rg.id = re.regenyid WHERE rg.magyar = "${req.query.magyar}" AND re.darab > 1 ORDER BY re.datum;`;
    lekerdez(sql1)
    .then((adatok)  => {
        res.send(adatok);
    })
    .catch((hiba) => {
        console.log(hiba);
        res.status(500).send(`Hiba történt az adatok lekérdezése során: ${hiba}`);
    });    
});

Has anyone developed apps using React Native?
While working on a mobile app for a real estate agency, I encountered the following issue:

active objects should appear on the map in yellow — the fill should match the structure of the building, but when zooming in, the buildings are not fully filled.

I’m using the MapLibre map.

How to highlight the active buildings according to their form?

  <ShapeSource
          id="kyiv-buildings-source"
          shape={activeBuildings}
          onPress={handleObjectPress}>
          <FillLayer
            id="active-buildings-2d"
            style={{
              fillColor: '#ffe600', 
              fillOpacity: 0.95,
            }}
          />
          {/* 3D-екструзія */}
          <FillExtrusionLayer
            id="active-buildings-extrusion"
            style={{
              fillExtrusionColor: '#ffe600',
              fillExtrusionOpacity: 1,
              fillExtrusionHeight: [
                'case',
                ['has', 'height'],
                ['to-number', ['get', 'height']],
                ['has', 'building:levels'],
                ['*', ['to-number', ['get', 'building:levels']], 4],
                50,
              ],
              fillExtrusionBase: 0,
            }}
          />
        </ShapeSource>

I have multiple rendered pages inside a div. Each individual page is treated as a block. Initially, I display the first block (div), which fully occupies the initial view. When I scroll down, the second block comes into the user’s view.

In my case, with every scroll action, only the next block should come into view. If the user scrolls again, then only the next div should appear in the view. Since users can scroll quickly, I want to listen to every single scroll event and then move to the next page accordingly.

Here’s what I’ve tried:
Initially, I only have the first two blocks rendered inside the div. When I’m on the first page and the user scrolls down quickly, the view moves only to the next page because only the next page is available. I listen to the scroll event, and at the end of the scroll event, I add the next page.

However, the issue arises when the user tries to scroll again before the previous scroll event has ended. I want to move to the next page in that case, but I don’t have it yet because the end listener hasn’t been called.

My question is: How can I differentiate every scroll movement, i.e., how can I detect every single wheel event separately?

Need a code in pure javascript. Actually, The same scrolling handled in Macbook Calendar. I want same handling in javascript.

I’ve been stuck with problem for the past 2 days. no progress whatsoever.

I tried removing platform. adding platform

gradle version upgrade..

literally everything

I don’t even know what’s causing the issue.

If it’s a plugin issue or a configuration issue or an app icon

these are what i’ve tried:

1. Removed and re-added android platform (cordova platform rm android && cordova platform add android)

2. Deleted .gradle/, build/, node_modules/, platforms/ and reinstalled everything

3. Upgraded Gradle version to 8.11.1 and wrapper distribution to gradle-8.11.1-all.zip

4. Tried running with:

   ./gradlew clean
./gradlew assembleDebug --refresh-dependencies --no-daemon

5. Ensured Android Studio is not in offline mode

6. Downgraded/Upgraded Capacitor plugins

7. Verified res/values/strings.xml — no visible typos or special characters

 FAILURE: Build failed with an exception.
[capacitor]
[capacitor]         * What went wrong:
[capacitor]         Execution failed for task ':app:mergeDebugResources'.
[capacitor]         > A failure occurred while executing com.android.build.gradle.internal.res.ResourceCompilerRunnable
[capacitor]         > Resource compilation failed (Failed to compile values resource file D:AppandroidappbuildintermediatesincrementaldebugmergeDebugResourcesmerged.dirvaluesvalues.xml. Cause: java.nio.file.InvalidPathException: Illegal char <:> at index 38: com.package.app-mergeDebugResources-59:/values/values.xml). Check logs for more details.

follwoing is my package.json 

{
  "name": "app",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "android": "ionic capacitor run android --livereload --external"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.8",
    "@angular/cdk": "^16.2.8",
    "@angular/common": "^16.2.8",
    "@angular/compiler": "^16.2.8",
    "@angular/core": "^16.2.8",
    "@angular/forms": "^16.2.8",
    "@angular/google-maps": "^19.0.4",
    "@angular/material": "^16.2.8",
    "@angular/platform-browser": "^16.2.8",
    "@angular/platform-browser-dynamic": "^16.2.8",
    "@angular/router": "^16.2.8",
    "@awesome-cordova-plugins/android-permissions": "^6.4.0",
    "@awesome-cordova-plugins/barcode-scanner": "^6.4.0",
    "@awesome-cordova-plugins/camera": "^6.14.0",
    "@awesome-cordova-plugins/core": "^6.4.0",
    "@awesome-cordova-plugins/diagnostic": "^6.14.0",
    "@awesome-cordova-plugins/file": "^6.4.0",
    "@awesome-cordova-plugins/flashlight": "^6.4.0",
    "@awesome-cordova-plugins/in-app-browser": "^6.3.0",
    "@awesome-cordova-plugins/in-app-update": "^6.4.0",
    "@awesome-cordova-plugins/launch-navigator": "^6.4.0",
    "@awesome-cordova-plugins/network": "^6.4.0",
    "@awesome-cordova-plugins/ocr": "^6.4.0",
    "@awesome-cordova-plugins/toast": "^6.14.0",
    "@byteowls/capacitor-filesharer": "^6.0.0",
    "@capacitor-community/contacts": "^6.1.1",
    "@capacitor-community/image-to-text": "^7.0.0",
    "@capacitor/android": "^7.2.0",
    "@capacitor/app": "^7.0.0",
    "@capacitor/app-launcher": "^7.0.0",
    "@capacitor/browser": "^7.0.0",
    "@capacitor/camera": "^7.0.0",
    "@capacitor/core": "^7.0.0",
    "@capacitor/device": "^7.0.0",
    "@capacitor/filesystem": "^7.0.0",
    "@capacitor/haptics": "^7.0.0",
    "@capacitor/keyboard": "^7.0.0",
    "@capacitor/network": "^7.0.0",
    "@capacitor/screen-orientation": "^7.0.0",
    "@capacitor/share": "^7.0.0",
    "@capacitor/status-bar": "^7.0.0",
    "@ionic-native/android-fingerprint-auth": "^5.36.0",
    "@ionic-native/android-permissions": "^5.36.0",
    "@ionic-native/app-version": "^5.36.0",
    "@ionic-native/base64-to-gallery": "^5.36.0",
    "@ionic-native/camera": "^5.36.0",
    "@ionic-native/camera-preview": "^5.36.0",
    "@ionic-native/contacts": "^5.36.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/device": "^5.36.0",
    "@ionic-native/file": "^5.36.0",
    "@ionic-native/flashlight": "^5.36.0",
    "@ionic-native/geolocation": "^5.36.0",
    "@ionic-native/http": "^5.36.0",
    "@ionic-native/launch-navigator": "^5.36.0",
    "@ionic-native/location-accuracy": "^5.36.0",
    "@ionic-native/native-geocoder": "^5.36.0",
    "@ionic-native/navigation-bar": "^5.36.0",
    "@ionic-native/network": "^5.36.0",
    "@ionic-native/open-native-settings": "^5.36.0",
    "@ionic-native/photo-library": "^5.36.0",
    "@ionic-native/qr-scanner": "^5.36.0",
    "@ionic-native/screenshot": "^5.36.0",
    "@ionic-native/sms-retriever": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic-native/status-bar": "^5.36.0",
    "@ionic-native/toast": "^5.36.0",
    "@ionic-native/touch-id": "^5.36.0",
    "@ionic-native/video-player": "^5.36.0",
    "@ionic/angular": "^8.3.1",
    "@ionic/cordova-builders": "^10.0.0",
    "@ionic/storage": "^4.0.0",
    "@ionic/storage-angular": "^4.0.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@zxing/browser": "^0.1.4",
    "@zxing/library": "^0.20.0",
    "capacitor-native-biometric": "^4.2.2",
    "capacitor-resources": "^2.0.5",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-file": "^8.1.3",
    "cordova-plugin-statusbar": "^4.0.0",
    "cordova-plugin-x-socialsharing": "^6.0.4",
    "crypto-js": "^4.2.0",
    "easyqrcodejs": "^4.6.1",
    "es6-promise-plugin": "^4.2.2",
    "file-saver": "^2.0.5",
    "html2canvas": "^1.4.1",
    "ionicons": "^7.0.0",
    "jetifier": "^2.0.0",
    "js-sha512": "^0.9.0",
    "jsbarcode": "^3.11.5",
    "jsencrypt": "^3.3.2",
    "localforage-cordovasqlitedriver": "^1.8.0",
    "ng-otp-input": "^1.9.3",
    "rxjs": "^7.8.1",
    "svg-country-flags": "^1.2.10",
    "swiper": "^10.3.1",
    "tslib": "^2.6.2",
    "util": "^0.12.5",
    "zone.js": "~0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.5",
    "@angular-eslint/builder": "^16.2.0",
    "@angular-eslint/eslint-plugin": "^16.2.0",
    "@angular-eslint/eslint-plugin-template": "^16.2.0",
    "@angular-eslint/schematics": "^16.2.0",
    "@angular-eslint/template-parser": "^16.2.0",
    "@angular/cli": "^16.2.5",
    "@angular/compiler-cli": "^16.2.8",
    "@angular/language-service": "^16.2.8",
    "@capacitor/assets": "^3.0.5",
    "@capacitor/cli": "^7.0.0",
    "@ionic/angular-toolkit": "^10.0.0",
    "@types/crypto-js": "^4.2.1",
    "@types/googlemaps": "^3.43.3",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^20.8.10",
    "@typescript-eslint/eslint-plugin": "6.7.5",
    "@typescript-eslint/parser": "6.7.5",
    "autoprefixer": "^10.4.19",
    "cordova-android": "^12.0.1",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-android-fingerprint-auth": "^1.5.0",
    "cordova-plugin-android-permissions": "^1.1.5",
    "cordova-plugin-app-version": "^0.1.14",
    "cordova-plugin-camera": "^8.0.0",
    "cordova-plugin-camera-preview": "^0.12.3",
    "cordova-plugin-device": "2.1.0",
    "cordova-plugin-dialogs": "^2.0.2",
    "cordova-plugin-flashlight": "github:EddyVerbruggen/Flashlight-PhoneGap-Plugin",
    "cordova-plugin-geolocation": "^5.0.0",
    "cordova-plugin-mobile-ocr": "^3.1.3",
    "cordova-plugin-nativegeocoder": "^3.5.1",
    "cordova-plugin-navigationbar": "^1.0.31",
    "cordova-plugin-qrscanner": "^3.0.1",
    "cordova-plugin-request-location-accuracy": "^2.3.0",
    "cordova-plugin-sms-retriever-manager": "^1.0.4",
    "cordova-sqlite-storage": "^6.1.0",
    "cordova.plugins.diagnostic": "^7.1.3",
    "eslint": "^8.51.0",
    "eslint-plugin-import": "2.28.1",
    "eslint-plugin-jsdoc": "46.8.2",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "jasmine-core": "~5.1.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "onesignal-cordova-plugin": "^5.2.7",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3",
    "ts-node": "^10.9.1",
    "typescript": "~5.0.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-sms-retriever-manager": {
        "PLAY_SERVICES_VERSION": "15.0.1"
      },
      "cordova-sqlite-storage": {},
      "cordova-plugin-nativegeocoder": {},
      "cordova-plugin-geolocation": {
        "GPS_REQUIRED": "true"
      },
      "cordova-plugin-navigationbar": {},
      "cordova.plugins.diagnostic": {
        "ANDROIDX_VERSION": "1.0.0",
        "ANDROIDX_APPCOMPAT_VERSION": "1.3.1"
      },
      "uk.co.workingedge.phonegap.plugin.launchnavigator": {
        "GOOGLE_API_KEY_FOR_ANDROID": "xx",
        "OKHTTP_VERSION": "3.12.0"
      },
      "cordova-plugin-youtube-video-player": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-android-fingerprint-auth": {},
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-camera-preview": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-tesseract": {},
      "cordova-plugin-mobile-ocr": {},
      "cordova-plugin-flashlight": {},
      "onesignal-cordova-plugin": {},
      "cordova-plugin-request-location-accuracy": {
        "PLAY_SERVICES_LOCATION_VERSION": "16.+"
      },
      "cordova-plugin-qrscanner": {}
    },
    "platforms": [
      "android"
    ]
  }
}

I’m using Node.js with Express and Puppeteer to generate PDFs from HTML content. The PDF file gets generated and saved, but when I try to open it with a PDF reader, it appears corrupted. When I open the PDF file in a text editor like Notepad, it displays something like this:

0,”189253″:48,”189254″:48,”189255″:48,”189256″:48,”189257″:49,”189258″:56,”189259″:48,”189260″:52,”189261″:54,…

What could be causing this issue? Are there any known breaking changes or common pitfalls after Puppeteer updates that could lead to corrupted PDF output? How can I troubleshoot or fix this problem to correctly generate and save PDFs again?

In “Incident” form there is a field called “AI” with yes and no option if “Yes” is selected , dialog box will open with “Acknowledged” button. If Acknowledged button is clicked the dialog box should close but its not closing.

Using “On change” Client script:

var fullMessage = message + "<br><br><button type='button' onclick='closeDialog()' class='btn btn-primary'>Acknowledge</button>";
    dialog.setBody(fullMessage);

    window.closeDialog = function () {
      dialog.destroy();
    };

    dialog.render();
  }
}

When I click the Acknowledged button the dialog box should close.

Why doesn’t this work?

document.addEventListener("DOMContentLoaded",() => {
    const students = data.map(student => createStudent(student))
    students.forEach(el => document.getElementById("tartalom").appendChild(el))
})

function createStudent(student){    
    const tr = document.createElement("tr")

    const nevTd = document.createElement("td")
    nevTd.textContent = student.nev
    tr.appendChild(nevTd)

    const osztalyTd = document.createElement("td")
    osztalyTd.textContent = student.osztaly
    tr.appendChild(osztalyTd)

    const korTd = document.createElement("td")
    korTd.textContent = student.kor
    tr.appendChild(korTd)

    const torlesTd = document.createElement("td")
    torlesTd.innerHTML = "<button class='btn btn-danger'>Törlés</button>"
    tr.appendChild(torlesTd)

    return tr
}

const data = [
    { "id": 1, "nev": "Kovács Anna", "osztaly": "10.A", "kor": 16 },
    { "id": 2, "nev": "Nagy Péter", "osztaly": "11.B", "kor": 17 },
    { "id": 3, "nev": "Szabó Eszter", "osztaly": "9.C", "kor": 15 },
    { "id": 4, "nev": "Varga Dániel", "osztaly": "12.A", "kor": 18 },
]

<table id='tartalom'></table>

I am trying to create an input field with two buttons one for add and the other for
average in which when a user clicks on the add it will add numbers and the other button will find the average.

Below is the html code

<center>

    <input type="text" id="result">

    <br> <br>

    <button onclick="add_more()">Add</button>

    <button on click="aver()">Add</button>

    

Below is the java script

  <script>

    function add_more(){
        
        // Get user inputs

        var Addon = document.getElementById('result').value

        console.log(Addon)


    }

  </script>

I’m now using throttle to optimize the window’s scroll event, but sometimes I scroll to the top too fast and cannot get the window.scrollY to be 0

  function throttle(fn, delay) {
let timer = null
return function(...args) {
  if(timer == null) {
    timer = setTimeout(() => {
      fn.apply(this, args)
      clearTimeout(timer)
      timer = null
    }, delay)
  }
}
  }

function handleScroll() {
  if(window.innerWidth >= 1024) {
    const currentScroll = window.scrollY
    console.log('currentScroll'+'----------------------------------'+currentScroll)
    if(currentScroll === 0) {
      stickyHeader.style.top = '40px'
      announcementBar.style.top = '0'
      blogHeader.style.top = '100px'
    } else if (currentScroll > lastScroll) {
      blogHeader.style.top = '0px'
      stickyHeader.style.top = '-60px'
      announcementBar.style.top = '-40px'
    } else if (currentScroll < lastScroll) {
      blogHeader.style.top = '60px'
      stickyHeader.style.top = '0px'
    }
    lastScroll = currentScroll;
  }
}
window.addEventListener("scroll", throttle(handleScroll, 250), { passive: true })

I hope when i scroll to the top, I can get the window.scrollY to be 0 while using throttle

I’ve a 3d model for shot glass(glb), which has a named material for populating textures dynamically from JS.

I traverse through the objects in the scene object and when I find the required node/mesh, I do the following to update the texture on the fly from JS.

childMesh.material.map = texture;
childMesh.material.map.flipY = false;
childMesh.material.needsUpdate = true;

When the texture has transparency and also text, the text shows up blurry on the 3d model. The issue is more pronounced in windows for some reason! It is fine if I use the same png image in blender. Below are the screenshots of threejs in windows and mac at a browser resolution of ~1366x610px

Preview in Windows chrome – text is blurry:

Preview in Mac chrome – text is legible but can do better:

Blender:

Original texture with transparency and text:

ThreeJS version: 0.162.0
Chrome version: 136.0.7103.49 (Official Build) (64-bit) (cohort: M131 Rollout)

Here’s where it gets interesting! If the texture doesn’t have transparency, the text is better. The below are the screenshots and the original texture

Windows chrome – little better:

Mac chrome – no issues I guess:

Blender:

Original texture with solid background, no transparency:

Here’s what I’ve tried so far, with no avail:

1. Up the anisotropy using childMesh.material.map = renderer.capabilities.getMaxAnisotropy(); childMesh.material.needsUpdate = true;
2. Changed all possible minFilters and magFilters
3. Using a higher resolution texture to begin with. I tried till ~1720x1300px height but no use
4. antialias is already true while creating WebGLRenderer

I’m sorry, I cannot provide the glb here as it is owned by the client.
The code I’ve is almost similar to Online GLTF Viewer by Don McCurdy