Helping you learn how to make the web, and make it look good while you're at it.
With videos every Tuesday and Thursday, I'll be bringing you How Tos and Tutorials, as well as simple tips and tricks, with a big focus on helping people see how wonderful CSS is!
Пікірлер
I thought we would talk about hoisting here :(
1:57 you would add the name there otherwise it would be an anonymous function. If an exception was thrown you would t see the variable name the function was assigned to, rather you would see anonymous function. You might want to reassign different functions to that variable in some sort of strategy pattern… if an error is thrown, it’s useful to see the name in the stack trace error to quickly find the problem.
That was interesting! Yes, I would like to see the css for the spinning letters, please.
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif For anyone looking for quick copy and paste, here you go.. proceed with your day job.
It's worth mentioning the use bind to bind this to the containing context's this.
How can i apply some of these animations in wp? help
Great 👍
In my opinion, the real beauty of arrow functions lies in their application with higher level functions, map & reduce, promises... May i propose everybody (re-)watch @funfunfunction before MPJ seemingly returns on monday? 😁
Oh what a news! I was going through their content a few months ago and got really sad when I saw their goodbye video.
Really fun video. Seems like you've got a perfect demographic to drip feed beginner js content. I know I'm enjoying it!
Didnt know fit content existed until today in figma and css
I absolutely don't like arrow functions and rarely ever use them.
Shouldn't all those lets be consts? It almost never necessary (and almost always bad practice) to update variables that contain a function. My linter would go insane 😅
I hope you teach him that margins and floats are the devil, and that everything should be a flexbox by default. The power of grids and subgrids, and good code organization.
naming of anonymous functions is helping when generating jsDocs or just when debugging those (names in stack traces and breakpoint availabilities).
My 3-cents: Terse code is harder to debug, harder to read, and harder to set breakpoints (debug). Also, arrow functions with implicit return statements and lean coding constructs may be convenient once you figure out all of these tricks, but they are a real pain to learn. That is to say, you don't really know what the code is doing sometimes if you don't know the "hidden" rules behind the syntax. Old school code is more explicit. It doesn't hide anything and you can figure out what it's doing just by looking at the code. You don't have to look up some "hidden rules", etc. to figure it out like you do with the newer JS syntax. Personally, I prefer verbose code and "old school" syntax (traditional constructs) because it's easier to read, debug, etc. For my coding adventures, I want to be able to set a breakpoint anywhere in the code without having to rewrite it. That makes it more maintainable, which the newer kids on the block seem to devalue or ignore altogether.
functions are also objects in javascript with their own methods like .call() or .bind() - so another way to declare a function is creating a new instance of the Function Class like: let add = new Function('a', 'b', 'return a + b');
Really interesting, thank you both! I was aware of the hoisting difference but the lesson around how the “this” keyword gets affected was new to me, and really well explained!
Kevin, first of all, thank you! I am a huge fan! I want to do a text gradient as a custom property, but attr() won't let me send the colors through it. I want to do this <h1 text-gradient="red,blue"> [text-gradient] { background-image: linear-gradient(90deg, attr(text-gradient)); background-clip: text; color: transparent; } I tried many different ideas, based on attr data passing but nothing works. This approach has a huge potential and If you know a trick to make it work, I'll be very grateful! If there is nothing you can do, maybe you can say a good word to the CSS main devs about adding this support to the CSS, I know they listen to you :DDD Best, Nik
"code golf"
Awesome! Much needed. Please create more videos on GSAP ScrollTrigger and SVG animations, Lottie animations. All combined into one series. That will be great.
Dark mode or no learning!
8:47 I'm interested in the advance version of this video 😸
Function expressions in other languages will assign the return to the variable and not the function itself, I am certain that this isn’t known as an expression in JavaScript and that it is just an anonymous function. But this is JavaScript and they name expressions wrong, just look at a language like Rust and you will see that expressions always assign values based on evaluation and not assign the reference to the function, this would be a statement as the value isn’t returned. Using an immediately invoked function would assign the value and not the reference. Once you learn more languages you wouldn’t use the term of expression to describe what is actually being defined with that code, just a heads up for learning other languages.
Just to prove a point, try this let x = function y(z) { return z; } and see what happens, you will be able to call x(“test”) which will return z. So, is this an expression or a declaration? This is the very reason I find this use of the word expression misleading. You will now find that y is undefined and that x is a function named y! Just try this in the console and you’ll find that when x is evaluated it will show a function called y that you can’t call.
This is a great episode! Super explanations by Chris! Hope Kevin and Chris will make more videos like this, especially for more advanced topics.
How to apply this property for video corners
The reason is "syntactic sugar". Function declarations were provided to give a Java-y feel. Function expressions is what actually happens in JS/ECMAScript. Arrow functions were introduced as short hand syntax (brought over from CoffeeScript that has both "fat" and "skinny" arrow functions), and whose syntactic sugar is to bind "this" automatically.
Hey Kevin, first of all congratz for your channel. Did you mention a video teaching how to do this mask but I didnt find it in your channel. Can you point it?
Feels wrong , just a JS video. I mean not even a little CSS ? Sorry dude but there is literally 1000s of other videos explaining on how functions work. 😢
I've just started your course on responsive layouts. Thanks for sharing your knowledge freely.
let instance = this; was the most used way. Function.prototype.call and Function.prototype.apply where introduced later into Javascript to allow calling a function while also passing (overriding) this. E.g. function sayHello () { return `Hello, ${this.name}`; } sayHello.call({ name: 'Chad' }); // This will return "Hello, Chad" And later still Function.prototype.bind was added that lets one do e.g. this: let sayHelloChad = sayHello.bind({ name: 'Chad' }); sayHelloChad(); // This will return "Hello, Chad"
blinding alert!!
Yet another edge case: when you have a function written with FE approach through var and it’s called before initialization, we get a different error as opposed to using let keyword.
Within objects and classes there are _3 additional syntaxes_ for creating function properties. { foo() {}, get bar() {}, set bar(val) {} }
those last 2 are setters and getters, they are functions, but you cannot declare any function with them
This is awesome. Personally struggled with the whole hoisting concept and arrow functions in javascript as a beginner. Still does to this day lol. A great part 2 vid idea would be explaining event listeners. Specifically, the difference between: form.addEventListener('submit', submitHandler); vs form.addEventListener('submit', function(e){ submitHandler() }) And form.addEventListener('submit', (e) => { submitHandler() })
the difference between them is exactly what this video talks about: the different ways you create functions. addEventListener is not doing anything different in your examples, you're just specifying the callback parameter in 3 different ways.
@@rossclutterbuck1060 I probably should've said explaining callback functions within event listeners and not just event listeners themselves. Going over subtle differences and why you'd use one over the other in a beginner-friendly way would still be useful. The second example lets you pass a parameter to submitHandler() because it's inside an anonymous function, while the first example does not. That might seem obvious to those more experienced with javascript, but can easily trip up those starting out.
He briefly touched up on that when he said `this` would be assigned to the caller of the function. In your first two examples, `this` will be the form that triggered the handler, while `this` would be the window object (or undefined, if the code is inside a module).
Good to see JS tutorials in your channel mr Kevin! thanks! 😊
I've never used function expressions or anonymous functions. I generally use function declarations at top-level, but arrow functions inside other functions
Another 'benefit' of function expressions is that you can dynamically re-assign a different function to the variable at any time. So you could dynamically change what 'add()' actually does. Sounds bloody dangerous to me, but anyway.....
unless you're using TS, you can override a function at any time. this is all valid: function f() {/* do something */} function f() {/* do another thing */} f = function () {/* do yet another thing */} The first two will be hoisted because they are function declarations; the third one will be evaluated in order because it's an expression.
@@feldinho But you cannot decide at run time which of the first two will be called
JavaScript… what evil trickery is this… 😂
Please do more JavaScript tutorials. This is the best stuff, always in demand.
Why lightmode
In regards to his comment at about 1:50 you would name your function in the below example because that name would return in a stack trace and help you understand what function is failing instead of it being anonymous. const example = function add(numA, numB) { return namA + numB; }
While this is historically true, engines now show the name of the variable to which the anonymous function was originally assigned. :) For example, if you'd drop the `add` in your code, the stack trace shows "error at example". (I just tried it out on Safari, Chrome, Firefox, Node and Bun, just to make sure)
The really cool thing about function expressions is that they can be reassigned during runtime. Imagine that you want to assign a function based on their handling of a particular language where the language is not static during runtime, such as processing data that contain strings written in one or more languages for example.
I just dropped in to say your thumbnail is wrong. a function expression would look like const example = function add(numA, numB) { return namA + numB; }
Hum, no ?
You can benefit from naming your functional expression functions so they show up with a name in stacktraces. If there was an error in this function, it would show up as the add function and not just another anonymous function. const add = function add(num1, num2) { return num1 + num2; }; When I explain fat arrow functions automatic scoping of this, I show them the bind method used previously, and how that worked, and how with fat arrow functions you no longer need to do this. But if you're in a place where you can't use a fat arrow function, that function.prototype.bind method is still available to add the necessary scoping into an existing method.
What a great explenation. Thx
Does Monokai have a light version?
Great information, thanks for sharing!
Named function expressions will show the name in a stack trace
What is the downside of using .bind(this) on the function, instead of using a lambda expression or referencing 'this' somewhere else @11:55 ?
.bind creates a new function that wraps the first. This is technically less efficient with memory and call time, but practically makes little difference.
i literally just now searched for Kevin Powell javascript thinking you had this type of video, I was looking for why the arrow function is important and now this gets recommended. damn