New Tutorial: Introduction to libp2p

[zebateira]

This PR adds the first libp2p tutorial to ProtoSchool.

This tutorial is based on @daviddias's talk in 2018 Developers Meetings: https://www.youtube.com/watch?v=CRe_oDtfRLw

Status:

• Lesson 1 Draft
  • Use another example instead of the catsoftheworld.com one to avoid linking to unsafe sites.
  • Visuals: add some images to break the heavy text content
• Lesson 2 Draft
  • Visuals: add some images to break the heavy text content
  • Copy comic image and add due credit
• Lesson 3 Draft
• Lesson 4 Draft
• Lesson 5 Draft
  • mobile friendly images (libp2p running in the browser screenshots are not showing well on small devices, as well as the nodejs vs browser code screenshots)
• Lesson 6 Draft
• Resources list

Notes

• I roughly followed @daviddias's talk order of ideas, but I was wondering if I could move the Lesson 4 "OSI Model" before the Lesson 3 "Enter libp2p" presenting it as another issue that libp2p tries to tackle in a different way.

[terichadbourne]

Most of this is way over my head, assuming knowledge of networking concepts that I don't have. So I understand that from it that:

• libp2p was pulled out of IPFS to make something more broadly applicable for different kinds of p2p use cases
• it's built modularly so you can pick and choose the pieces of it you need for your use case
• you can use it in web or mobile contexts

But I don't actually understand what it does because I'm not familiar with transports or any of the other modules in the networking stack.

[vasco-santos]

Great work 👍🏼
Left some suggestions and comments for discussion

[terichadbourne]

@zebateira Just finished my copy edit. Mostly focused on...

• grammatical tweaks
• softening the tone with more contractions, etc.
• adding some missing alt tags
• removing the backticks around libp2p and IPFS project names
• clarification in a few points - this is where I'm most likely to have screwed up, so if I changed your meaning anywhere instead of actually clarifying, please let me know and we can talk about wording

Please take a look and let me know what you think.

I love the visual elements you've included in this one!

[yusefnapora]

I'm reviewing this now (looks great so far, will have small copyedits soon), and noticed that images are rendering a bit off in Safari:

Some googling indicates that Safari recently started using the width and height attributes from an <img> tag to determine it's "native" aspect ratio... so maybe we could try setting those attributes and see if it helps: https://www.tempertemper.net/blog/using-image-aspect-ratios-to-avoiding-janky-page-loading

[zebateira]

I'm reviewing this now (looks great so far, will have small copyedits soon)

@yusefnapora thank you! 🙏

noticed that images are rendering a bit off in Safari:

fixed! missed a flex property - safari is really pesky with flex. good catch 👌

Some googling indicates that Safari recently started using the width and height attributes from an tag to determine it's "native" aspect ratio... so maybe we could try setting those attributes and see if it helps: https://www.tempertemper.net/blog/using-image-aspect-ratios-to-avoiding-janky-page-loading

Looking into this to try and solve the page loading issue actually: some lessons are really janky to load because of the amount of images they have, so this is a nice way to try and avoid that 🙏

[zebateira]

Tried it and it's a better experience than before, but the UI would benefit from an image loader (medium style). Looking into this.

loading.mp4

[zebateira]

Looking better now:

loading-placeholder.mp4

But I'm not sure if we should pursue this for now for two reasons:

• Image needs to be created manually and then added to the markdown as data uri underneath the original loading image
• The markdown file will have a lot of data uri junk

In the future when we migrate to a better markdown loader (eg mdx) we can think about this (plus, would allow the loading image to fade-in instead of just popping in).

[yusefnapora]

@zebateira nice, way to figure out the flex thing! The image loader does seem nice, but it would be cool if the build process could do the base64 inlining for us somehow... Sounds like it's probably just better to wait for the new markdown loader, if you're wanting to do that anyway.

[terichadbourne]

@yusefnapora Thanks for that catch! Assume you're still working on the copy edits you mentioned?

@zebateira On Tuesday, do you want to give me a Figma tutorial so I can make the social tile (and blog header image)for this tutorial without breaking anything?

I'm leaning towards waiting to create a libp2p course until we have our next libp2p tutorial, so this and that could both go in it. Would the content addressing and anatomy of a CID tutorials be relevant in a libp2p course or is the content addressing pretty separated from the networking bits?

I assume that this libp2p tutorial should be included in our IPFS and Filecoin courses because it's under the hood for those, but not for Multiformats or IPLD. Does that sound right?

From which of our existing tutorials would it make sense to link to this one in the resources page?

I'm planning to be out on Monday but will do my best to carve out time to draft the blog post and newsletter announcement on Tuesday, maybe aim to launch on Thursday after wrapping up edits here and in those announcements?

[zebateira]

@zebateira On Tuesday, do you want to give me a Figma tutorial so I can make the social tile (and blog header image)for this tutorial without breaking anything?

Let's do it 🎓

I'm leaning towards waiting to create a libp2p course until we have our next libp2p tutorial, so this and that could both go in it. Would the content addressing and anatomy of a CID tutorials be relevant in a libp2p course or is the content addressing pretty separated from the networking bits?

I'm not sure about this, maybe @yusefnapora could help with this? Main question here is whether content addressing and CIDs are basic building blocks for working with libp2p - I'd say you don't need need them to work with libp2p.

I assume that this libp2p tutorial should be included in our IPFS and Filecoin courses because it's under the hood for those, but not for Multiformats or IPLD. Does that sound right?

Sounds good yeah 👍

From which of our existing tutorials would it make sense to link to this one in the resources page?

I'm not sure but I don't see any that would make sense - If we had an IPFS introductory course then it would make sense to link here I think.

I'm planning to be out on Monday but will do my best to carve out time to draft the blog post and newsletter announcement on Tuesday, maybe aim to launch on Thursday after wrapping up edits here and in those announcements?

That would be nice! 🙌

[yusefnapora]

@terichadbourne yes, I'll have a few small suggestions this afternoon. I got a bit sidetracked by npm dependencies on Friday when setting up my local environment, but it's all sorted now. I'll try to reproduce the issue I was having on master, but it may have been fixed there already.

[yusefnapora]

This is a great intro to libp2p! I really like that it sets the historical context and explains how libp2p relates to IPFS.

I just added a few bits of english-teacher red pen for some typos and such.

[terichadbourne]

I got a bit sidetracked by npm dependencies on Friday when setting up my local environment, but it's all sorted now.

@yusefnapora definitely let us know what you ran into. We’ve had a few folks lately that had a bug installing IPFS itself as part of our repo.

[yusefnapora]

@terichadbourne I think it was a bug in the build of libp2p-noise, which requires a version of bcrypto that doesn't like to build on macos Big Sur. I worked around it by messing about with package-lock.json, and forcing it to resolve version 5.2.0 of bcrypto (anything below 5.1.0 fails).

I'm about to try on master now... if it's broken there I think the fix is just to update our IPFS dependency. Which hopefully doesn't break anything else...

[terichadbourne]

@zebateira & @yusefnapora - I've drafted a blog post over at ipfs-inactive/blog#517 that I'd love for you to proof. I'm not attached to the specifics, so feel free to copy edit or do more reworking if you feel I've missed key points.

[terichadbourne]

I believe we've now addressed all the the internal stuff we need to do with respect to linking between tutorials, adding social tiles, etc., so this should be ready to merge once tests pass.