docs: update helia 101, split into separate parts

[achingbrain]

Splits the 101 example into basics, storage and networking to drip feed info a bit slower.

Also update all deps.

[BigLep]

The improvements make sense - thanks.

A couple of small comments.

I definitely want to reduce the duplication in the common text per #20 . I think we can make it better, but want to be doing it one place.

[BigLep]

Isn't more going to be printed than this since the two nodes are talking to each other?

[achingbrain]

Nothing else is printed by the example, no. There are more steps and they have more comments around them but there's no other output.

Do you think it should be more verbose?

[BigLep]

oh ok. I thought there was more output per https://github.com/ipfs-examples/helia-examples/blob/main/examples/helia-101/301-networking.js#L89 (that's what I was looking at, but if that doesn't apply, fine/great - we can resolve)

[BigLep]

This assumes one's node is publicly dialable right (or is the libp2p configuration setting up to do hole punching)?

[achingbrain]

Everything is local here, I think hole punching may be out of scope for a 101

[achingbrain]

Specifically there's no DCUtR in js-libp2p yet because it really needs UDP to work vaguely reliably (e.g. a quic transport), so the only hole punching is UPnP which has to be enabled on your router, though is much more reliable when it does work but is very dependent on individual users networks.

[BigLep]

Ack. I guess my confusion is when we say " you can go to an IPFS Gateway and load the printed hash" in the readme. At that point we're not talking local here (unless the gateway is also local)

[BigLep]

Also, should we add a note (or even reanme) that this is about helia-101-in-node?

I assume we want a getting started example in the browser that deals with the pecularlities of that environment. I see we have #39 , but I also don't think we need to bring ipfs into the equation.

[achingbrain]

I'd really like 101 to be isomorphic so as to not muddy the waters with bundlers and HTML and web servers etc.

Right now it does use the tcp transport which is node-specific but we can circle back and remove that when the private-to-private webrtc transport lands and we have a node version, then a user can run the example script with node or playwright or some other headless browser.

I think the answer to "getting started in the browser" is heavily dependent on the users' choice of deployment method - bundler/ui framework/etc, so I feel this would be better handled with a "Next steps" section here that links to the examples of use with specific browser technologies.

As in "You've done the 101, now let's integrate with webpack/React, here's it with esbuild, here's it with nextjs", etc.

By the point the user has reached that section the've covered UnixFS, storage and networking in 101-303 so it's then how to apply that knowledge.

[BigLep]

I'd really like 101 to be isomorphic so as to not muddy the waters with bundlers and HTML and web servers etc.
I feel this would be better handled with a "Next steps" section here that links to the examples of use with specific browser technologies.
By the point the user has reached that section the've covered UnixFS, storage and networking in 101-303 so it's then how to apply that knowledge.

Ok, sounds good.

Having a next steps section sounds good calling out that browser usage is covered in other examples.

[mediafill]

Hey guys! Love all of this discussion! Seriously cool stuff you're doing! So my use case, which I assume will be similar to the use case of majority, is 5 main functions using Helia. 1. Add data, 2. Share/publish data, 3. View data 4. Edit data. 5. Search data. Is there any way to dumb this down for quick adoption. I feel like Helia should honestly be where all the energy from Filecoin.org goes as it has the biggest potential for mass adoption using a quick include EG: npm {helia-turnkey}, then without having to worry about all the other "weeds" like ipns, etc, just get these 5 functions working out of the box in the browser? Just my humble feedback and 2 cents. Thank you all again for your work on this humanity changing tech!