Chooβππππ
KPCKevin Powell - Community
β’Created by vinicius! on 12/14/2024 in #front-end
Closures works only because of lexical scope and scope chain?
An extra detail not in your explanation is that Javascript is a garbage collected language. If there is no valid reference to a value, that value gets discarded. In most functions, the parameters and any variables declared inside that function will be discarded when that function finishes execution. If that function returns another function that has references to either the parameters or variables declared in the outer function, that inner function continues to hold references to these values, so they do not get discarded even after the outer function has finished execution.
5 replies
KPCKevin Powell - Community
β’Created by empty on 9/14/2024 in #front-end
stroke text
The LOREM in my example uses Montserrat, which is one of the fonts that exhibits the problem you encountered, but it works with this technique.
9 replies
KPCKevin Powell - Community
β’Created by empty on 9/14/2024 in #front-end
stroke text
It is possible to do with poorly designed fonts by using SVG text. https://codepen.io/chooking/pen/emOOQya
9 replies
KPCKevin Powell - Community
β’Created by Abc on 12/9/2024 in #front-end
How to avoid duplicate if checks when overriding a method in JavaScript?
I just realized a possible third option. You could call super.jump() unconditionally AND set speedY unconditionally if the new value of speedY has no effect on a dead entity. This still does not seem better than what you have.
36 replies
KPCKevin Powell - Community
β’Created by Abc on 12/9/2024 in #front-end
How to avoid duplicate if checks when overriding a method in JavaScript?
It seems like you are trying to overoptimize. Anything you can do to avoid the duplicate check will make the code more complex and will not improve efficiency at all. If you insist on still doing this, I can think of two ways to do it:
1) Return a boolean from jump() to indicate if the jump happened. The Child can then call super.jump() unconditionally and set speedY only if that call returns true.
2) Make jump() accept a callback that it calls along with setting the value of this.lastActivityTime.
I advise against using either approach, and I doubt any other creative solutions will actually improve efficiency beyond what you already have.
36 replies
KPCKevin Powell - Community
β’Created by glutonium on 11/29/2024 in #front-end
quick question regarding making li focusable using tabindex
The channel list in discord uses links inside of li. They wrap two levels of divs around the link, but it's still a link inside the li.
6 replies
KPCKevin Powell - Community
β’Created by Blackwolf on 11/29/2024 in #front-end
What is replacing Javascript keyCode?
8 replies
KPCKevin Powell - Community
β’Created by snxxwyy on 11/24/2024 in #front-end
nodes in js
No. There are also attribute nodes, comment nodes, and a few others, but text nodes are the ones used most in DOM manipulation.
31 replies
KPCKevin Powell - Community
β’Created by snxxwyy on 11/24/2024 in #front-end
nodes in js
Text nodes are not elements.
31 replies
KPCKevin Powell - Community
β’Created by snxxwyy on 11/23/2024 in #front-end
dataset vs regular data methods.
The use of dataset is for custom data attributes that you can put in the HTML. Use setAttribute for predefined attributes.
9 replies
KPCKevin Powell - Community
β’Created by YN20 on 11/23/2024 in #front-end
Pure CSS and HTML Creating Layout and naming elements
There is no standard, but this is a popular approach: https://getbem.com/introduction/
19 replies
KPCKevin Powell - Community
β’Created by Faker on 11/20/2024 in #front-end
How to load content in a single page web app
Correct.
4 replies
KPCKevin Powell - Community
β’Created by Kivory on 11/21/2024 in #front-end
Trying to get a custom div to follow the cursor. Gives me error "cursorDot.style is undefined"
The result of querySelectorAll() is not an element. It is a node list. If there is only one member of the cursor-dot class. Use querySelector(). This approach also works if there are multiple members of the class but you only want to select the first one. If there are multiple members of the class and you want to operate on all of them, you must iterate through the node list and apply the operation on each individually.
3 replies
KPCKevin Powell - Community
β’Created by Faker on 11/20/2024 in #front-end
How to load content in a single page web app
The strategy of unhiding content requires knowing in advance what that content is. Creating elements and text nodes and appending them to the document can be done without any advanced knowledge of the content.
Both strategies can be used on the same site. Consider the situation of a navigation menu that is hidden until a button is pressed. The menu items are already known in advance, so you can just hide and unhide. If this same site has a chat section where people can type messages, there is no way to know in advance what somebody is going to type, so you can't have that pre-rendered waiting to be unhidden later.
There are situations in which you may want to render the items even if they are knowable in advance. This can be done for performance. Hidden items use memory and may affect JS execution time for certain operations.
4 replies
KPCKevin Powell - Community
β’Created by Jono Lewarne on 11/14/2024 in #front-end
Could these scalable backgrounds be made with css?
That doesn't have the overlap, which is what I said would make it difficult.
11 replies
KPCKevin Powell - Community
β’Created by Jono Lewarne on 11/14/2024 in #front-end
Could these scalable backgrounds be made with css?
These are all possible in pure CSS, but the simplest are the top middle and top right ones. The others are complicated due to the overlapping of the circles that make up the pattern. It would be simpler if they didn't overlap. The overlapping in itself isn't a problem if the number of repetitions is fixed, but you want an arbitrary number of repetitions with overlap.
11 replies
KPCKevin Powell - Community
β’Created by Ullas Kunder on 11/14/2024 in #front-end
need help with radial reveal animation like example
I made something similar in which the revealed area is controlled by mouse position instead of a predetermined path, but the principle involved is the same. https://codepen.io/chooking/pen/RwEogoe
I used mix-blend-mode, but you can also do this by moving a radial gradient mask.
8 replies
KPCKevin Powell - Community
β’Created by rnrnshn on 11/13/2024 in #front-end
Position the image to be fully visible in the viewport and disappear on scoll
I am not completely certain that I understand what you are describing. In general, if you want something to appear in the same spot for some portion of scrolling and resume scrolling after a certain point, this can be done using position:sticky, but you have to structure things correctly for this to work. It is also possible using an intersection observer or with an event listener for the scroll event, but the pure CSS solution is generally sufficient.
3 replies
KPCKevin Powell - Community
β’Created by Revanth on 11/13/2024 in #front-end
Need Help with Christmas Tree Growth Animation in React! π
The tree could just be an SVG. Animating the size change of that is simple. The challenge is with the envelopes. Ideally, they should not be part of the same image as the tree, because the envelopes should not increase in size. One detail that I'm not sure if you thought about is how tree growth affects envelope placement. Do the envelopes move further apart? That is what would naturally happen if they were affixed to specific points on a tree that grew. Simulating that part probably will require some math in addition to keeping a record of the location of every envelope.
2 replies
KPCKevin Powell - Community
β’Created by snxxwyy on 11/12/2024 in #front-end
forms | action and method
It does not submit the form again. When a form is submitted using GET, it's just a request to load the page.
31 replies