search

TheOdinProject / curriculum

The open curriculum for learning web development
https://www.theodinproject.com/
Other
10.11k stars 13.53k forks source link

Objects and Object Constructors: "Gentle explanation of this in Javascript" article long-stretched and text-heavy #27134

Closed ShinnyD closed 4 months ago

ShinnyD commented 10 months ago

Checks

Describe your suggestion

I lost focus half way through the article since it was very text heavy and an information dump. Perhaps as an alternative a concise explanation or a link to a video explanation like this video from fireship.

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-javascript-objects-and-object-constructors

(Optional) Discord Name

No response

(Optional) Additional Comments

We <3 open source :)

KevinMulhern commented 9 months ago

Thanks for the suggestion @ShinnyD, I'd like to get input from our @TheOdinProject/javascript team please?

thatblindgeye commented 9 months ago

Personally I'm not super into replacing the existing resource with a 6 minute video (or rather, 100 seconds of a video with the rest being "optional"). I'd rather either update the assignment item to call out which sections are mandatory reading from that resource (with the other sections being something to come back to if the user is interested) or replacing it with another text based resource.

With something like this, it is extremely helpful to write the code in the console and tinker around with it to get more of a grasp on it. So while it i a lot of reading if you're plowing through it in one go, I think it' overall more helpful than the concept being summed up in 100 seconds (since it's not exactly a straight forward concept).

khhuang7 commented 8 months ago

That existing resource is an incredibly difficult read - in addition to what @ShinnyD mentions, the language is often awkward for a non-technical beginner to understand. (I have done some other programming, and I work/live speaking a second language so have a lot of practice trying to understand the intent of broken English - if I struggled, I'm sure plenty of true beginners would struggle too!)

I'm new to the topic myself but tried to find some more directly replaceable resources, what do you think? (@thatblindgeye ?)

  1. JavaScript Tutorial - covers the same four function invocations, as well as arrow functions
  2. freeCodeCamp - covers the same material but in a slightly different structure, and also includes events

(Happy to help make changes if agreed upon.)

github-actions[bot] commented 7 months ago

This issue is stale because it has had no activity for the last 30 days.

thatblindgeye commented 7 months ago

Still mulling over whether we should update this existing resource, but a couple of questions to pose:

  1. @ShinnyD What do you think of the JavaScript Tutorial resource linked above?
  2. For both you and @khhuang7, do either of you feel that the issue with the existing resource could be in part due to how large this particular lesson is? That is, would the existing resource feel more consumable if it didn't come at the end of an already lengthy amount of reading?
khhuang7 commented 7 months ago
  1. For both you and @khhuang7, do either of you feel that the issue with the existing resource could be in part due to how large this particular lesson is? That is, would the existing resource feel more consumable if it didn't come at the end of an already lengthy amount of reading?

No, the resource itself is challenging to read (language/phrasing, structure). I came back to it on separate days and still struggled to get through it.

MaoShizhong commented 6 months ago

@thatblindgeye I've been reviewing this assigned article (pun intended) recently and when I try to put myself back in the shoes of people going through this section for the first time, I definitely agree that it's a bit too challenging of a read relative to the curriculum's intent at that point (both at the end of a long and difficult lesson, and in general, as has been shared above).

Both of the above suggested articles I think cover the main points sufficiently while keeping terminology and flow much more digestible. I still think the Dmitri Pavlutin article is a very good read, but compared to the suggested alternatives, I believe it only gains this value once you've already a better idea of how this works in practice and want a more thorough breakdown. I think it's definitely one that could be an AR item.

So I think it would be sensible to put it in the AR section, and put one of the two (we don't need both and I don't have any strong preference for either) suggested articles as the assigned reading instead.

And while we're at it, I also think this might be a good opportunity to prune our AR section. It's definitely far too unwieldy right now, and people are probably more likely to get more out of it if it only had a few articles to extend key topics, rather than the million alternative ways of wording probably the same topics that different people discovered over time.

Thoughts?

thatblindgeye commented 6 months ago

I'd be good with updating the assignment for sure. I mainly just wanted to check if the crux of the issue was just the assignment, or the length of the lesson coupled with the assignment (since we have had some lessons that were lengthy at first before being split into several, smaller lessons).

Agreed about the Additional Resources section. @khhuang7 are you still interested in working on this? If so, does what @MaoShizhong said above make sense to you/provide enough info to work o this?

khhuang7 commented 6 months ago

Happy to help! It all makes sense for me, except pruning the AR section - @MaoShizhong or @thatblindgeye could one of you provide guidance on which bullets we should delete?

  1. Lydia Hallie has a visual article on prototypal inheritance and prototype inheritance by Programming With Avelx explains the Prototype concept with graphics and beginner friendly language. Try using these resources if you want another perspective to understand the concept.
  2. This Object.create video by FunFunFunction explains the method with great details about it, he walks through what it is, why Object.create exists in JavaScript, and how to use Object.create. Also you can check this Object.create method video by techsith for another point of view on extending objects.
  3. The Principles of Object-Oriented JavaScript book by Nicholas C. Zakas is really great to understand OOP in JavaScript, which explains concepts in-depth, which explores JavaScript’s object-oriented nature, revealing the language’s unique implementation of inheritance and other key characteristics, it’s not free but it’s very valuable.
  4. The first answer on this StackOverflow question regarding defining methods via the prototype vs in the constructor helps explain when you might want to use one over the other.
  5. A Beginner’s Guide to JavaScript’s Prototype and JavaScript Inheritance and the Prototype Chain from Tyler Mcginnis has great examples to help you understand Prototype and Prototype Chain better from the beginner’s perspective.
  6. This video from Akshay Saini is an easy way to understand the concept of Prototype, Prototype Chain and prototypal inheritance..
  7. Interactive Scrim on objects and object constructors.
  8. Check out this video explanation on the this keyword from DevSage that gives a different perspective on how its context changes, as well as scenarios in which this behaves unexpectedly.
thatblindgeye commented 6 months ago

@khhuang7 Myself and @MaoShizhong discussed and we've decided on the following: