<!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="w3.css" /> <link rel="stylesheet" href="fontawesome.min.css" /> <link rel="stylesheet" href="regular.min.css" /> <link rel="stylesheet" href="solid.min.css" /> <link rel="stylesheet" href="brands.min.css" /> <style> body, h1, h2, h3, h4, h5 { font-family: 'Poppins', sans-serif; } body { font-size: 16px; } img { margin-bottom: -8px; } .mySlides { display: none; } </style> <base target="_top" /> </head> <body class="w3-content w3-black" style="max-width: 1500px"> <!-- The App Section --> <div class="w3-padding-64 w3-white"> <div class="w3-row-padding"> <div class="w3-col l8 m6 w3-padding-32"> <h1 class="w3-jumbo"> <b>😎 Tilde Friends</b> </h1> <h1 class="w3-xxlarge w3-text-green"> <b>Make apps and friends from the comfort of your web browser.</b> </h1> <p> Tilde Friends is a platform for building, running, and sharing web applications. </p> <p> Available for lots of devices: <i class="fa-brands fa-linux w3-xlarge"></i> <i class="fa-brands fa-android w3-xlarge"></i> <i class="fa-brands fa-apple w3-xlarge"></i> <i class="fa fa-mobile-screen w3-xlarge"></i> <i class="fa-brands fa-windows w3-xlarge"></i> </p> <a class="w3-button w3-black w3-padding-large" href="https://dev.tildefriends.net/cory/tildefriends/releases" ><i class="fa fa-download"></i> Download</a > <a class="w3-button w3-black w3-padding-large" href="https://www.tildefriends.net/~cory/apps/" ><i class="fa fa-link"></i> Try It</a > <a class="w3-button w3-black w3-padding-large" href="https://dev.tildefriends.net/" ><i class="fa fa-mug-hot"></i> Code</a > </div> <div class="w3-col l4 m6"> <img src="tildefriends.png" class="w3-image w3-right w3-hide-small" /> </div> </div> </div> <!-- Getting Starting Section --> <div class="w3-indigo w3-center"> <div class="w3-row-padding w3-padding-64"> <div class="w3-jumbo"> <i class="fa fa-rocket"></i> <b>Getting Started</b> </div> <div> <h2>First-time user checklist:</h2> <ol type="1" style="text-align: left"> <li> <a href="https://dev.tildefriends.net/cory/tildefriends/releases" >Download</a > Tilde Friends and run your own instance, or use <a href="https://www.tildefriends.net/" >https://www.tildefriends.net/</a >. </li> <li> Create an account to identify yourself with that instance by username and password. </li> <li> Create an SSB identity in the <b>ssb</b> app. This will generate a keypair used to identify yourself to other users and sign your messages so that they can be verified as from you. </li> <li> Describe yourself in your profile in the <b>ssb</b> app. Give yourself a name and an avatar if you like. </li> <li> Connect to others. You will automatically discover peers on the same instance and same network if there are any. Or use <a href="https://github.com/staltz/ssb-room/blob/master/FAQ.md" >rooms</a > and pubs to reach more distant users. <a href="https://www.tildefriends.net/~cory/room/" >tildefriends.net itself</a > operates as a room, so you can connect and see who else is online and establish a connection. </li> <li>Follow people to grow your network.</li> <li> Use the <b>edit</b> link at the top of any page to start modifying and making apps. </li> </ol> </div> </div> </div> <!-- SSB Section --> <div class="w3-light-grey"> <div class="w3-row-padding w3-padding-64"> <div class="w3-col l4 m6 s4"> <a href="https://scuttlebutt.nz/" ><img class="w3-image w3-round-large" src="ssb.png" alt="Secure Scuttlebutt" /></a> </div> <div class="w3-col l8 m6" style="height: auto"> <h1 class="w3-jumbo"><b>Built for Sharing</b></h1> <p> Tilde Friends participates in the <a href="https://scuttlebutt.nz/">Secure Scuttlebutt</a> distributed social network. </p> <p> Share apps with friends. Discover new apps made by enemies. Post pictures of your coffee. Or just lurk. </p> <p> The social network integration provides tools for connecting with other people world-wide while still allowing apps and everything to operate offline. </p> </div> </div> </div> <!-- Editor Section --> <div class="w3-container w3-padding-64 w3-light-blue"> <div class="w3-row-padding"> <div class="w3-col l8 m6"> <h1 class="w3-jumbo"><b>Edit Anything</b></h1> <i class="fa fa-pen-to-square w3-left w3-jumbo w3-text-gray" style="padding: 32px" ></i> <p> See that <code><b>edit</b></code> link near the top left corner of this page? It's there for every Tilde Friends app, so you can modify and see your changes right away. </p> <p>It's kind of like a wiki, but for code!</p> </div> </div> </div> <!-- Sandbox Section --> <div class="w3-padding-64 w3-grey"> <div class="w3-row-padding"> <div class="w3-col"> <h1 class="w3-jumbo" style="text-align: right"> <b>Sandbox Security</b> </h1> <i class="fa fa-road-barrier w3-right w3-jumbo w3-text-yellow" style="padding: 32px" ></i> <p> Tilde Friends tries to make sure apps can be trusted using similar techniques to how web browsers and operating systems do it. </p> <p> This is all a work in progress, and it varies by platform, so don't give it all your innermost secrets yet, but do kick its tires and <a href="mailto:cory@tildefriends.net">share</a> any surprises you find. </p> </div> </div> </div> <!-- Technlology Section --> <div class="w3-container w3-padding-64 w3-light-grey w3-center"> <h1 class="w3-jumbo"><b>Trusted Technology</b></h1> <p>Tilde Friends is built using boring, trusted tech.</p> <p> Though of course for building Tilde Friends apps, you are free to use whatever fits. </p> <div class="w3-row" style="margin-top: 64px"> <a href="https://en.wikipedia.org/wiki/C_(programming_language)" class="w3-col s3" > <i class="fa fa-c w3-text-blue w3-jumbo"></i> <p>C</p> </a> <a href="https://bellard.org/quickjs/" class="w3-col s3"> <i class="fa-brands fa-js w3-text-orange w3-jumbo"></i> <p>QuickJS</p> </a> <a href="https://www.sqlite.org/" class="w3-col s3"> <i class="fa fa-database w3-text-red w3-jumbo"></i> <p>SQLite</p> </a> <a href="https://github.com/libuv/libuv" class="w3-col s3"> <i class="fa fa-bolt w3-text-yellow w3-jumbo"></i> <p>libuv</p> </a> </div> <div class="w3-row" style="margin-top: 64px"> <a href="https://www.zlib.net/" class="w3-col s3"> <i class="fa fa-file-zipper w3-text-cyan w3-jumbo"></i> <p>zlib</p> </a> <a href="https://doc.libsodium.org/" class="w3-col s3"> <i class="fa fa-lock w3-text-purple w3-jumbo"></i> <p>libsodium</p> </a> <a href="https://www.openssl.org/" class="w3-col s3"> <i class="fa fa-shield-halved w3-text-green w3-jumbo"></i> <p>OpenSSL</p> </a> <a href="https://github.com/ianlancetaylor/libbacktrace" class="w3-col s3" > <i class="fa fa-burst w3-text-pink w3-jumbo"></i> <p>libbacktrace</p> </a> </div> <div class="w3-row" style="margin-top: 64px"> <a href="https://codemirror.net/docs/changelog/" class="w3-col s3"> <i class="fa fa-keyboard w3-text-indigo w3-jumbo"></i> <p>CodeMirror</p> </a> <a href="https://github.com/jlfwong/speedscope/" class="w3-col s3"> <i class="fa fa-microscope w3-text-orange w3-jumbo"></i> <p>Speedscope</p> </a> <a href="https://github.com/lit/lit/" class="w3-col s3"> <i class="fa fa-fire w3-text-cyan w3-jumbo"></i> <p>Lit</p> </a> <a href="https://www.gnu.org/software/make/" class="w3-col s3"> <i class="fa fa-hammer w3-text-teal w3-jumbo"></i> <p>GNU Make</p> </a> </div> </div> <!-- Footer --> <footer class="w3-container w3-padding-32 w3-blue-grey w3-center w3-xlarge"> <p class="w3-medium"> This page and Tilde Friends itself was made by Cory mostly in coffee shops and a local pizza place. </p> </footer> </body> </html>