class: center, middle, agbg
# Agregore Workshop
Press
P
for speaker notes
??? Hello everybody, thank you so much for taking the time to attend this learning session about Agregore. I hope you're all having a great time at the hackathon and a good week in general. Today we're going to be making our first peer to peer website with Agregore. To do this we're going to be learn a bit about how peer to peer web stuff works, some basic HTML and CSS skills, and some Chrome Devtools skills for modifying stuff on our page. Then we're going to show off our websites to each other by sharing our links and if we have time, by embedding each others collages within each other. If you have any questions or get lost, feel free to post in the chat so we can make sure we're all in sync. Most of the stuff I'm going to say is going to be in the speaker notes of the slideshow which you can see by pressing "P" I'm also going to share a hackmd pad with some resourcs you can look at, which we'll also be using to share our websites with each other. Regardless of whether you're using the notes, I encourage you to follow along with the slides so you can copy and paste code snippets where appropriate and backtrack to previous slides if you need them. --- class: center, middle, purplebg # [@RangerMauve](https://twitter.com/RangerMauve) # [Mauve](https://ranger.mauve.moe/) # [Mauve Software Inc.](https://software.mauve.moe/) ??? I'm Mauve, or @RangerMauve. I do consulting through my company Mauve Software Inc. And I'm high key obsessed with peer to peer and local first software --- class: middle ### How The P2P Web Works - No servers 🚫🖥 - Just Files 📄 - Person To Person 🤝 - Offline + Local Networks 🌐 ??? Before we get into Agregore, lets take a quick overview of how the peer to peer web works. Unlike the regular web, the Peer to Peer web doesn't use any central servers to distribute content. Content on the peer to peer web, is just files and doesn't have any fancy backends rendering it on the fly. Instead of having these files served from a central location, they're exchanged person to person. And unlike regular web apps, everything works offline by default and works over local networks without needing to use the internet. This means that if I'm camping in the woods, I can share a picture or an entire app with a friend if we both connect to an access point. Let's look at a couple of protocls that I feel are the furthest along. --- class: center, middle, ipfsbg
## IPFS ??? IPFS is probably the one we're most familiar with here. It's really good for data that gets reused a lot between websites and doesn't change too often. This is because it is content addressible and content is deduplicated across all peers on the network, and is immutable. Sadly, this means that it's not as good for mutable content, and data shared over IPFS is basically public unless you encrypt it. --- class: center, middle, datbg
## Hypercore Protocol ??? Another protocol I like to use is the Hypercore Protocol. Unlike IPFS it's not immutable or content addressible and instead uses public/private keypairs to identify groups of files. It's good for data that changes more often and is private by default. However it's not as good for deduplicating content, and the ecosystem is lacking useful tools like Pinata and Filecoin for keeping data online. For todays session I'm going to focus on Hyper since it'll make updating files a bit easier, but a lot of the APIs we're going to use are the same. The easiest way to interact with these protocols, in my opinion, is with a web browser that supports them out of the box. --- class: center, middle, agbg ### Setting up Agregore ## [Download](https://github.com/AgregoreWeb/agregore-browser/releases) ??? The browser that we'll be using for this session is called Agregore. 😁 Agregore lets you talk to different P2P protocols using custom protocol schemes and `GET/POST` methods using the browser's `fetch()` API. For those that have done web development stuff in the past and have talked to HTTP servers, the transition to P2P should be pretty smooth. It's available for the major Desktop operating systems like Windows, MacOS, and Linux. First, we'll want to go to the [Releases](https://github.com/AgregoreWeb/agregore-browser/releases) page and download the installer that makes sense for your platform. You can see all the files in the "Assets" section of the latest release. The exe works on Windows, the DMG file works on Mac OS, and for Linux you can choose betewen Deb or AppImage. I encourage you to install these now while I keep going over some of the other groundwork. If you have questions about installing feel free to post the in the chat, if anybody in the chat knows thhe answer I welcome you to answer, else I'll try to keep track and answer them as well. --- class: center, middle, datbg ### 📄 HTML and CSS Basics ✨ ??? All websites are made out of three basic parts. HTML for the general strucutre and the text content, CSS for styling that structure, and JavaScript for making websites interactive. However, JavaScript is mostly optional if you just want to put something static on the web, so we'll mostly gloss over it. HTML is actually all you need for basic documents where you just want to shove some text on a page. I'm going to go over some examples of HTML snippets and explain the different parts. Don't worry about running these anywhere yet, it's mostly to give you a feel for them. --- class: center, middle, agbg ## 📄 HTML 📄 ```html
Hello MozFest!
Weeeeeeeeeeeeeee
``` ??? So here's an example HTML page. All web pages are actually text files which people can read and write normally but which the web browser can interpret to build up what you see on the screen. Let's go over it line by line. The first line is what's called the "Doctype" this used to a super complex string of text to identify what web features the browser wants to enable. Luckily, to use the latest and greatest web features, all we need to do is type `` and stop worrying about it. Next we have, what in my opinion is the most important part of a document: The title. Lets also talk about the greater than and less than signs here. These are what's called "HTML tags". It's a less than sign, a tag name (and some optional "attributes" which we'll get into later), and a greater than sign. This tells the browser to create the "element" on the screen that coresponds to that tag name. The browser comes with a bunch of built in tag names that do different things. A large chunk of them actually do the same thing visually, but have different meanings to screen readers and the such. In this case, the `title` element is telling the browser that the title of this page is `"Hello MozFest"`. Note that this tag is more of an instruction to the browser to change some metadata rather than to display something on the screen. I think that titles are super imortant because that's what you can use to go through the history of web pages you've visted before as well as differentiate between the pages you have open on your computer more easily. Next we have an HTML tag telling the browser to create a "Level one header". This is usually used to mark the main heading on a web page and is useful for screen readers to get info about what your page is about. Unlike the title tag, this will actually put something on the page itself. --- class: center, middle, agbg ## ✨ CSS ✨ ```html
Red Square
This is a red square
``` ??? So now lets learn a bit about CSS and how to style stuff. First, lets' check out line 3 where we're defining a `div` tag. These are general containers that don't really display anything special. In addition to the tag name, we added an `attribute` called `style` which contains the CSS to style this element. CSS styles contain pairs of style names and style values separated by a colon and followed by a semicolon. The colon and semicolon are important for the browser to understand what you want so check for them if your styles don't work. The `position: fixed;` tells the browser that this element should be placed relative to the window regardless of what other stuff is on the screen. The `top` and `left` styles tell you how far from the top and from the left the div should be placed. `vmin` in a size which means `a percentage of either the widht or height of the screen depending on which is smaller` You could also use `vw` for `percentage of the width`, `vh` for percentage of the `height` and `vmax` for the `maximum between width and height`. Next we set the `height` and `width` to be 80% of vmin. And finally we say that the background of this div should be red. There's more to CSS, but this is the basics of what we'll actually be using. --- class: middle, purplebg ### Q&A so far - Questions about HTML tags? - Questions about style? - Stuff I didn't think of? ??? Check that everyone has Agregore installed --- class: center, middle, agbg ## 👀 Making our website 👀 ## [hyper://blog/](hyper://blog/) ??? Cool, so now lets make our peer to peer website. Making a new p2p website is super simple in Agregore. Open up a new window in Agregore and navigate to `hyper://collage` Whenever you want to make a new p2p website, use the `hyper://` protocol, and make up a name for it that uses lowercase letters with no spaces. This will use a secret key on your computer to derive a new URL. Even if two people use the same name, they'll be generating a website that's unique to them. Next, let's look at Chrome DevTools and see how we can resolve our website name to a link that people can actually load. --- class: middle, purplebg ## ⚙️ DevTools ⚙️ - `ctrl+shift+I` - `Right Click > Insepect Element` - `Alt > File > Open Dev Tools` ??? Press `Ctrl+Shift+I` on your keyboard to open up the devtools and resize your window until it's feeling fomfortable. Alternately you can right click the page and press `Inspect Element`, or hit `alt` to open up the application menu, and navigate to `File > Open Dev Tools`. Just gonna give it a second for everybody to get theirs open, feel free to comment if you're having any trouble. These tools come bundled with every web browser and they let you inspect and modify anything on a page, live. We're going to be using this to execute some JavaScript and to mess with the styles directly. --- class: middle ### Loading a file ⬇️ ```JavaScript const blogResponse = await fetch('hyper://blog.mauve.moe/index.html') console.log(await blogResponse.text()) ``` ??? Before we get to the workshop scripts, lets see how to use the fetch API to interact with Agregore. Press Ctrl+Shift+I to open up the devtools, and then try copy-pasting the text on this slide into your console and pressing `enter` to execute it. You should see the contents of my blog's homepage show up. What this is doing is loading the `index.html` file from my blog using Agregore's protocol handlers, and returning the text to the JavaScript console. --- class: middle, agbg ### Uploading a file ⬆️ ```JavaScript await fetch('hyper://blog/index.html', { method: 'PUT', body: `
My Blog
Hello World, this is my blog!
` }) ``` ??? And here is how we can upload a new homepage for our blog. Notice that we pass the URL of the file we wish to create to fetch, set the method to PUT (the default was GET), and set the body to some text. Before you run this code yourself, I suggest changing the title from My Blog, to something that reflects what you want your blog to be. The Script element is there to add some helper functions to the page and add drag and drop uploads in order to make our life a little easier. You might also want to modify the text within the `
` tags as a greeting for folks. If you ever want to start from scratch, you can execute this command from your console history to reset stuff back. After you've executed the command, refresh the page and you should see your new content appear! --- class: center, middle, datbg ## 🖼 Adding images 🖼 ## [GifCities](https://gifcities.org/) ??? Now that we have a basic page, lets spice it up with some gifs! We're going to be using the Internet Archive's [GifCities](https://gifcities.org/) website to find some fancy gifs to express ourselves. I'm going to quickly show you how to add an image and position it, and then we'll take a few minutes to work on our collages and then share with each other. So first I'm going to find an image, and drag it over to a folder on my computer to download it. Next I'm going to open up my website, and drag the image into it. The helper scripts I showed before are listening for drag and drop events, and are doing that fetch request above to upload the image, and are then going to add the image to your page. You should see some output in the console with progress on file uploads. Now, if we refresh, we'll see that the image has been added to our page. Any questions so far? Anybody having trouble getting stuff to work? Lets try dragging a few images to work with, and then we can look at where they're stored and how to style them. --- class: center, middle ## 📁 Assets: ## [hyper://blog/assets/](hyper://blog/assets/) ??? As I mentioned before, the helper scripts are automatically uploading any files you drop on the page Specifically, they're uploading them to a folder called assets, so if you want to replace an existing image, use the same name and it'll overwrite the old one. --- class: center, middle, agbg ## 📏 Resizing images 📏 ```css element.style { width: 50vw; } ``` ??? So after we've added some images that we like on the page, lets use the devtools to position them around the screen. Lets learn some tricks for styling them. First we're going to make this image fill half the screen. Right click the image, and click `Inspect Element` which will open up the devtools and let us modify it's style. I'm going to change the width to be `50vw` and we can see that it scales up, and in the Elements view we can see that it has a new attribute called "style" with the style we just set added onto it. However, if I refresh the page, it'll load original page content and we'll lose our styling. In order to persist the changes to the style, we'll want to invoke the `save()` function. --- class: center, middle, agbg ## 💾 Saving 💾 ```JavaScript await save() ``` ??? This will take the HTML currently on the page, and update your `index.html` file to have it's contents. Since the Devtools Inspect Element feature lets us modify the HTML directly, we can do most of our work there, and save it without needing to think too much about At this point I encourage you to start adding images and using the CSS we saw earlier for the red box example to position your elements while I go over some more tricks. Don't forget to save your progress so you don't lose your work! At this point, people that have messed with CSS and HTML before can tune me out and mess around more. Now let's try playing with positioning. --- class: center, middle, agbg ## 📌 Fixed Positioning 📌 ```css element.style { position: fixed; top: 1vmin; bottom: 1vmin; left: 1vmin; } ``` ??? This will position the image to stretch the page on the left side from the top to bottom. You can mess around with this by getting rid of either top or bottom to move it to one of the corners of the page. You can also increase or decrease the values in order to move it across the page --- class: center, middle, agbg ## 📐 Fit To Fixed Box 📐 ```css element.style { position: fixed; width: 50vw; height: 50vh; top: 25vh; bottom: 25vh; left: 25vw; right: 25vw; object-fit: contain; } ``` ??? Here we say we want the image to take 50% of the width and height, and for it's sides to be 25% from the outside of the page, effectively centering it. The `object-fit` property here tells the browser to preserve the aspect ratio of our gif so that it doesn't get stretched. --- class: center, middle, datbg ### Q&A - Positioning ❓ ??? Alright, with that in mind, lets see if we can help folks in the chat. --- class: middle, purplebg ### Getting Our Public URL - Press `ctrl+shift+i` - Run `await getPublicURL()` in the Console tab OR - Open the `Network` tab - Reload the page - Find the `document` request - Check the `link` response header ??? Now that we've had some time to work on our websites, lets look at how we can get the public URL for our website. Open up `Chrome Devtools` with `ctrl+shift+i` Next, you can run the helper function `getPublicURL` in order to get the public URL. Alternately you can go to the `network` tab and reload the page This shows you all the data that's been loaded or uploaded by the page Click on the `type` column to sort by request type. Now find the type that says `document` and click on it Next find the `Response Headers` section and find the one that says `link` In there you should see the public URL for your website, and in fact you can load that up now and keep working on it. --- class: center, middle, datbg ## ✨🎉 Showcase 🎉✨ ??? Sweet, would anybody like to share theirs in the chat? You could either share it and talk about it, or I could just load it on the screen for everyone to see. Wow cool, neto, ha ha, snap! --- class: center, middle, agbg ## 🤔 Take-aways 🤔 ??? I hope this was a fun introduction to the peer to peer web and making your own things. I'd love it if people could tweet their URLs which I can add to my "super peer" which can keep them online for you. If you're interested in digging in deeper, I suggest looking at the `helpers.js` function in this workshop to see how stuff works, or reading the docs for Agregore on it's website. I hope that this will inspire some folks to try to make stuff and to think about alternative ways we can interact with the web that's more local, more resiliant, and more accessible. Thank you. --- class: center, middle, purplebg # 🙇 Thank you! 🙇