Category: javascript

I have GeoJSON files containing a FeatureCollection using EPSG:27700 and for Maplibre I believe the coordinates need to be specified in EPSG:4326).

What is the best way of either getting Maplibre to handle a GeoJSON layer with EPSG:27700 coordinates or mapping the coordinates from EPSG:27700 to EPSG:4326 ?

I have the following node.js javascript code using aws-sdk/client-s3:

console.log("Begin Program");

const client = getS3Client();
const params = { Bucket: "my_bucket", Key: "my_file" }
const cmd = new GetObjectCommand(params)

try {
 const resp = await client.send(cmd);
 const str = await response.Body.transformToString();
 console.log(str);
} catch (err) {
 console.log(err);
}

console.log("End Program");

When I run this code, 2 out of 20 times, the code would execute the console.log(str) line and I would see the content of the file I download. The rest of the times, I only see “Begin Program”.

I am not sure why the program would behave differently from run to run. Am I using the client.send() wrong therefore await is not allowing the promise returned by client.send() to be fulfilled before proceeding?

Is there a known bug in the AWS S3Client?

I don’t see the console.log(err) executed ever so I don’t think the program crashed with an “exception”.

Thank you for your help in advance!

I have tried different version of the aws-sdk/client-s3 version 3.689 and the latest version. But I get the same error

So why does typescript make visibly hectic javascript code when used enum?
Here is an exaple of me using enum in TS.

enum SeatChoice {
    AISLE,
    WINDOW,
    MIDDLE,
    FOURTH
}

const seat = SeatChoice.AISLE;

and the equivalent javascript code is:

var SeatChoice;
(function (SeatChoice) {
    SeatChoice[SeatChoice["AISLE"] = 0] = "AISLE";
    SeatChoice[SeatChoice["WINDOW"] = 1] = "WINDOW";
    SeatChoice[SeatChoice["MIDDLE"] = 2] = "MIDDLE";
    SeatChoice[SeatChoice["FOURTH"] = 3] = "FOURTH";
})(SeatChoice || (SeatChoice = {}));
var seat = SeatChoice.AISLE;

while if I just replaced enum by const in typescript:

const SeatChoice {
    AISLE,
    WINDOW,
    MIDDLE,
    FOURTH
}

const seat = SeatChoice.AISLE;

its equivalent javascript code becomes much more simpler:

var SeatChoice, _a = void 0, AISLE = _a.AISLE, WINDOW = _a.WINDOW, MIDDLE = _a.MIDDLE, FOURTH = _a.FOURTH;
var seat = SeatChoice.AISLE;

Also I don’t understand the concept of “_a” in above javscript code snipet?

first of all, I’m not very good at English, so I’m using a translator to ask my question. Please understand if my question sounds strange.

I’m implementing Apple SNS login for the web, and at first, I tried using this code:

const clientSecret = jwt.sign(
  {
    iss: process.env.APPLE_TEAM_ID,
    iat: Math.floor(Date.now() / 1000),
    exp: Math.floor(Date.now() / 1000) + 3600,
    aud: `https://appleid.apple.com`,
    sub: process.env.APPLE_CLIENT_ID
  },
  privateKey,
  {
    algorithm: 'ES256',
    keyid: process.env.APPLE_KEY_ID,
  }
);

However, I kept encountering the 'invalid_client' error.

After repeatedly asking ChatGPT for help, I got this code, which I’m currently using:

const clientSecret = jwt.sign({}, privateKey, { 
  algorithm: 'ES256',
  expiresIn: '1h', 
  audience: 'https://appleid.apple.com',
  issuer: `${process.env.APPLE_TEAM_ID}`,
  subject: `${process.env.APPLE_CLIENT_ID}`,
  keyid: `${process.env.APPLE_KEY_ID}`,
});

This version works without errors.

But I just can’t understand the difference between these two codes. Why didn’t the first version work, even though I included the payload values as required…?

const currentDate = Date.now(); // Time stamp
pm.environment.set("currentDate", currentDate);

Body Request

{
    "refTime": {{currentDate}},
}

The Error Result

type: "Error"
name: "JSONError"
message: "Unexpected token 'c' at 11:18
    "refTime": {{currentDate}},
                 ^" 

I just want to do body request with {{currentDate}} as number into my backend.

*(I apologize in advance if I tagged inapplicable or irrelevant language in my post tags.)

I want to know how to populate a div’s content differently, based on which page a visitor came from?

For example:

If a site visitor enters the direct URL mywebsite.com/pageC into their browser, the ‘default’ content loaded into a particular div [id=fruitBasket] is a photo of an apple.

And, If the visitor arrives at pageC from a link on pageA (or any other page except pageB), the same ‘default’ content [a photo of an apple] is loaded into the same div.

However… If the visitor arrives at PageC from a link on PageB, the same div is loaded with a photo of an orange instead.

I’m trying to create a web page for a proof of concept that compares mock data of two personas. I need to know the name of the view/component type to find a library for this PoC.

Something like this:

           John Doe   Jane Doe

Skill name   ++++++ | ++
Skill name       ++ | +++++
Skill name      +++ | +
Skill name       ++ | +++++++
Skill name ++++++++ | +++
Skill name       ++ | +++++
Skill name       ++ | +++++
Skill name       ++ | +++++

Can someone help? Thanks.

I’m trying to set the text color of a button in my react-native app via the TouchableOpacity object. I am using the same code for doing this that I have seen in numerous places on line, but it is generating an error for me. I’m trying to figure out what the correct coding of this has to be.

Here is the app …

import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';

class App extends Component {
  state = {
    count: 0,
  };

  onPress = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          <Text> style={{color: '#FFFFFF'}}>Hippo counter</Text>
        </TouchableOpacity>
        <View>
          <Text>Hippo count: {this.state.count}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DF0000',
    padding: 10,
    marginBottom: 10
  },
});

export default App;

When I run this react-native app, I get the following error:

Render Error

Objects are not valid as a React child (found: object with keys
{color}). If you meant to render a collection of children, use an
array instead.

Given that this same procedure for setting button text color works in a number of examples that I have found on line, I’m wondering what else I might be doing incorrectly which triggers this error in my specific case.

If I remove style={{color: ‘#FFFFFF’}}>, from the “Text” attribute of the “TouchableOpacity” object, then the app runs properly. So what must I do in order to change this text color?

EDIT: removed some small typos in the copied-and-pasted code.

I am trying to make a deck builder where the user can click on a card and it adds the matching Card-frame to a deck list on the side in another container. Is this approach I have below the right direction and a good start, or should I look at a different solution? Right now When I click add, it only will add one of the card frames. Eventually I want to keep track of what cards are in the list and the quantity. I also want to incorporate GSAP to animate the Card-Frame moving to the list container.

<body>
<div class="container">
    <div class="card-image"> <img src="Aeito_Kathari_Prime.jpg" alt=""> <button    onclick="addItem()">ADD!</button></div>
    <div class="card-image"> <img src="Scipius_Kathari_Prime.jpg" alt=""> <button onclick="addItem()">ADD!</button></div>
    <div class="card-frame"> 
        <div class="card" id="box">
            <div class="card-body">
                <h5 class="card-title" id="Cat1"></h5>
                <img src="Aeito_Kathari_Prime-frame.png" alt="">
            </div>
        </div>
        
        <div class="card" id="box">
            <div class="card-body">
                <h5 class="card-title" id="Cat1"></h5>
                <img src="Scipius_Kathari_Prime-frame.png" alt="">
            </div>
        </div>
    </div>
    </div>




    <script>
    function addItem() {   
    const node = document.querySelector(".card-body");
    const clone = node.cloneNode(true);
    document.getElementById("box").appendChild(clone);
    }
</script>
</body>


.container {
display: grid;
grid-template-columns: 250px 250px 300px;
grid-column-gap: 10px;
grid-row-gap: 10px;

}

.card-image {
background-color: rgb(223, 223, 223);
padding: 10px;
border: 2px solid #b60606;
}

.card-frame {
background-color: rgb(204, 204, 204);
padding: 20px;
border: 2px solid #000000;
object-fit: cover;
}

.card-image img {
background-color: #b60606;
padding: 10px;
border: 2px solid #ddd;
height: 300px;
}

.card-frame img{
height: 50px;
padding: 0px 0px 20px 0px;
}

.card-body img {
height: 50px;
padding: 0px 0px 10px 0px;
}

In an array of objects I am trying to add year of death to a person without it by using the reduce method.
For example the result should be:

{
name: "Carly",
yearOfBirth: 2018,
},

{
name: 'Carly',
yearOfBirth: 2018,
yearOfDeath: 2025
}

I am new at coding and want to know why using the variable instead of ‘person.yearOfDeath’ would cause the code to not function properly?

accum.push(passed = currentYear)

accum.push(person.yearOfDeath = currentYear)

const people = [
      {
        name: "Carly",
        yearOfBirth: 2018,
      },
      {
        name: "Ray",
        yearOfBirth: 1962,
        yearOfDeath: 2011,
      },
      {
        name: "Jane",
        yearOfBirth: 1912,
        yearOfDeath: 1941,
      },
    ]
    
    const newArray = people.reduce((accum, person) => {
      accum = []
        accum.push(person)
      
      let passed = person.yearOfDeath
      const currentYear = new Date().getFullYear();
      if (!passed) {
        accum.push(passed = currentYear)

console.log(accum)
      }
}, {})

const people = [
      {
        name: "Carly",
        yearOfBirth: 2018,
      },
      {
        name: "Ray",
        yearOfBirth: 1962,
        yearOfDeath: 2011,
      },
      {
        name: "Jane",
        yearOfBirth: 1912,
        yearOfDeath: 1941,
      },
    ]
    
    const newArray = people.reduce((accum, person) => {
      accum = []
        accum.push(person)
      
      const passed = person.yearOfDeath
      const currentYear = new Date().getFullYear();
      if (!passed) {
        accum.push(person.yearOfDeath = currentYear)

console.log(accum)
      }
}, {})

I have an image upload feature where users can :

1. Select multiple images
2. Choose one as the main image, which moves to the first position
3. Reorder images before submission

However, I noticed that the display order updates correctly, the <input type="file" multiple/> still submitting the images in their original order(order their were selected).

How can I update the file input so that the images are submitted in the same order they are displayed or ordered?

I know the FileList is read-only, but is there a way to reorder the files before form submission?

I recently upgraded my device from a MacBook Pro 2019 (Intel i7) to a MacBook Air M2. Previously, when I was using the MacBook Pro 2019, my project was running perfectly without any issues. However, after switching to the MacBook Air M2 and trying to run the project, I encountered this issue.

I have been struggling with this for almost a week now and still haven’t been able to resolve it. I have already tried multiple solutions, including:

Deleting node_modules, yarn.lock, and package-lock.json
Removing android/build and ios/Pods
Running yarn install or npm install again
Cleaning the project with ./gradlew clean (for Android) and pod install –repo-update (for iOS)
Despite trying all these steps, the issue persists. I suspect it might be related to the Apple Silicon (M2) architecture, but I’m not sure how to fix it.

Could someone please help me? I would really appreciate any guidance on resolving this.

Thanks in advance!

I’m using React Router v6 in my React app, and I have a Category page that works fine when navigating within the app. However, when I refresh the page or paste the URL into a new tab, I get the following error:

TypeError: Cannot read properties of undefined (reading ‘id’)
at Product (http://localhost:3000/static/js/bundle.js:6946:59)
This happens because the currentCategory is undefined before it is loaded, so when React tries to map over currentCategory.products, it throws an error.

This is my Category component:

export const Category = () => {
    const { id } = useParams<{ id: string }>();
    const location = useLocation();
    const { currentCategory, setCurrentCategory, fetchCategoryById, loading } = useCategoriesContext();

  const hasFetched = useRef(false);

        useEffect(() => {
        if (location.state?.category) {
            setCurrentCategory(location.state.category);
        } else if (id && !hasFetched.current) {
            hasFetched.current = true;
            console.log(typeof Number(id), 'typeof id')
           fetchCategoryById(Number(id));
      
        }
    }, [id, setCurrentCategory, fetchCategoryById, location.state]);

    if (loading) return <p>Loading...</p>;

    if (!currentCategory) {
        return <p>404 Error, Category Not Found</p>;
    }

    return (
        <div>
            <h1>{currentCategory.name}</h1>
            <ul>
                {currentCategory.products.map((product) => (
                    <li key={product.id}>{product.name}</li>
                ))}
            </ul>
        </div>
    );
};

Question
How can I ensure that the currentCategory is fetched properly when the user refreshes the page or pastes the URL into a new tab, so the page does not crash?

Expected Behavior

The category page should load correctly whether I navigate to it within the app or refresh the page.
If the category is not found, a “404 Error” message should be displayed instead of crashing.

Actual Behavior

Navigating within the app works fine.
Refreshing the page or pasting the URL causes an error because currentCategory is undefined before the API fetch completes.

What I’ve Tried
Checking if currentCategory exists before rendering.
Ensuring fetchCategoryById(id) runs when location.state.category is not available.
Wrapping currentCategory.products.map() in a conditional to prevent mapping over undefined.
I have checked the id from the useParams and its working correctly.
I have another component doing the exact same and this works fine.

I am using a USB scanner to scan drivers licenses into a webform. However when doing so, it hits keyboard commands with different “keystrokes” and usually opens up the downloads window with the rest of the scan in the search bar. I have tried to put it into a text area and still no luck.

Is there a way to slow down the scan in javascript? or atleast scan the raw data without doing any parsing through the scanner configurations?

I just would like to get the raw format so I can interpret if the barcode was in an unknown format. For example Mexico’s Drivers licenses do not have to follow AAMVA format and recognizing which fields/lines are dedicated to which properties would all have to be manual input.

I’m open to modifying properties of the scan (prefixes, suffixes, etc.) If you need anymore information let me know!

I am trying to import and use sharp in my Quasar Electron project.
I have tried uninstalling and reinstalling sharp many times.

When running app as dev using quasar dev -m electron, it opens and runs fine. Running quasar build -m electron, also packages fine with no errors. However, upon opening the packaged app I’m returned with the A JavaScript error occurred in the main process error.

Uncaught Exception:
Error: Cannot find package '/Users/USERNAME/GitHub/quasar-electron-template/
dist/electron/Packaged/quasar electron template-darwin-x64/quasar electron template.app/Contents/Resources/app.asar/node_modules/sharp/lib/index.js'
imported from /Users/USERNAME/GitHub/quasar-electron-template/dist/electron/
Packaged/quasar electron template-darwin-x64/quasar electron template.app/Contents/Resources/app.asar/electron-main.js
Did you mean to import "sharp/lib/index.js"?

Please see image below for full error.

A JavaScript error occurred in the main process error message

For reference, sharp is imported into src-electron/electron-main.js using:
import sharp from "sharp";

I have also tried const sharp = require('sharp');, that also returns an error message stating Dynamic require of "sharp" is not supported.

Every other dependency I have installed works except for sharp.