Feedback on some Lit HTML screencasts

Hey folks, hope everyone is doing well. This took a bit longer than I thought, but here are two short screen casts on Lit HTML, a simple templating library I have been using at work. I thought I would try to put together a short series of lessons on it. I am totally new to screencasting, so I welcome any and all feedback. These videos are unlisted for the moment.

Lesson 1 - https://www.youtube.com/watch?v=lva-9NwhWBs
Lesson 2 - https://www.youtube.com/watch?v=N8xnIbrUn8U

I realize in the second video I forgot to hide the sidebar in VS Code, and somehow the control panel for my audio interface ended up at the top of the screen, ugh.

My main worry is that something like this is to simple. Its nothing you can’t get by skimming the docs. I was thinking a few more lessons could go into composing and nesting templates, and hooking them up to some sort of set state function so things will rerender when data changes. That is basically how we use it work in various UI’s and parts of our app.

Thanks! Let me know what you think

3 Likes

That was good first video some minor feedback would be

On the first video, it would good if you guided our eyes with the mouse by highlighting on the import {render, html } & const app parts

Also, once you were done it would be good to go back and explain what was done and guide our eyes with the mouse what data was used where.

On the 2nd video about the JavaScript expression it would have been cool to type out out the ternery operator while you were explaining that you can use JS expressions

It was like 20 secs of no movement on screen.

Overall that was great and would love to see you post some more. Let me know if you have any questions!

I would like to send your some free egghead swag as well for this first attempt! Could you email me at will@egghead.io

Thanks so much for the constructive feedback @will I am going to tighten up my videos and incorporate all that advice, I definitely agree. I’ll plan a few more videos as well and try to turn it into a little series on lit-html.

Thanks for the offer of some egghead swag! That would be awesome. I’ll shoot you an email.

Would a video on the project setup be useful, or can I just include those instructions in the github readme? Its not much more than installing Parcel globally and running parcel index.html in the lesson directory.

You can do a set up video, but you can also do as @khaledgarbaya did in his 11ty collection and type on the collection page

https://egghead.io/playlists/getting-started-with-eleventy-53c2

Hey Anton! These two lessons that you’ve done are really great. Love what you’ve done here!

The way you hop straight into the code is super great, gets to the point! You keep the lesson moving and build complexity really well. The progression was really well done.

You nailed the screen set up as well :raised_hands:

I got some feedback for you on a couple specific parts :smiley:

Lit HTML Lesson 1

  • The lesson title is a little vague as to exactly what we’ll learn. It helps SEO and sets expectation when you tell us what specific API we’ll use and what is going to be learned. Maybe: `Render a Dynamic HTML Template with Lit HTML
  • START-00:20 - Echoing what @will said, using your cursor to guide our eyes would be great here so you can show explicitly what you’re saying
  • 00:32-00:37 - here would be another great place to ‘guide the eyes’ with the cursor as you don’t explicitly say result and app so to some it could be confusing which arguments are which
  • 00:46 - The change in the output was instant and subtle so it would be great to highlight the output and tell exactly what changed
  • 00:53-END - you tell us that using a function will make everything more dynamic but it seems like the output is the same. Here it would be great to show us how you could make the content more dynamic - maybe apply toUpperCase to data or something like that?

Lit HTML Lesson 2

  • For the lesson title, maybe Interact with Lit HTML Elements through JavaScript
  • I agree with @will n writing out the JS ternery!
  • Using your cursor in this lesson will help with clarity as well
2 Likes