Demo: Using JavaScript's map Function

Hi! I’m just now getting into the screencasting world and have recorded my first demo and did it on using JavaScript’s map function: https://youtu.be/h-zu_fOdn9s.

Some tips for my future self:

  • go full screen
  • bigger font size
  • maybe use Garage Band for better audio?
  • … what else do y’all think?

I’d eventually like to do egghead courses, as I’ve been a full-time and part-time web dev instructor before for years, have seen all these now e-famous folks pop up, and think I could maybe help some folks, too. Thanks for reading this far!

4 Likes

This is really good! The only feedback I’d have for you are the things you’ve already listed. Looking forward to seeing your next video!

2 Likes

This demo was really great @robertwpearce!

Loved how you used highlighting at the beginning to direct the learners eyes to what you were referencing as well as how you narrate your actions throughout the lesson. The iteration that you build in the lesson is a great approach as well as you increase complexity. Really good stuff.

I agree on all your points. You really can’t go wrong with bigger font size when you’re filling up any whitespace on your screen. We recommend a 2/3 code | 1/3 output so you can increase that fontsize a bit more and utilize that whitespace. If you’re interested, we have a whole article devoted to screen set up for more info.

At 01:07 - you show the output of mapping the array. Love how you show both before and after in the console.table, that’s a great way to do it. Whenever you run the code it’s a good time to take ‘showing’ what happened a step further by highlighting the key input, variables/functions, and output. ie the data flow in your example. That way we can see you build the function as well as hear you talk about the data flow of that function as you show us that dataflow

At 02:55 - here with this more complex example, showing the full data flow is more important. It might not be immediately clear to people that you’re using currying/what’s going on with applyDiscount so a walk through of that would be :100:

Excited to see more content!

2 Likes

@zac thank you for taking the time to share this most excellent feedback! I will follow this advice for font-sizes, screen sizes (how did I forget to do these?), explanations of non-trivial techniques and improve on the next one in this series I do (I’ve got 8 more queued up)!

1 Like

So cool @robertwpearce excited to see what your next version looks like!

1 Like

@robertwpearce I love your use of console.table to show the different between the prices array and pricess25Off array.

That makes is super clear as to what is going on :ok_hand:

2 Likes

Thanks, @ian!

1 Like

Thanks, @Will! Do you think I should do another version of this same one, or go on to my next video with the learnings of this one?

1 Like

I would refined the same one

1 Like

@Will @zac – if any of you get a spare 4 minutes, would you mind checking out my re-doing of this at https://youtu.be/tjjg3_jyD7M? Here’s what I did differently:

  • introduced some of the content differently
  • took @zac’s advice on function currying and did that bit as a refactoring at the end
  • larger text size
  • split windows into 2/3 and 1/3 sections
  • edited the video in iMovie, added a Compressor in Garage Band, put it back into iMovie then exported

Thanks for any :eyes: you can spare!

4 Likes

I have one observation, when watching this clip on my phone, I noticed it ending rather abruptly… maybe add a second of silence so the viewer has a chance to see what where talking about (before YouTube closes the window on the viewer)

Great talk, great buildup, excellent punchline
Thanks

2 Likes

Thanks, @aiko!

I think that was really good @robertwpearce!

The multiple examples worked really well and the highlighting was done well to lead my eyes

the screen looked great and readable as well

2 Likes

This is great @robertwpearce! I like the way you iterate on the refactor and how your are explicit about the price being passed in to the map function.

2 Likes

@Will @zac thank you for the :eyes:!!!

1 Like