The real code behind a

[@Hyperplexed]

Fantastic breakdown Kevin! Thanks so much for featuring my video, it's truly an honor.

[@KevinPowell]

Thanks for continuing to make such awesome videos, and really happy that you liked it 😊

[@jitxhere]

Wow 2 legends ❤️

[@_fntn]

@Hyperplexed @KevinPowell Thanks to you both for all that you do. I've learnt so much from both of your channels. I hope you keep up the great work for years to come.

[@gokulnarayan6778]

Ultimate crossover😮

[@Shaheer-xs5os]

Hey! @Hyperplexed big fan... both of you, never disappoint when it comes to thinking out of the box!

[@quanghungpham269]

Hyperplexed has been my favorite channels because of the short, full content and exciting way of creating effects. The most amazing thing is he's teaching in Javascript code too. It's great to see Kevin is noticing him now.

[@KevinPowell]

I've been following him since basically day-one of his channel. I love his approach a lot!

[@moritzschuessler]

What i really like at his video is the thought process. When seeing stuff you first think: "Thats really hard and i cannot do it" But when u actually break things down it get surprisingly easy. Thats a think more people should learn and maybe try to embed in their tutorials. You just get better and more confident when coding. I dont see this in most tutorials (youtube and text) They just pre-chew all the code and new developers copy it without thinking about it. The next time they stumble above a problem they comment: "can someone make a course or tutorial with all the code - i want to learn it". Meanwhile everything is described well in the docs or can be archived with given informations from the post.

[@MajorUnderdashPain]

Watching one of my favourite webdevs dissect another one of my favourite webdevs. This truly is the greatest crossover of our time.

[@rajaulislamratul4736]

A few days ago I and a lot of people commented on kevins video saying that he should come up with more javascript contents on his channel and today he is explaining hyperplexed's complex javascript animation. Thank you kevin for always listening to our thoughts

[@Aitch-Two-Oh]

Nice deep dive of the random colour function at 3:48, only here's how it really works... 😁 The '+ 1' extends the range to include 'max' as a possible output value and it affects the result only when 'min' and 'max' differ. Floor always rounds down and that is what we want. Sidenote: adding 0.5 before flooring would round up/down to the nearest integer (and not what we want). The '+ min' offsets the result to the requested range, but 'min' is always zero here so it does nothing. Putting this together we can see the whole show in simplified form: items[Math.floor(Math.random() * items.length)] 😁👍

[@santoshparker8681]

Kevin is slowly turning from the king of CSS to the king of front end development

[@mykalimba]

9:30 A game programming "gem" that is very well-known to veteran game developers like myself is to eliminate the square root calculation when determining the distance between two points, if you are only concerned about comparing that length to some other distance. So instead of taking the square root of (dx squared + dy squared), you would simply compare the un-square-rooted value against the **square** of your comparing distance. For instance, in this case, you would just compare (dx * dx) + (dy * dy) against 10,000 (which is the comparing distance 100, squared). Also note that instead of using the Math.pow() function, I would opt for simple multiplication to compute the squares of dx and dy. I have no real idea what the Math.pow() library code is doing to calculate its result, but I have faith that a simple multiplication is something that would be fully optimized in a modern JavaScript interpreter.

[@mykalimba]

And as to _why_ you would want to eliminate a square root calculation, the reason is that they are expensive to calculate (in CPU time). And since this code is run every time the mouse moves on the page, the processing power that is saved by _not_ performing a square root calculation is probably measurable.

[@ScriptRaccoon]

You can do squares simply with x**2

[@CLeovison]

Kevin doing more tutorials that include js is really 🔥🔥

[@neilpadfield]

Really great video, Kevin. I really liked the speed and flow of it, in some ways a bit like a Hyperplexed video. You went into the details but kept it moving along quickly.

[@--bountyhunter--]

I always thought Hyperplexed was underrated depending on how much effort he puts into his videos, hi definitely deserves more recognition it was an amazing thing for you to mention his channel as well his effort amazing video like always ❤

[@denizorsel1029]

Kevin and Hyperplexed content , a match made in Heaven! Thanks to you both , Web is better than ever!

[@AntonioGonzalez-we4wx]

This crossover was better than the entire Marvel Cinematic Universe

[@deadlyecho]

I like this collaboration ❤... Hyperplexed & Kevin... we need more, hopefully in the future 🙏 😊

[@vilijanac]

Bravo, this video itself, is an excellent production. Very professionally done.

[@stanimirnikolov159]

Amazing video, thank you! Appreciate that you are reiterating that it is all about the thought process behind it.

[@pravinmane1]

Liked the way you broke down the problem and solved step by step, it was really easy to understand

[@ScriptRaccoon]

I didn't know about hyperplexed. Instant subscriber. Awesome content, thanks for the (implicit) recommendation!

[@teamvigod]

Hyperplexed is a coder and an artist

[@oswaldoolea2889]

congratulations! very complete video which means very professional, guess a lot of work and time to make, top quality result.

[@joeerickson587]

Kevin and Hyperplexed Colab would be 🔥🔥🔥

[@serkan_bayram]

Now, we need another KZbinr to take a deeper look at Hyperplexed's video editing to see how he always manages to create videos that look amazing :D

[@marslogics]

This is awesome, your dedication to teaching is commendable.

[@izkuipers]

Hyperplexed + Kevin Powell Am I dreaming?

[@robertwattner]

Awesome stuff as always! Btw the blue and red background lights look great on KZbin's ui blur. Especially on the landscape sidebars. Nice job!

[@thanatoswake8068]

When I clicked on this video I was not expecting the best explanation of javascript random number generator functions I have ever heard lol

[@svenzverg7321]

Kevin talking about JS is just feels odd. Like your violinist friend suddenly play Debussy on a public piano. It's not unreasonable, that she has that skill, but it's still kinda surprising and tantalizing to watch. XD

[@violin245]

Haha I feel the same anytime a violinist plays piano.

[@smorebytes]

Too cool, totally gonna swipe this and remix it for one of my projects. ^_^

[@BubblyBanjax]

Is anyone else bothered by the lack of a shrink animation for the box-shadow glow? I get that it's gonna affect performance but the effect would look so much better with the glow tapering off imo. Either way I love seeing my two favourite CSS channels in the same video.

[@is_rar]

Demn! I've always dreamt of this ❤

[@KyleMatthew-i9z]

I love hyperplexed he inspired me to start learning web development

[@jitxhere]

My toxic trait is that me thinking i will be able to break down other animations too but fail to do so...but still quite good learning

[@harrisonhutton]

Love this!

[@niklassoderberg2168]

I just saw the other video, this is great!

[@dariyablyazov9581]

This is another perfect use case of rxjs

[@sanskar_gupta]

The problem that the stars are not been created in small movements around the same star can may be because of the calculate distance you used was based on Pythagoras theorem so it was only calculating the straight distance between the two points{displacement}. Hyperplexed may be used a different approach

[@HARUN-AKSU]

How did you do the code animations? I liked it

[@asadullahjan430]

beautiful

[@SerilaBuck]

I wonder if it wouldn't be better if instead of adding X number of span for each stars , it would be better to have one canvas covering the page(maybe with a point event none) and with all the animation tacking place inside the canvas instead.

[@HARUN-AKSU]

How did you do the code animations

[@minetomek]

Hyperplexed video for a Hyperplexed video.

[@wvdheuvel2115]

Dunno if this has been mentioned before, (either here or on hyperplexed video) but `const mousePosition = { x: e.clientX, y: e.clientY }` wont work when scrolling the page.. use ` const mousePosition = { x: e.pageX, y: e.pageY }` if your page allows the user to scroll.

[@erickdavid4257]

invoking tailwind to grab a couple of colors is insane

[@bradenborman4396]

HYPERPLEXED the goat

[@talkdatrue]

Nice AD dude congrats

[@nobilissimum]

4:09 You missed the opening curly braces

[@devoxygen7395]

Both are legends

[@MichaelRichins]

The dot needs to be position fixed not absolute as you're dealing with the viewport and not the closest ancestor.

[@avi12]

4:10 Not having the { drives me nuts

[@Trekiros]

To be honest, I'm more impressed by the video editing than by the code x_x

[@LearningTwentyFive]

The "how long" function seems a little silly, no? Would the best solution not be to instead sum up the distance that the mouse has moved since the last star, and once that distance passes a threshold, draw another star and reset the distance? That way you can still create stars by wiggling the mouse or moving it smoothly across the screen

[@KevinPowell]

The issue if you only measure time is, if you move the mouse quickly, they end up being very spread out. So you want to use distance for fast mouse speeds, and time for when it's just wiggling around or moving slowly.

[@LearningTwentyFive]

​@@KevinPowell Ah, I meant something more like: let mouseDistance = 0 const lastMousePosition = {x: 0, y: 0} const STAR_DISTANCE_THRESHOLD = 100 window.onmousemove = (e) => { const currentMousePosition = {x: clientX, y: clientY} // Star setup ... mouseDistance += calcDistance(currentMousePosition, lastMousePosition) if (mouseDistance > STAR_DISTANCE_THRESHOLD) { // Create star... mouseDistance = 0 // or mouseDistance -= STAR_DISTANCE_THRESHOLD } lastMousePosition.x = currentMousePosition.x lastMousePosition.y = currentMousePosition.y } That way you're looking at more the distance along the line that the mouse creates, rather than the absolute distance between any two stars. Maybe I'm missing something! Love the video!

[@wellyesorno]

anyway Sir, my college senior in laboratory gave us task to make " * " inside input:password which it automatically give us disc " • ". when i looked into it, i cant find any solution other than javascript by stacking a container with absolute position inside password field. And using array that display the asterisk based on how many character exist when we are typing. like if the javacript check that the input has 9 characters then it return the value into the container inside of password field. So we also doing CSS transparent to the text of password field to hide the disc. So its like we covering the field with container that return asterisk * . is there any way of how to deal with this without javascript? also i think there are lot of application who use "*" for password instead of dots. But i think that those software are using different tools that automatically set the value to asterisk for password field and not disc like HTML

[@TheStickofWar]

Sure, make a font, swap out the disc for an asterisk in the font and use @font-face and font-family to style your input element.

[@HuynhLuong227]

wow, thanks for sharing

[@jnskender]

What do you use to record your screencasts and edit them?

[@KevinPowell]

A normal video of mine is done with OBS to record my screen. In this I used a bit of that, plus some snappify for a lot of the code animations, with editing done in Premier. Most of the fancy stuff in this one was directly from Hyperplexed's video though, and I'm not sure what he uses. I was able to reproduce the slide transitions relatively easily in Premiere, but I wouldn't be surprised if he uses something else like AfterEffects for a lot of what he does, but I honestly have no idea 😅

[@27sosite73]

top!!!!

[@webdeveloper4742]

Yep a common thing how they deliberatly leave code out and then they get thumbs down for missleading.

[@r-i-ch]

It’s great! Except it should be done via or at least elements, NOT by polluting the DOM with a bunch of semantically incorrect ! (Shoutout to @frankslaboratory for this sort of thing)

[@rossclutterbuck1060]

saying this is DOM pollution with incorrect semantics just shows you have no idea what semantics are. Care to enlighten us as to what you think a span means semantically and why this is "pollution"? Also, you aware that canvas is a pain in the ass to make responsive, is more memory intensive than a bunch of spans and performs like shit on Firefox?

[@KevinPowell]

canvas is *great* for a lot of things, but I think for this it's a bit of overkill. The animations here are all high performant using transform properties, and spans and divs have no semantic meaning anyway, plus they're removed relatively quickly, so you never have more than ~10-20 of any at any given time. I think you can make a case for canvas here, but I have a feeling the code would be more complex, and I'm not sure if there'd be a huge benefit.

[@warguy6474]

this is why i will never shit on frontend the js is pretty trivial but i will never get which css things to change. Enjoyable to watch but I don't think I will ever be touching css 😂

[@jamesdeske4327]

Just a common thief Kevin

[@RandomGeometryDashStuff]

04:11 missing {

[@czerskip]

And then there's Ana Tudor level 🤯😅

[@mad_circuits]

Oh man, thanks. But now I'm triggered. I watched the Hyperplexed video days before you reviewed it now. And back then I was already biting my tongue, when seeing createElement and appendChild in a onmousemove handler and other fauxpas. So: 1) Please, just: DON'T DO IT! That is not, what you want for high performance purposes. You alter the DOM each time. Instead, create all spans at program init and just reuse them in onmouseover. Hide/unveal them. Use classes or inline styles, but visibility instead of display to make it easier for the render (tree) management to update. 2) Don't use Math.random for random item picks, use your own integer based short pseudo random routine. It will be much faster. 3) Pythagoras distance calculations are very slow: Swap it against some simpler algorithm or at least: Don't apply sqrt!!! Just compare the sums of powers of the triangle legs (cathetus).

[@roganl]

Your audio is desynced from your lips....

[@re.liable]

I had trouble reading the title 😅

[@KevinPowell]

Yeah it was a little awkward, I've updated it :D

[@ImTheDot]

.

[@princetajik9319]

thanks, now i unsubscribed from hyperplexed cz he does not tell us everything!

[@frankmcnulty1515]

It's crazy how you can get ad revenue by just re explaining an already perfectly explained video.

[@KevinPowell]

Not really doing this to make money from, but sure 🤷

[@elliekillsmonsters6137]

@frankmcnulty1515 rude 🙄

[@hyperprotagonist]

Congrats Kevin, your first encounter with a proper bellend on KZbin.

[@svenzverg7321]

@@hyperprotagonist Eh, probably not the first. Also had a lot of fun researching a word 'bellend'. English is fascinating.

[@AlexiCult]

Dude, I literally wished that Hyperplexed made a more detailed explanation of what he did in his video. And here is Kevin, doing just that. It's awesome and very helpful. So, whichever ad revenue Kevin makes from this, he deserves fully.

[@thevividversatilechannel4807]

`math.hypot` for calculating hypotenuse