|
reversefungi posted:The addEventListener function registers a callback function, whose execution is delayed until everything is exhausted in the main thread and you've entered the event loop. However the "registering" happens on that main thread, and in this case you were invoking a function and registering its output, hence the immediate call. I watched this video and I think now your post makes more sense to me lol.
|
# ? Jun 9, 2022 12:08 |
|
|
# ? May 15, 2024 01:36 |
|
I'm messing around with Svelte and have a little demo working. npm run dev works perfectly but when I do a build it puts the files into a /dist folder. I try to open my index.html in that folder locally and I get a cors error for my js file and my css file fails to load, despite everything being on my computer. I feel like I'm missing some big picture thing here.
|
# ? Jun 9, 2022 17:15 |
|
Are you serving it, or just opening the local file? The latter causes the CORS issue, i believe.
|
# ? Jun 9, 2022 17:19 |
|
Just opening it. Yeah, it works if I use the 'Go Live' vs-code extension to serve it.
|
# ? Jun 9, 2022 17:23 |
|
fakemirage posted:Haven't gone through everything, but I noticed the following line. I've been looking and trying to understand arrow functions, and I can't work out why changing it to an arrow function works? when you post: JavaScript code:
why does code:
|
# ? Jun 10, 2022 01:31 |
|
echinopsis posted:I watched this video and I think now your post makes more sense to me lol. I think the root issue here isn't the event system, it's actually syntax. In Javascript, if you write a function call anywhere, like myFun(blob) or myFun(), you are calling that function then and there on the spot. There's not even a way to make where that wouldn't happen in a function definition. This isn't true in a bunch of programming languages but it is at least consistent. You can pass functions by reference, though, without calling them, by leaving off the parens, like myFun. The basic intuition here is mathematical – just like maths, the innermost parentheses are calculated first. So for JavaScript code:
2. d is added to the result of step 1. 3. blog is called with s and the result of step 2. 4. x is called As you can see, everything is immediate here, and will continue to be immediate, unless one of our parameters creates as new scope, like fakemirage suggests, so for JavaScript code:
2. x2 is called with cat and a reference to that function At this point, the function x2 has the function has a parameter, like any other type of parameter. x2 can save that function to a different scope which can be called later, or call it immediately, or call it out of band entirely. Everything inside the function, in this case, s(a) and then blog(...) will only get called once that function gets called. Hope that makes some sense. The best advice I can give you is to really build a confidence in when things happen in Javascript. The most fundamental part of understanding any system, be it computational, mechanical, biological, or astronomical, is timing. So console.log everything until nothing surprises you any more and get real comfy with the debugger.
|
# ? Jun 10, 2022 01:50 |
|
echinopsis posted:I've been looking and trying to understand arrow functions, and I can't work out why changing it to an arrow function works?
|
# ? Jun 10, 2022 02:05 |
|
When you have a function like:code:
code:
addEventListener wants 2 parameters: a string with an event type ("click"), and a reference to a function to execute when that click happens. So when if you call: code:
Now consider this: code:
code:
So why does wrapping this in an arrow function work? code:
code:
|
# ? Jun 10, 2022 02:06 |
|
Practical example. You're making a robot that stops Canadians from stealing your phone.JavaScript code:
The robot will kill the Canadian, as soon as it starts up, then warn "put down the phone or i will shoot", then start looking for potential phone thieves, which it will do absolutely nothing when it detects them, because warnOrElse doesn't return anything. This is because what we've said is, hey, robot.addBehaviour, call phoneSteal with the result or warnOrElse with the result of shootToKill. That is not what we want to be saying, we want to be saying, hey, robot.addBehaviour, I'm giving you a bit of code you should run later when you feel you have to. JavaScript code:
JavaScript code:
JavaScript code:
JavaScript code:
|
# ? Jun 10, 2022 02:12 |
|
wow guys poo poo you’ve given me a good series of answers. I won’t have a chance to sit down and get my head around it until tomorrow, but gosh I really appreciate your help and support here. I feel like I am making a lot of break throughs, where my time is leaning more toward making progress on my program rather than spending time trying to work out how the heck I do anything
|
# ? Jun 10, 2022 04:29 |
|
I'm doing a deep dive into JS to prepare for getting grilled in interviews. I read most of the "Javascript the good parts". I'm on class instantiation/OOP and prototyping right now and I think I somewhat get it. My background on OOP is from using Java in school, so JS is pretty different. Anyway I'm reading this medium article and I'm a little lost on the subclassing section. https://medium.com/@ariel.salem1989/pseudoclassical-subclass-instantiation-in-javascript-6e54a13ea3c4 quote:Subclassing: So you can .call() on a class to pass it's this to a function/class, allowing your new function to inherit whatever you called? I'm lost on the next two lines, assigning Object.create(Car.prototype) and overwriting the constructor on the Location prototype. I don't think I get that part. Also, are there any tips for what I should know and prepare for? My last job hunt I was never really asked a lot of front end/JS questions in an interview setting.
|
# ? Jun 11, 2022 21:59 |
|
You're driving into topics that prove you know how some of JavaScript's trickier syntax and concepts work. But, I'm a little bit surprised by the topic. I don't think classes are widely used in JavaScript, I mean you can use them. I will from time to time for data structures but, nothing complex. And usually I prefer to create a function that just returns an object and leave it at that. React has gone fully functional, for example, and most everything else has too I think. Keep it simple and all of that.
|
# ? Jun 11, 2022 22:40 |
|
In nearly 7 years of professional JavaScripting I have never written a class
|
# ? Jun 11, 2022 22:41 |
|
JavaScript makes using 'this' a total nightmare. What is 'this' well that depends on how the function was called and whether it's a lambda and on and on. That's why I think everyone said forget it.
|
# ? Jun 11, 2022 22:51 |
If during a job interview someone asks about OOP or mentions they use classes in JS, avoid that job.
|
|
# ? Jun 11, 2022 22:51 |
|
Most often seen when JavaScript developers used to be Java developers.
|
# ? Jun 11, 2022 23:01 |
|
I have a reference who mentioned the phrase pseudoclassical instantiation for a FAANG+ and I had no idea what it was so I was looking into it this morning. And yeah I loving hate this in JS. Why would you .call() for an object to inherit this... can't I just stick to binding methods? Also my team moved to light OOP in JS so guess why I'm interviewing.
|
# ? Jun 11, 2022 23:23 |
|
AlphaKeny1 posted:I'm doing a deep dive into JS to prepare for getting grilled in interviews. I read most of the "Javascript the good parts". I'm on class instantiation/OOP and prototyping right now and I think I somewhat get it. [...] OK I think you are understandably confused for several reasons: (1) JavaScript has prototype-based inheritance, not class-based inheritance, (2) JavaScript does have a modern class syntax which works pretty much how you would expect coming from a Java background but this is syntactic sugar for the old prototype-based system, (3) the book java script: The Good Parts is from 2008, fully predating ES6, which was the birth of modern, usable JavaScript and introduced the class syntax, (4) the article you're reading, despite being written in 2017, after class was added, also appears to totally ignore this and work in an entirely pre-ES6 world, and (5) the article is absolutely bananas. For example, it seems to be trying to create a class Location as a subclass of Car??? It suggests this line of code: JavaScript code:
Here's how classes actually work in modern JavaScript. JavaScript code:
|
# ? Jun 11, 2022 23:51 |
|
Oh, and inheritance is achieved using:JavaScript code:
Remember again that this is technically all syntactic sugar for the old prototype-based inheritance model, which does still exist. The Medium article you linked gets some of the details of that old model correct but in other cases it is flat-out wrong even ignoring the typographical errors. This article does a better job of explaining that older approach for achieving the same thing. Yes, it is still absolutely ghastly and I highly advise not bothering to learn the specifics.
|
# ? Jun 12, 2022 00:09 |
|
Thank you for the writeup, that is literally how I used classes in my last project complete with the extends keyword. Like I haven't used prototype poo poo that I have been reading in any of these places. I will def read that link you posted.
|
# ? Jun 12, 2022 01:22 |
|
alright thanks guys. I really do understand now why my original code was failing. the notion of arrow functions is less intuitive to me, but I am working on that. thanks again. good old something awful huh
|
# ? Jun 12, 2022 03:46 |
|
echinopsis posted:the notion of arrow functions is less intuitive to me, but I am working on that. Think of it as just another way of declaring a function. const example = (parameter) => { } is the same as const example = function(parameter) { } it's easier to write the arrow function. So the w3school has this example in their event listener page: element.addEventListener("click", function(){ alert("Hello World!"); }); which of course can be re-written to: element.addEventListener("click", () => {alert("Hello World!");}); which is way easier.
|
# ? Jun 12, 2022 08:17 |
|
AlphaKeny1 posted:is the same as
|
# ? Jun 12, 2022 14:56 |
|
AlphaKeny1 posted:const example = (parameter) => { I much prefer function example (parameter) { } syntax. But I'm the only one unfortunately.
|
# ? Jun 12, 2022 20:40 |
|
A lot of time people are cargo culting the former without need of this capture. It’s usage should really be minimal as it only makes it harder to read.
|
# ? Jun 12, 2022 21:06 |
|
I really like the code:
I think that curried functions look clunky when written using the function keyword.
|
# ? Jun 12, 2022 21:34 |
|
I find that almost in all cases I'm doing something inside of the first function so it look like.code:
code:
Maybe it has to do with it looking clean vs it being easy to read, which is a minor distinction.
|
# ? Jun 12, 2022 22:25 |
|
I think for me it's an issue of consistency. Like if I'm doingcode:
|
# ? Jun 12, 2022 22:52 |
|
AlphaKeny1 posted:
I know this is just a simple example, so I'm not calling you out and this is just for the people less familiar with it, but the callback doesn't need to be wrapped in a lambda in this case. You can just do code:
instead. It does the exact same thing, minus that extra unused closure. I've seen this so many times in production code that i had to say something.
|
# ? Jun 12, 2022 23:36 |
|
Does it actually make any difference?
|
# ? Jun 13, 2022 00:03 |
|
AlphaKeny1 posted:I'm doing a deep dive into JS to prepare for getting grilled in interviews. Do yourself a favor and focus on frameworks: Node and React.
|
# ? Jun 13, 2022 00:14 |
|
smackfu posted:Does it actually make any difference? No, not really. I haven't dug into it, but I would expect the optimizer to deal with it in this case. I just found that a lot of juniors I've been working with are not aware that you don't need to wrap a callback in a pass thru lambda like that. But in the end, whatever.
|
# ? Jun 13, 2022 00:17 |
|
gbut posted:No, not really. I haven't dug into it, but I would expect the optimizer to deal with it in this case. I just found that a lot of juniors I've been working with are not aware that you don't need to wrap a callback in a pass thru lambda like that. But in the end, whatever. It's always frustrating, though, that you *do* have to do addEventListener("click", () => someClass.someFunction()) rather than addEventListener("click", someClass.someFunction) (One of the few things that's better in Dart than JS/Typescript.) And because of that awkwardness I would tentatively recommend just always doing the pass through lambda because it prevents both that mistake and the original mistake that started up this whole topic (accidentally calling the function rather than passing a reference to the function).
|
# ? Jun 13, 2022 01:45 |
|
Sometimes your function accepts additional parameters and not using an extra lambda can cause problems.code:
code:
|
# ? Jun 13, 2022 08:23 |
|
at some stage while working on this I must have made a change and I don't know what, but I am unable to work out why a css selector isn't working on a div when I inspect it in chrome, it's clear it's got the class on the div, but it's like the css isn't even there in my stylesheet. it's not like it's being overridden, just doesn't seem to be working at all. I have this at the end of my css file code:
you can view the source at http://crimecommitter.com
|
# ? Jun 13, 2022 14:20 |
|
echinopsis posted:idk what I've done to stop it applying any of that css HTML code:
HTML code:
fakemirage fucked around with this message at 14:34 on Jun 13, 2022 |
# ? Jun 13, 2022 14:27 |
|
echinopsis posted:at some stage while working on this I must have made a change and I don't know what, but I am unable to work out why a css selector isn't working on a div code:
code:
|
# ? Jun 13, 2022 14:28 |
|
oh my god what a fuckin numbnuts thanks guys
|
# ? Jun 13, 2022 20:43 |
|
echinopsis posted:oh my god what a fuckin numbnuts Also, it’s probably just a typo in your post, but you have your border width set to “2xp” rather than “2px”
|
# ? Jun 13, 2022 23:01 |
|
|
# ? May 15, 2024 01:36 |
|
yeah 2 experience . that’s um not a typo lol next step is figuring out date() i’ve just tested positive for covid so guess i have a week at home to work it out lol
|
# ? Jun 13, 2022 23:08 |