Choo♚𝕂𝕚𝕟𝕘 Comments - Answer Overflow

Topics

Choo♚𝕂𝕚𝕟𝕘

KPCKevin Powell - Community

•Created by snxxwyy on 10/20/2024 in #front-end

Object vs map

Although a Map can have keys of any type, and the type is preserved, it is important to be careful when using objects as keys, because objects use referential equality. The result is that you can set a value using an object key and attempting to get the value later may fail when using a different object that is structurally identical to the original object used to set the value. For example:

const m = new Map();
m.set({number:42}, "forty two");
console.log(m.get({number:42}));//undefined

const m = new Map();
m.set({number:42}, "forty two");
console.log(m.get({number:42}));//undefined

12 replies

KPCKevin Powell - Community

•Created by snxxwyy on 10/20/2024 in #front-end

Object vs map

Aside from the fact that Map is faster for insertion and deletion, objects also have prototypal inheritance. The following code outputs "true":

const obj = {};
console.log("toString" in obj);//true

const obj = {};
console.log("toString" in obj);//true

The object should be empty, but it already has properties via prototypal inheritance, so you have to be careful when using the object to hold properties with certain names. Maps don't have this problem. The get() method will never return anything other than undefined from an empty Map regardless of the key provided.

12 replies

KPCKevin Powell - Community

•Created by snxxwyy on 10/19/2024 in #front-end

rest operator | ...

The rest operator creates an array from whatever comma separated values it receives. This is not in any way related to the fact that the function returns something. That function just happens to return the variable that a rest operator was used on, but the return itself has no connection to the fact that it's a rest operator. You can use a rest operator without ever returning any part of it.

60 replies

KPCKevin Powell - Community

•Created by snxxwyy on 10/19/2024 in #front-end

rest operator | ...

The others becomes an array because the rest operator is used on the comma separate list of 3,4,5,6,7. It doesn't apply to 1,2 because there are two other parameters preceding it which take those values. Without the dots, the value of others would be 3. I am not sure if I understand the question, because the value returned is a parameter.

60 replies

KPCKevin Powell - Community

•Created by snxxwyy on 10/19/2024 in #front-end

rest operator | ...

They are not doing the same thing. They are doing the opposite thing. The rest operator is creating an array from a comma separated list. The spread operator is creating a comma separated list from and array.

60 replies

KPCKevin Powell - Community

•Created by snxxwyy on 10/19/2024 in #front-end

rest operator | ...

Both the spread and rest operators use three dots. The spread operator separates an object/array into a comma separated list, and the rest operator joins a comma separated list into an array. The reason that the spread operator can be used to copy and/or concatenate arrays, is because it separates the elements into a comma separated list, which is how normal array items are placed into arrays. As a consequence. The spreading of numberList is the same as doing 1,2,3. Doing that inside the definition of concatList would be [1,2,3,4,5,6]. A similar thing happens when spreading john. An example of using the rest operator would be in destructuring.

const numbers = [1,2,3,4,5,6];
const [first, second, ...others] = numbers;
console.log(first);//1
console.log(second);//2
console.log(others);//[3,4,5,6]

const numbers = [1,2,3,4,5,6];
const [first, second, ...others] = numbers;
console.log(first);//1
console.log(second);//2
console.log(others);//[3,4,5,6]

60 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/18/2024 in #front-end

get a random number after keyframes done its work / just get a random number every second

The easiest solution is probably to use setInterval and just change the value of --at11 completely in the JS. You don't need a CSS animation for it.

4 replies

KPCKevin Powell - Community

•Created by AMAN on 10/12/2024 in #front-end

How do i put a span a absolute div across the whole page not just 100dvh the entire website

This is an XY problem. It looks like you just want to blur everything except the dialog. If you use an actual <dialog> element, you can apply a backdrop filter. This doesn't require any extra element to cover the whole page. If you really did need an element to span the whole page, the easiest way is to make that the wrapper. Divs by default resize to hold all their contents, so if the whole page is inside that div, it would span the entire extents of the page.

4 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/8/2024 in #front-end

4questions

Most of what you wrote is completely incomprehensible.

21 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/8/2024 in #front-end

4questions

You could make a canvas element via HTML, but you can't draw on it without JS. What is the purpose of a canvas that you can't draw on?

21 replies

KPCKevin Powell - Community

•Created by Etsi0 on 10/2/2024 in #front-end

Striped table

The thead only has one row, so that could be simplified even more, but I kept that original part from your code due to laziness.

35 replies

KPCKevin Powell - Community

•Created by Etsi0 on 10/2/2024 in #front-end

Striped table

https://codepen.io/chooking/pen/xxvZeEr

35 replies

KPCKevin Powell - Community

•Created by Etsi0 on 10/2/2024 in #front-end

Striped table

That could be simplified very substantially to this:

thead tr:nth-child(odd),
tbody tr:nth-child(even) {
  background-color: #f0f0f0;
}

thead tr:nth-child(even),
tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

thead tr:nth-child(odd),
tbody tr:nth-child(even) {
  background-color: #f0f0f0;
}

thead tr:nth-child(even),
tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

35 replies

KPCKevin Powell - Community

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

question regarding events in this example

That is the name of the parameter for the callback function. The value passed to it is an event object. The specific properties of the event object depends on the type of event that you are listening for.

8 replies

KPCKevin Powell - Community

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

Transition on modal.close()

The title of the video is only about display:none, but the link includes a timestamp for the part about modals.

29 replies

KPCKevin Powell - Community

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

Transition on modal.close()

https://www.youtube.com/watch?v=vmDEHAzj2XE&t=972s

29 replies

KPCKevin Powell - Community

•Created by Abdul Ahad⚡ on 9/21/2024 in #front-end

How to approach the text highlight with a vector.

https://codepen.io/chooking/pen/YzmKaKR

8 replies

KPCKevin Powell - Community

•Created by Abdul Ahad⚡ on 9/21/2024 in #front-end

How to approach the text highlight with a vector.

You said you used the image as a background. It is not a background, so it won't work with box-decoration-break.

8 replies

KPCKevin Powell - Community

•Created by Abdul Ahad⚡ on 9/21/2024 in #front-end

How to approach the text highlight with a vector.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

8 replies

KPCKevin Powell - Community

•Created by snxxwyy on 9/17/2024 in #front-end

variable within :root variable not changing.

Here is a variation that works: https://codepen.io/chooking/pen/MWMMOYQ

6 replies