Joao Comments - Answer Overflow

Joao

Posts Comments

KPCKevin Powell - Community

•Created by Faker on 10/7/2024 in #front-end

Meaning of FPS and how to slow down game animation

https://www.youtube.com/watch?v=yGhfUcPjXuE

51 replies

KPCKevin Powell - Community

•Created by Faker on 10/7/2024 in #front-end

Meaning of FPS and how to slow down game animation

I suggest looking at this video, it's great to understand why rather than how:

51 replies

KPCKevin Powell - Community

•Created by theboyduddus on 9/24/2024 in #front-end

question regarding functions in js

Do you have a specific example in mind? That question is not very intuitive: you can assign a function to a variable (that's what variables are for - storing values) but you cannot assign a variable to a function.

5 replies

KPCKevin Powell - Community

•Created by Scott Borrowman on 9/10/2024 in #front-end

Question about Vuejs and disabled links

If you find out, please ping me as I'd like to know this as well 😄

36 replies

KPCKevin Powell - Community

•Created by Scott Borrowman on 9/10/2024 in #front-end

Question about Vuejs and disabled links

https://discord.gg/vue

36 replies

KPCKevin Powell - Community

•Created by Scott Borrowman on 9/10/2024 in #front-end

Question about Vuejs and disabled links

@Scott Borrowman I think for something this specific, you might want to try at the Vue.js server directly.

36 replies

KPCKevin Powell - Community

•Created by vic on 9/10/2024 in #back-end

how to send post from data from react and capture the data in express

As an aside, do not use capital letters when defining functions. Specially in React, which requires components to be in upper case. I don't know if this is the issue here, or even if it's an issue at all when dealing with functions declared inside components, but it's just good practice.

6 replies

KPCKevin Powell - Community

•Created by vic on 9/10/2024 in #back-end

how to send post from data from react and capture the data in express

This looks like an incomplete example, I'm guessing that the component code is incorrect and the JavaScript code doesn't run to completion, running into an error.

6 replies

KPCKevin Powell - Community

•Created by Gega on 9/7/2024 in #front-end

Is it legible?

I find that using text inputs is a lot easier in most common use cases just because of this extra step that needs to happen anyway. The only downside is accessibility

27 replies

KPCKevin Powell - Community

•Created by Gega on 9/7/2024 in #front-end

Is it legible?

RegExp are not for validation in this case, but to enforce strict input format. 9999 is a valid year format, and the date input would allow it as well. Validation comes afterwards anyway.

27 replies

KPCKevin Powell - Community

•Created by Gega on 9/7/2024 in #front-end

Is it legible?

I would make sure however that once a field is considered valid, it automatically jumps to the next. Same as it happens when paying using credit cards for example

27 replies

KPCKevin Powell - Community

•Created by Gega on 9/7/2024 in #front-end

Is it legible?

I also prefer regular text inputs for things like dates. Dates can be annoying specially when having to select a year far back in the past. Easier to validate, and restrict input with regular expressions too.

27 replies

KPCKevin Powell - Community

•Created by Gega on 9/7/2024 in #front-end

Is it legible?

You can also split this into its own function, where you can have other input parsing and validation. This also avoids the need for global variables, as you can extract the input elements of a form directly from its reference variable. There's a very good example here: https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript#associating_a_formdata_object_and_a_form

27 replies

KPCKevin Powell - Community

•Created by Gega on 9/7/2024 in #front-end

Is it legible?

I also see a few problems here:

$form.addEventListener("submit", (e) => {
    e.preventDefault()
    if (!validateInputs()) {
        calculateChronologicalAge(inputDay, inputMonth, inputYear)
    }
})

$form.addEventListener("submit", (e) => {
    e.preventDefault()
    if (!validateInputs()) {
        calculateChronologicalAge(inputDay, inputMonth, inputYear)
    }
})

First, the function name is confusing: validateInputs. If I validate something using this function, but true means errors, so I have to negate the return value in my if statement. 🤔 Not good. If it returns false, it should mean that it failed the validation. That's not just my opinion, it's a common pattern that you'll see all around. Secondly, instead of nesting the "happy path" that the function will take when there are no errors, you should return early when you spot them.

$form.addEventListener("submit", (e) => {
    e.preventDefault()

    if (!validateInputs()) {
      throw new Error('validation failed');
    }

    calculateChronologicalAge(inputDay, inputMonth, inputYear)
})

$form.addEventListener("submit", (e) => {
    e.preventDefault()

    if (!validateInputs()) {
      throw new Error('validation failed');
    }

    calculateChronologicalAge(inputDay, inputMonth, inputYear)
})

This way, the function reads from top to bottom as "these are the conditions that need to happen in order for this function to run properly"

27 replies

KPCKevin Powell - Community

•Created by Gega on 9/7/2024 in #front-end

Is it legible?

I think it's pretty good overall, except for the $ in front. It's not like it's a crime, but you can see that it throws people off, as it's a well established convention already. Instead, use either more descriptive names (not needed in this case in my opinion) or append with an underscore variables that are local in scope. For example resultYear can be used globally as the DOM selector, while _resultYear is the variable that only applies inside the calculateChronologicalAge function. This is a much more common pattern that you can often times see in libraries, where one function, let's call it transform is exposed to the public API, while the actual logic uses _transform internally.

27 replies

KPCKevin Powell - Community

•Created by Vandana on 8/31/2024 in #front-end

findIndex()

I strongly suggest looking using MDN for referencing JavaScript documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

4 replies

KPCKevin Powell - Community

•Created by INDavid04 on 8/29/2024 in #back-end

Unexpected token is not valid JSON

This is where I'd take a step back and re-watch the tutorial to make sure if Kyle specifies what this data is supposed to look like. It's quite common to do things in one way at first, keeping it simple, and then making it a tad more complex. This is one area where people tend to get confused. I'm guessing something around those lines is what happened here.

32 replies

KPCKevin Powell - Community

•Created by INDavid04 on 8/29/2024 in #back-end

Unexpected token is not valid JSON

Based on this, you should provide an object instead of a simple string. Maybe something like: const cover = JSON.parse({ image: converEncoded })?

32 replies

KPCKevin Powell - Community

•Created by INDavid04 on 8/29/2024 in #back-end

Unexpected token is not valid JSON

I haven't watched the video but I'm going to assume that book.cover is supposed to be an object looking something like:

const book = {
  // ... other properties
  cover: {
    image: 'ee-square.jpg'
    // ... other properties
  }
};

const book = {
  // ... other properties
  cover: {
    image: 'ee-square.jpg'
    // ... other properties
  }
};

32 replies

KPCKevin Powell - Community

•Created by INDavid04 on 8/29/2024 in #back-end

Unexpected token is not valid JSON

So, in the first screenshot you can see that coverEncoded is just a string, which is why the call to JSON.parse. If you look at the examples from this function, it's easy to get confuse and think that regular strings would work, but notice how the string needs to be surrounded by double quotes. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#examples

32 replies

Gaming

Programming