Superbrowser - True User Agency in a Dweb World

--- title: Superbrowser - True User Agency in a Dweb World tags: Talk description: Learn what a browser could be if it put your values first. Learn about projects that are pushing on what a browser can be. Learn about approaches for building browsers that truly represent you. slideOptions: theme: white --- # Superbrowser - True User Agency in a Dweb World Note: * How to hack on this deck: https://hackmd.io/slide-example?both * Example slides all at end of this deck * Run presentation * To view as deck: https://hackmd.io/@dietrich/rkrZEKFRV#/ * Or: click the share button on top-right, select "Slides" view and click the "Preview" button * Themes * black (default), white, league, sky, beige, simple, serif, blood, night, moon, solarized ---  Note: * earth vs amoeba ---  Note: * background image: all the browser icons * The web is really big - ~4.5 billion pages * ~1.5 billion websites * Incredible success - largest public collection of human knowledge * And for 30 years browsers have been a client * we call this client the user-agent --- ## RFC 1945 - Hypertext Transfer Protocol -- HTTP/1.0 <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/16zN2L3.png"> Note: * what is a user agent? * it fetched web pages from a server * this was fine for a while * but problems crept up along the way ---  Note: * power imbalance: the server has all the power * client wants the old version of a page? too bad, we redesigned! * client tries to access a business critical service? too bad, Twitter bought it and shut it down * Two devices in the same room communicate through server. * Data surrendered to corporate silo & can only be accessed on **their terms** & via **their tools**. * turns out this "user agent" isn't. it's a dumb vehicle for what the *authority's agenda* * does it represent me? * User has no say in **which data** browser surrenders to **which servers**. * website goes offline * company goes out of business or bought * Tracking * Censorship * don't have full working source * Image credits: Thai government, Twitter, Pixabay, me --- <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/OqSiZMR.png"> Note: * background image: main browser icons * Which one of these implements ipfs? dat? blockchain natively? * While they are pushing the web forward in some ways * they are also gatekeepers ---  ## What if? Note: * What if we had web browsers that were reflection of our values * What are the trade-offs we would make if we could * Eg, we could all be collaborating right now even if this wifi not connected to the internet * Andrew from Textile mentioned yesterday about how all apps and services start to normalize to the lowest common denominator * Browsers are so important - the multi-app, the mega-app... * the *user agent* * it should be a reflection of you! What if your web browser truly reflected your values - advocating for you, and filtering for you, running as first-class nodes in distributed networks or even light clients? What if you could build your own dweb browser, or add dweb capabilities to an existing browser? Or what’s the closest we can get to a dweb experience in today’s browsers without any core changes at all? We’ll show examples of each of these approaches to making a browser truly an agent that represents you, and discuss the benefits and challenges of each. ---  <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://66.media.tumblr.com/b5bdf68b772376295f6a24f1841268d7/tumblr_n0ty84wTuq1sso6sco1_400.gif"> Note: * so what does that look like? * IPFS built in? * DAT? * mdns? * is it also a webserver? * Does it have bluetooth mesh networking? * image: https://dailycube.tumblr.com/post/76317534563/cube266-title-mario-question-cube-material ---  ## Dweb browser == Utopia!!! Note: So if we do this, our job is done? The web is perfect now, forever? --- # What do you give up? ---  Note: (photo of sticky note (sticked next to the previous sticky with a value) w/ example trade-off) ---  Note: (photo of sticky note (sticked next to the previous sticky with a value) w/ example trade-off) - Invite participants to stick their own trade-off notes next to the value stickies (does not have to be constaint for own sticky, in fact it's better if it's inviting perspective from others). --- # Examples and Pathways * Some new browsers... * Browser Extensions 💻 * Electron 💻 * Mozilla Reference Browser 📱 * React Native 📱 Note: * eg, SSB and Patchwork has values and trade-offs (eg: works like real life relationships, own your own data) ---  Note: * new browsers, experimenting --- # Browser Extensions 🚀 - Augment existing web 🕶 - Connect to local P2P node 🛰 - **"** Unlimited storage **"** 💾 - Offline first ✈️ --- # Patchfox * Offline-first secure decentralized gossip platform as a [Firefox Add-on](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions). * A local social network meets web browser. * Many apps, a single database on your machine. * [Patchfox](https://patchfox.org) as a bridge between [SSB](https://scuttlebutt.nz) and Web. Note: --- ## Libdweb Note: * Description: Turning Firefox into full-fledged node via experimental extension APIs. * Trainer: Irakli * Demo: * Show [dat-webext](https://github.com/cliqz-oss/dat-webext) example. * Show IPFS extension example (where can I get it ?) * Attendee should have: * Firefox Nightly * [web-ext](https://github.com/mozilla/web-ext) tool installed. * Workshop should provide: * [libdweb repo](https://github.com/mozilla/libdweb) * [Template repo](https://github.com/libdweb/template) * Presenter should have: * [dat-webext](https://github.com/cliqz-oss/dat-webext) * ipfs-companion with libdweb * dat-webext mobile --- <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/wS4jW1T.png"> --- <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/rG8TV3H.png"> --- ## Electron <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/a1CsDWG.png"> Building dweb-capable desktop browser-based applications. Note: * Whole browser or embedded web view * Bundle the dweb tool of your choice! --- <style> img { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/9iwm7kv.png"> Note: * Beaker browser --- <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/SXYlWnW.png"> Note: * Beaker showing me showing Cliqz --- <iframe src='https://gfycat.com/ifr/ThirstyScentedGoldfish' frameborder='0' scrolling='no' allowfullscreen width='640' height='945'></iframe> Note: * Frame gif --- ## Mozilla Reference Browser Note: * Description: Building mobile IPFS applications * Trainer: Dietrich * Demo: * Show dat mobile * Show Manyverse * Show Puma * Attendee should have: * * Workshop should provide: * Presenter should have: * TODO * gifs for each demo ---  Note: - android web components - for browsers or browser-like applications ---  Note: - led to reference browser ---  Note: - which combined with libdweb - to make Cliqz DAT browser ---  Note: - one line of code to bundle the extension! --- <style> .noborder { border: none !important; box-shadow: none !important; } </style> <img class="noborder" src="https://i.imgur.com/OqSiZMR.png"> Note: * background image: main browser icons * Which one of these implements ipfs? dat? blockchain natively? * While they are pushing the web forward in some ways * they are also gatekeepers ---  --- # is the era of the general purpose browser at an end?

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.