Skip to content

Latest commit

 

History

History
247 lines (173 loc) · 10.4 KB

5-Web3.md

File metadata and controls

247 lines (173 loc) · 10.4 KB

LiaScript

Browser-based Sharing & Connecting

<iframe src="https://giphy.com/embed/xThuW7icYBlQZxjnyg" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>

via GIPHY

Peer-To-Peer in da Browser

{{1-2}}

    👨🏾‍💻 --.     .-- 👩‍💻
          \   /

👩‍💻 ------  🖥️  ------ 👨🏾‍💻

          /   \
    👨🏾‍💻 --'     '-- 👩‍💻

{{2}}

- - - --👨🏾‍💻-----👩‍💻
              /  \
             /    \
    👩‍💻------+-----👨🏾‍💻- - -
      \    /      /
       \  /      /
        👨🏾‍💻     👩‍💻- - - -

Sharing/Storing Content

{{1}}

Burning library of Alexandria

Data-Protocol

{{0-3}}

Data URLs allow for the inclusion of small data items directly within web addresses by encoding the data as a string. This method eliminates the need for external file sources and reduces the number of HTTP requests, potentially speeding up web page load times. The format for a Data URL starts with 'data:', followed by a MIME type and the data itself, usually encoded in Base64. For example, an image can be embedded directly into an HTML document using a Data URL like this:

data:[<mediatype>][;base64],<data>

This is particularly useful for embedding small images or documents but should be used judiciously due to its impact on page size and browser performance.

Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs

{{1-3}}

<img src="data:image/jpeg;base64,
/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
////////////////////////////////////////////////////////////wAARCAAYAEADAREA
AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k=">

{{2-3}}


{{3}}

Can it be used for more?

Tor & Onion-Share

The Tor Network is a system that allows users to anonymize their online activities and identity by routing their traffic through multiple servers to conceal the source of the data. The network consists of thousands of volunteer servers around the world that act as "nodes" and encrypt the traffic to protect users' privacy.

                    {{0-1}}

Internet censorship

                    {{1-2}}

Taliban

{{2}}

Tor Browser: For anonymous browsing

  • Download & Install: https://www.torproject.org/download/

  • Disable private browsing to enable IndexedDB for caching LiaScript courses:

    Settings >> Privacy & Security >> History >> Always use private browsing mode (disable)

  • Enable CORS:

    Settings >> Extensions & Themes >> Search for "CORS Unblock" >> Click on "CORS Unblock" >> Install (Add to Firefox)

    If you have disabled private browsing mode, enable "CORS Unblock".

    Otherwise, enable the plugin first to be used in private mode: Settings >> Extensions & Themes >> "CORS Unblock" >> Run in Private Windows (Allow)

    Activate CORS Unblock

OnionShare for anonymous hosting and sharing

  • Download & Install: https://onionshare.org
  • Open and "Connect to Tor"
  • Share data: Start Hosting >> Add Files or Add Folder >> Start sharing
  • Send the Onion-Address and the Private-Key to your students
  • Open the Onion-Address within the Tor-Browser, enter the private key and select "Remember this key"
  • Open the README.md of the course and copy this URL
  • Goto https://LiaScript.github.io and paste this URL "click on Load URL"

IPFS & IPNS

The __I__nter__P__lanetary __F__ile __S__ystem (IPFS) is a protocol, hypermedia and file sharing peer-to-peer network for storing and sharing data in a distributed file system ... supported by Opera, Brave-Browser, Agregore, and more to come

https://ipfs.tech

IPFS logo

WebTorrent

WebTorrent is a peer-to-peer (P2P) streaming torrent client written in JavaScript, from the same author, Feross Aboukhadijeh, of YouTube Instant, and the team at WebTorrent and on GitHub, for use in web browsers, as well as a WebTorrent Desktop stand alone version able to bridge WebTorrent and BitTorrent serverless networks.

Source: Wikipedia

Try it on: https://instant.io

Connecting Users

<iframe src="https://giphy.com/embed/SPZFhfUJjsJO0" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>

via GIPHY

WebRTC

The Web Real-Time Communication is a free and open-source project providing web browsers and mobile applications with real-time communication (RTC) via application programming interfaces (APIs). It allows audio and video communication to work inside web pages by allowing direct peer-to-peer communication, eliminating the need to install plugins or download native apps...

Source: Wikpedia

{{0-1}}

                     (WebRTC)
Alice 👩‍💻 <------------------------------> 👨🏾‍💻 Bob

{{1}}

               (Signaling Server)

       .-------------> 🖥️ --------------.
       |    "{1}{}"   /  A      "{2}{}" |
       |             /    \             |
       |            /      \            V
                   /        \
Alice 👩‍💻 <--------'          '--------- 👨🏾‍💻 Bob
            "{4}{}"             "{3}{}"
      A                                  A
      |                                  |
      '----------------------------------'
      A    "{5}{Direct Communication}"   A
      |                                  |
      '-- - - - - - - - - - - - - - - - -'
             "{6}{InDirect via TURN}"

{{7}}

More confusing information on WebRTC:

!?WebRTC

CRDTs

A Conflict-free Replicated Data Type (CRDT) is a new type of data structure1 that can be replicated across multiple instances in a network with the following guarantees:

{{1}}

  1. A replica can be updated independently, concurrently and without coordinating with other replicas.

  2. Inconsistencies can be resolved automatically.

  3. Although replicas may have different state, they are guaranteed to eventually converge.

    {{2}} Task: Implement an distributed counter

    {{3}}

Alice 👩‍💻

[0]---------*-->[5]--[+1 = 6]--------*-->[8]-- - - - - - - - - - - - 
           /            \           /          \
          A              V         A            \
         /                        /              \
[0]---[+5 = 5]-----------------[+2 = 7]-- - - - --*- - - - - - - - - -

Bob 👨🏾‍💻

{{4}}

Solution: Use Sets and Unions instead...

{{5}}

Alice 👩‍💻

{(a,0)}----------*-->{(a,0),(b,5)}->{(a,1),(b,5)}---*-->{(a,1),(b,7)}
                /                         \        /   
               A                           V      A   
              /                                  /
{(b,0)}---{(b,5)}----------------------------{(b,7)}-----------------

Bob 👨🏾‍💻

{{6}}

__ Implementations__

Try it Out

...

Footnotes

  1. The CRDT concept was defined in 2011 by Marc Shapiro, Nuno Preguiça, Carlos Baquero and Marek Zawirski.

    See also: https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type ↩