The code that runs the ProtoSchool website. Visit https://proto.school for interactive tutorials on decentralized web protocols. Explore IPFS and Filecoin through code challenges, code-free lessons, and local events.
Home Page: https://proto.school
License: Other
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
https://proto.school/ currently has no pointer to any of our IPFS channels, making it hard for folks to know where to ask questions.
We need a cool logo for ProtoSchool :)
One of the most successful aspects of the NodeSchool visual design was the logo that allowed the community to create dozens of derivative logos for their local chapters.
| Basic | Hex | International Day |
|---|---|---|
 |
 |
 |
A full list of local chapter logos is in their "hexdex".
Here's some of my favorite.
| Seoul | Tokyo | Lisbon |
|---|---|---|
 |
 |
 |
| San Jose | Los Angeles | Cleveland |
 |
 |
 |
I've noticed some variations in how we're all referring to the workshops and lessons on the ProtoSchool site, and it would be great to come to a consensus so we can use consistent wording both on the website and here in issues. There are three different things I can envision us needing names for:
I'm using my own proposed names as headers below:
WORKSHOP. One is the top-level category. We describe ProtoSchool as a "collection of workshops" so I've been assuming that "Basics" and "Blog" are workshops (boxed in blue above). If one were to run one of these in a live event, workshop would feel like an appropriate name to me. However, I think some folks are calling these lessons. If we're calling them something other than workshops, the paragraph at the top of the homepage should be changed to match.
LESSON. The next level down is what I think of as lessons (circled in red above). A series of them makes up the thing above that I think of as a workshop. However, on the main page these are labelled as exercises. I'd argue that since we're about to add a new workshop where you only read, rather than code, to learn, exercise is not an appropriate name, and that the main page should list these as lessons, not exercises.
EXERCISE. The third thing, which may or may not need a public-facing name, is the box where you type in code (circled in purple), which to me feels like an exercise, and is called that in our code structure. Moving forward, once we add the workshop on decentralized data structures, some lessons will have these and some won't. Right now, this box is labelled as exercise. Unless we plan to have multiple of these in a single lesson, which I don't think we should, it could be argued that we might want to remove this label to avoid the following problem: If we have a workshop with 5 lessons but only the 2nd and 4th have exercises in them, are those exercises 2 and 4 (despite 1, 3, and 5 not existing) or are they exercises 1 (confusingly delivered in lesson 2) and 2 .(confusingly delivered in lesson 4). If there's only going to be 1 per lesson, we could either label these boxes just "Exercise" or give them no header, rather than referencing an exercise number.
@mikeal et al, I'd love your opinions on this naming proposal so I can then update the site accordingly.
Blog lesson 6 "Chain of links" could also be solved with having prev: null on the oldest blog post. It's a correct solution, but it won't validate at the moment. Make it validate.
@mikeal et al
Let's establish a clear name for the site that we use when referring to it in prose (anywhere other than in a URL or a logo). The site currently says Protoschool in a blurb on the main page (screenshot below) but my personal preference is ProtoSchool for legibility. The decision we make for how we want to write this in prose may also affect how we want it displayed in our forthcoming logo.
If we every need to go all caps for styling reasons, I appreciate the color distinction used in the current heading substituting for a logo. That pattern is also mirrored by a font weight distinction in the all-caps versions of the logo proposals.
I'd like to see a program, similar to NodeSchool, that helps people run small workshops in their local communities.
There's a ton of resources we can copy/fork.
We should also copy the org structure. This was an incredible innovation.
Should force HTTPS?
After hitting "Submit" and successfully completing lesson 3 of the "Basics" series (https://proto.school/#/basics/03) , the "Submit" button turns into a "Next" button which, on click, tries to advances to a non-existent lesson 4 in this series (https://proto.school/#/basics/04), which loads as a blank white page.
We need a way to mark the last lesson in a series so that it will prevent the default behavior and instead either (a) advance to the next series, if it exists, or (b) go back to the main workshop page so the user can select another lesson series to try.
Here's the Weekly Digest for ipfs-shipyard/proto.school:
Last week 1 issue was created.
It is closed now.
โค๏ธ #54 Configure weekly-digest automation., by mikeal
Last week, 2 pull requests were created, updated or merged.
Last week, 2 pull requests were merged.
๐ #54 Configure weekly-digest automation., by mikeal
๐ #47 feat: adding analytics. fixes #44, by mikeal
Last week there were 4 commits.
๐ ๏ธ Merge pull request #54 from ipfs-shipyard/weekly-digest Configure weekly-digest automation. by mikeal
๐ ๏ธ Create weekly-digest.yml by mikeal
๐ ๏ธ Merge pull request #47 from ipfs-shipyard/analytics feat: adding analytics. fixes #44 by mikeal
๐ ๏ธ Adding proper tracking ID. by mikeal
Last week there was 1 contributor.
๐ค mikeal
Last week there were no stargazers.
Last week there were no releases.
That's all for last week, please ๐ Watch and โญ Star the repository ipfs-shipyard/proto.school to receive next weekly updates. ๐
You can also view all Weekly Digests by clicking here.
Your Weekly Digest bot. ๐
Add a link to the website with a link to the Github repo and a note that users can report bugs there.
The blog lessons have a lot of code. It would be cool to be able to resize the editor, so you can see more of the code at once.
I was thinking about building a "file drop" tutorial but quickly realized that it requires a visual component area and we don't yet support that.
What would be the best way to create/support something like this? How do similar projects deal with this?
e.g. go to http://proto.school/#/basics/02 and complete the exercise. Hit the next button - page changes but scrollbar stays in the same place
Edit success messages in blog series of lessons to read "Everything works!" instead of "All Works!"
I'd really like a button in the top right that full screens the entire run area as a modal.
Standalone IPLD Explorer is here:
https://ipfs.io/ipfs/QmYJETQ15RAnKXoJxqpXzcvQ2DuQA35UHwJBTjTPCSs9Ky
repo:
https://github.com/ipfs-shipyard/ipld-explorer
I'd like to deploy it to https://explorer.ipld.io to make the url more memorable
ipld/explore.ipld.io#2
If you want to link to hide the header, just ?embed=true to the url, like:
To link straight to a specific CID or path, prefix it with:
https://ipfs.io/ipfs/QmYJETQ15RAnKXoJxqpXzcvQ2DuQA35UHwJBTjTPCSs9Ky/?embed=true#/explore/
@mikeal can we get this moved to the IPFS?
Here's what I'm working towards for the layout for a proto.school lesson... I'd like to split the text into "the lesson" where we teach some concept, and the "exercise" where we pose a coding challenge. Ideally we'd also add in a glossary of terms that we're introducing as well (a stretch goal ;-)
Per my discussion with @olizilla this morning, I'd love to be able to access the section/workshop name (basics, blog, etc.) from the Vue template. Currently I believe I can only access the lesson name this way, and there could easily be duplication in lesson names across workshops. There may be other reasons we'll want this, but at the moment I'd like to embed it in a link URL so that we can pre-populate it into an issue title on GitHub when the user has questions to ask about the lesson. (WIP in the questions-link branch.)
@olizilla or @mikeal, would either of you be game to make this change, perhaps with me looking over your shoulder as a Vue learning experience?
Currently, on each individual lesson page, we only indicate the name of the lesson the person is working on (that lesson name being occasionally duplicated across multiple workshops). I personally would find it helpful to also see which workshop I'm in (eg Basics or Blog) and how far along I am in (eg Lesson 2 of 5). We could do this purely in text or with some sort of progress bar.
If we did a progress bar, I'm envisioning x small boxes (where x is the total number of lessons in the workshop), of which the ones you've completed are colored, the one you're on is colored in the same circle but also has a border, and the upcoming ones are gray. (Very open to styling suggestions here.) At the moment, we don't track what lessons have actually been completed, so for styling purposes this would just presume you've completed the ones prior to the one you're looking at.
When you fail a lesson, an error message or hint (such as "You forgot to return a result :)") is displayed in a red alert zone just above the submit button. If you can't figure it out on your own and instead go back and click thorugh to the next lesson, that same failure message is still displayed on the lesson you haven't tried yet.
"One important features of DAGs" -> "One important feature of DAGs" ;)
Neither of the existing lesson series (basics and blog) explicitly define the difference between IPFS and IPLD. Because all of the commands refer to ipfs and some of the lessons explicitly state that you're putting objects into IPFS, that's what I first assumed was happening. However, I've found a number of references to IPLD throughout the lessons, given without an explanation of what that is and how it differs from IPFS. I don't know which are typos (though I believe at least one is) and which are intentional. This might be a sign that each lesson series had a different author.
Questions for the team (@mikeal @olizilla @vmx et al):
I'm happy to make these edits once we have a consensus.
BASICS - multiple references to IPFS, 1 to IPLD paths
Basics Lesson 1 (https://proto.school/#/basics/01)
Explainer box: CID - Content Identifier. An unique address for a block of data in IPFS that is derived from it's content.
No other mention of IPFS anywhere in this first lesson, but the page header says IPFS and the commands include ipfs so that's what I assume we're storing stuff in.
Basics Lesson 2: (https://proto.school/#/basics/02)
The way you express links in the ipfs DAG store is with an object..
CID - Content Identifier. An unique address for a block of data in IPFS that is derived from it's content.
DAG - Directed Acyclic Graph. Blocks in IPFS form a graph as they can point to other blocks by their CID. These links can only point one direction (directed) and across the whole graph there are no loops or cycles (acyclic).
Put it into IPFS and return its CID.
All signs point to IPFS.
Basics Lesson 3 (https://proto.school/#/basics/03)
ipfs.dag.get() allows queries using IPLD paths. These queries return an object containing the value of the query and any remaining path that was unresolved.
This is the first ever mention of IPLD, and no context is given for why it's not IPFS being mentioned.
BLOG - no references to IPFS except that it's in the header and all the commands, many text references to IPLD as where things are being stored
Blog Lesson 1 (https://proto.school/#/blog/01)
In the basic lessons, we learned that a link in IPLD is represented as an object with a slash as its only field...
Note that IPLD is never explicitly referenced in the lesson this description links to (or anytime previous to it), so the user definitely didn't learn that there. :)
Blog Lesson 2 (https://proto.school/#/blog/02)
Everything that is stored in IPLD has an associated CID
Previous references have said we're storing things in IPFS.
Blog Lesson 3 (https://proto.school/#/blog/03)
Insert those new tag objects into IPLD via ipld.dag.put() and return the two resulting CIDs as array.
I'm almost certain that ipld.dag.put() is a typo and meant to be ipfs.dag.put(), given what's in the code box here. But again the text references putting things in IPLD, and it's elsewhere said IPFS while referring to the same command.
Blog Lesson 6 (https://proto.school/#/blog/06)
We know the CID of a blog post as soon as it is stored in IPLD. We can use that CID to link from newer blog posts to older ones.
Again, elsewhere we're told we're storing in IPFS.
Would be super useful if the exercises linked to the docs of the API call being taught as it can't generally be assumed the person doing the exercise will know where to find the docs.
The branch is gone, so https://proto.school is a 404 now
This issue is here to document the scope of the 1.0 release and link to relevant issues.
THE LIST BELOW IS OUT OF DATE. 1.0 release tracking is now being managed through milestones on GitHub issues. Please visit https://github.com/ipfs-shipyard/proto.school/milestone/1 for current status.
- [ ] Twitter (before public launch but not 1.0)
We need to figure out how community members can contribute localizations to the lessons.
I went through the basic lessons.
In lesson 2 it wasn't clear to me what I should actually do. I tried adding this line:
return {bar: {'/': cid.toBaseEncodedString()}}But I got Did not return a valid CID instance. So I guess I need to return a CID. I then did
const link = {bar: {'/': cid.toBaseEncodedString()}}
return await ipfs.dag.put(link)Which was correct. Though it could also have been that you need to create a CID somehow.
Lesson 3:
The last sentence has a typo "traversing" and isn't really a sentence (but I figured out what do to :):
For the next lesson, take the linked object to just stored and return the value of test by travesing through the links.
At their current max width, the boxes containing lesson titles fit their contents like so:
When you narrow the screen width, the boxes narrow and the title wraps all the way to the left like so:
I'd like to see instead a responsive design that either:
a) keeps the "Lesson X" to the left and doesn't let the second line of the title start any further left than the first line of it does
b) puts "Lesson X" on its own line and then starts the title on the line below, so it can wrap all the way to the left without looking odd
c) Do (a) for medium widths and transition to (b) for super skinny widths
Here's the Weekly Digest for ipfs-shipyard/proto.school:
Last week, no issues were created.
Last week, 1 pull request was created, updated or merged.
Last week, 1 pull request was merged.
๐ #47 feat: adding analytics. fixes #44, by mikeal
Last week there were 2 commits.
๐ ๏ธ Merge pull request #47 from ipfs-shipyard/analytics feat: adding analytics. fixes #44 by mikeal
๐ ๏ธ Adding proper tracking ID. by mikeal
Last week there was 1 contributor.
๐ค mikeal
Last week there were no stargazers.
Last week there were no releases.
That's all for last week, please ๐ Watch and โญ Star the repository ipfs-shipyard/proto.school to receive next weekly updates. ๐
You can also view all Weekly Digests by clicking here.
Your Weekly Digest bot. ๐
We'd like to create a beginner-friendly tutorial on decentralized data structures that would give some of the background needed before folks get to the "Basics" lessons.
This should include plain-English introductions to concepts such as:
I'd love for folks with more experience to add their ideas to this issue so we can scope out what this intro should look like!
@mikeal @olizilla
Do we need the IPFS logo on the ProtoSchool header, or can it be removed?
How do you feel about the following options?
If I substitute the real ProtoSchool logo for the pseudo-logo but leave the IPFS logo above it we get OPTION A:
Removing the IPFS logo so the branding is for ProtoSchool (but with IPFS mentioned in the blurb describing ProtoSchool) we get OPTION B, which I prefer. (Note that I've been frequently clicking that IPFS logo thinking it will take me to the IPFS website, which it doesn't.)
As a potential OPTION C, I could ask Agata to make us a version of the logo with the tagline included and alignment fixed, that would look roughly like this:
I think I'd find Option C most visually appealing if it were a designer making the logo instead of me cutting and pasting in Preview. :)
For my own reference, option (a) is temporarily made like so:
<div class="flex-none">
<div class="ph2 ph4-ns">
<img src="./ipfs-logo.svg" alt="IPFS" style="height: 66px" />
</div>
<div style="padding-left: 82px">
<img src="./ps_logo_white_horizontal.svg" alt="ProtoSchool" style="height: 100px"/>
</div>
<div class="header-text indent-1">
<h2 class="ma0 fw5">
The interactive IPFS protocol workshop
</h2>
</div>
</div>
vue-monaco-editor lasy loads the editor code from a CDN called alipayobjects.com
This might weird people out. Combined with the fact that vue-monaco-editor says it's unmaintained we should replace that dependency.
Comming from standard js world, I'd expect double quotes for strings to get picked up by the lint script. This came up in a PR #63 (comment)
We need to
npm run lint to the travis config so we get feedback on PRsvue-cli-service lint reports no lint errors when mixed quote styles are used.Blog Lesson 1 "Basic linking" isn't clear enough. People tried to insert a link ({'/': samCid.toBaseEncodedString()} into the dag first and then use that CID.
It also wasn't clear that you should edit the existing puts() calls.
It also wasn't clear if the author should linked to the blog post or the other way round.
There's a long error message if you use an undefined variable.
Steps to reproduce: run the following code:
const run = async () => {
return foobar
}
return run
I'd expect a better error message. Something like "Cannot execute code".
Currently, the back and forwards buttons don't work and nothing is saved on restart. It would be nice if we could save state per lesson (just record the last code autosaved from the editor).
Pretty much everyone tripped up on this in the workshop. When the last lesson is finished we still have a next button that links to a dead lesson :(
lack of some dependencies in package.json ๏ผ
npm install --save leveldown webcrypto-shim webrtcsupport
"dependencies": {
"leveldown": "^4.0.1",
"webcrypto-shim": "^0.1.4",
"webrtcsupport": "^2.2.0"
},
I tried it out, support online debugging and studying of IPFS Tech Courses,
Great PWA experience ๏ผexpect more courses ๏ผ
Right now, you have to manually add a route for every step in your lesson.
We should move to a more dynamic route that:
Can we redirect http to https automatically? Because of (libp2p/js-libp2p-crypto#105) it doesn't work on http.
Click on run button getting this error in console. Although the example working properly.
For metrics //cc @mishmosh
Just quick questions for keeping track of infra things:
Purpose: Show how IPLD can be used to work with any hash-linked datastructure.
This exercise assumes basic familiarity with GIT.
Use the IPLD explorer to explore a git commit graph. What's the hash of the first commit?
Task: Find the hash of the first commit.
In this exercise, we'll learn the power of CIDs and how to name git commits in IPLD.
In IPLD, we name objects using CIDs. CIDs are self-describing content identifiers; they uniquely name IPLD "nodes" (with a multihash) and tell us how to decode them (with a multicodec). Their binary format is: <cid-version><multicodec><multihash> however, when written in text documents, we prefix them with a multibase codec. For example, a CID pointing to a raw byte array encoded in base16 might look like f015512208fc4f3c25ee968efc9a3890995cec77c4137f0f7381803aa6f74194b1ad87a00 where f is the multibase prefix for hex, 0x01 is the CID version, 0x55 is the multicodec, 0x12 is the multihash hash function (sha2-256), and 0x20 is the length of the hash (32 bytes, 256 bits).
With a little bit of work, we can convert from a git commit hash to a CID. In git, a commit is named by its SHA1 hash. To turn this into a CID that can be used with IPLD, we first have to turn the SHA1 hash into a multihash and then construct a CID from that. To convert the commit hash to a multihash, you'll want to use js-multihash. Then, to convert that multihash to a CID, you'll need to use js-cid. The "multicodec" for git objects is git-raw.
Task: Write a function that converts a git commit id to a CID.
In this exercise, we'll learn how to retrieve IPLD object (including git objects that have been added to IPFS) using js-ipfs.
Now that we can name git commits by CID, we can fetch the git commit via IPFS using the DAG API.
Task: Write a function that takes a commit ID, retrieves the commit from IPFS, and returns the commit as a JSON object {{ need to convert? }}.
In this exercise, we'll learn how to use IPLD paths to traverse an IPLD DAG.
Now that we can fetch commits, we can start traversing the commit DAG (or the "git log"). In IPLD, we traverse DAGs by asking an IPLD resolver to lookup a path in an IPLD DAG. In IPLD, a path has the form /ipld/CID/path/to/field and can traverse multiple nodes, transparently crossing the links between nodes. In js-ipfs, we'll use the same DAG API but this time, we'll give it a path.
Task: Write a function that takes a commit by ID and returns the author of a commit's parent.
If you reach this point and have some extra time, try writing a function that, given a commit ID, finds the most frequent contributor. Good luck!
A few issues I ran into when trying in vain to solve blog lesson 7 (https://proto.school/#/blog/07). I'll need help better understanding some context here so I can then phrase instructions and tips more clearly to make this one easier.
When do you need your CID to be an instance and when don't you? I overused the new CID(...) that was suggested here in my first attempt, assuming it was necessary in places it wasn't. Are the things returned by ipfs.dag.put() already CID instances? Is doing the new CID thing the opposite of doing the someCid.toBaseEncodedString() thing? You have to do it to decode it?
It's unclear which things in this code block are meant to be written as is and which are meant to be replaced by some other value: let cid = new CID((await ipfs.dag.get(someCid)).value.linkName['/'])
I could tell, because of the "some," that someCid was meant to be replaced, but I didn't make that connection for linkName. I now believe you're supposed to replace this with the name you gave the object that contains an object in which the field name is '/' and the value is the someCid.toBaseEncodedString, which in this case would be prev. Maybe we should use fieldName or someLinkName or linkFieldName here? Or use coloring or wrap in <> symbols to highlight both of the segments you're supposed to replace (in which case we should do that throughout all lessons)? (Note that there's something related about naming of links at https://proto.school/#/blog/03 )
I think we should give a hint about using a while loop. IMHO, less experienced developers have more experience looping through arrays where they know how to judge the number of entries and less with figuring out how to make their loop stop itself by other means. Maybe be so explicit as to say something like:
Hint: How do you know when you're out of links? Try using a `while` loop and checking for the presence of a `prev` field in the current object. If it exists, you're not done yet, and you'll need to reset a variable and run the loop again.
I'd like people spending their time thinking about how to access the right part of the CID object via IPFS commands, not thinking about the logic of the code.
I only solved this by looking at the solution provided in the underlying code, and then I was a little confused by the difference between what's done here, where you take the value from the top level of the object and then dig into value.prev as opposed to what was taught in basics lesson 3 (https://proto.school/#/basics/03) where the implied structure for fetching this would have been ipfs.dag.get(cid, '/prev/'), in which the returnedvalue would be a string, not an object containing the prev field. Am I right to assume those are alternatives that should both work? If so, should we consider pointing out the two alternatives in that earlier lesson, or calling it out here with a link back to that lesson?
I was confused about why I didn't have to change return traversePosts near the end of the starter code to return traversePosts(<theLatestCid>). In function itself can't do anything without a cid passed in, and in the other exercises we've had to return something specific like that using variable names we established in the code. It seems like this exercise is built to return just the function itself to be tested. The instructions state that the traversePosts function should return an array of all the blog CIDs, but I'd recommend adding something like "There's no need to change the return value on line X to take an argument. Just ensure that, if an argument were passed into the function, the right array would be returned from your traversePosts function.
@olizilla @mikeal @vmx If any of you have suggestions before I try to clarify these instructions, they'd be appreciated. Thanks!
In lesson 3 of the blog series at https://proto.school/#/blog/03, Change Insert those new tag objects into IPLD via ipld.dag.put() and return the two resulting CIDs as array. to Insert those new tag objects into IPFS via ipfs.dag.put() and return the two resulting CIDs as an array.
ipld.dag.put() with ipfs.dag.put()How do I load modules in the code?
For #3 I need modules like Buffer, js-multihash and js-cids.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google โค๏ธ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.