kcl-digital-humanities-garden/beaker-browser.html

117 lines
16 KiB
HTML
Raw Normal View History

<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Beaker Browser 🌱 Digital Garden</title>
<meta name="description" content="Beaker uses a peer-to-peer protocol called Hypercore, or Hyper for short. “Hyperdrives” are like websites. They store webpages, pictures, media, user data, and so on. Hyperdrives power a lot of Bea...">
<link rel="stylesheet" href="/assets/css/style.css?1621296745771306036"><link type="application/atom+xml" rel="alternate" href="https://digitalgarden.hypha.coop/feed.xml" /></head><body class="foreground-text sans-serif bg-background"><header id="header" class="f5 pa3 flex bb b--foreground-text bg-background justify-between sticky top-0 w-100 items-baseline z-3"><div class="flex items-baseline">
<svg class="w1 mr2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.11 219.53"><path fill="currentColor" d="M243.11 64.85q0 11.66-1.12 15.72-.42 1.43-6.31 14.43-6.18-.14-12.5-.42-8.15-.42-11.79-2.39-2.94-1.55-9.82-9.54a129 129 0 0 1-8.71-11.23q-3.23-6.75-10.1-20.22-3.66-6.73-13.9-21a95.7 95.7 0 0 0-15.44-1.26q-4.77 0-13.76 11.79a99.49 99.49 0 0 0-10.8 16.56Q127 60.92 123.24 71q-4.35 11.35-4.35 13.33v135.2h-7.58V75.8a44.51 44.51 0 0 0-1.82-11.09q-2.11-7.57-4.64-10-4.62-4.49-18.95-4.49-2.39 0-7.79 5.62t-6.52 8.42q-4.64 11-6.18 34-1.55 23.58-5.61 34.25-1.12 2.94-8.71 11.37a107.26 107.26 0 0 1-10.52 10.52q-2 1.69-18.67 10.53-8.43-14-16.71-28.21Q0 125.35 0 103.73q0-15.58 2.39-24.42 7.16-26.67 15.16-36.08 6.16-7.29 22.88-14A64.23 64.23 0 0 1 64.57 24 94.86 94.86 0 0 1 79 25.69q10.38 1.81 14 3.51 6.31 2.81 14 12.7t9.4 16.77q.42 1.69 1.13 6.88 1.26-5.47 4.21-16.14 2.23-4.92 6.74-14.88A117.39 117.39 0 0 1 135 20.35q7.31-10.67 27.23-16.84A77.2 77.2 0 0 1 185.14 0q13.34 0 19.94 1.82 25.39 7.17 34.81 35 3.23 9.64 3.22 28.03zm-139-16.42q-4.22-4.77-14.32-12.08-8.79-4.07-25.22-4.07-10 0-21.9 4.64T23.58 48.29q-2 1.82-8.77 19.58T8 88.71q0 2.54-.14 7.72t-.14 7.72q0 15.72 2.11 23.44a51.07 51.07 0 0 0 6.87 13.9q8.15 12.36 8.57 13 3.64-1.81 10.52-6.17 2.53-2 9.27-9.48t7.58-9.61q4.48-10.95 5.89-34.67t5.9-34.67q2.1-5.34 8.14-10.25L83 41.55zm131.42 19.09V55.73q0-10-2.1-16.15A49.06 49.06 0 0 0 221.5 20.7a40.61 40.61 0 0 0-18.67-11.16q-7.16-1.81-21.62-1.82-7.44 0-22 5.47Q144 19 140 24.14q-1.41 1.83-5.62 13.48 5.61-4.92 16.7-14.74h22.18q4.92 6.32 13.9 19.65 4.06 9 13.47 26.25 8.56 12.91 14.18 15.72a26.21 26.21 0 0 0 11.6 2.5l4.91-.14a47.55 47.55 0 0 0 4.21-19.34z"/></svg>
<a class="no-underline f4 foreground-text anthony mr3" rel="author" href="/">Digital Garden</a>
<div id="gardenConditions" class="br-pill code f7 ba pv2 ph3 dn"></div>
</div><nav class="f7 code flex"><a class="no-underline foreground-text underline-hover" href="/colophon/">Colophon</a><a class="no-underline foreground-text ml3 underline-hover" href="/feed.xml">RSS Feed</a>
<a class="no-underline foreground-text ml3 underline-hover" href="https://github.com/hyphacoop/digitalgarden">View Garden Source</a>
</nav></header><main class="links-foreground-text" aria-label="Content">
<div class="flex">
<article id="note-container" class="w-50 pa3 pr0 relative z-1">
<div class="container bg-white min-vh-100-header-comp pa3 br4 flex flex-column justify-between">
<header>
<div class="note-meta flex f7 lh-copy justify-between code items-center" data-status="🌱">
<time class="ml3 flex-auto" datetime="2021-04-18T00:00:00+00:00">
Created <br> April 18, 2021
</time>
<time datetime="2021-05-18T00:12:00+00:00">
Last updated <br> May 18, 2021
</time>
</div>
<h1 class="note-title normal relative work-sans-light f-5 mb4 lh-solid">Beaker Browser</h1>
</header>
<div id="notes-entry-container" class="flex-auto">
<div class="note-contents f5 lh-copy">
<p><img src="assets/images/beaker-browser.png" alt="Beaker browser 1.0 screenshot" /></p>
<p>Beaker uses a <a class="internal-link" href="/peer-to-peer">peer-to-peer</a> <a class="internal-link" href="/protocol">protocol</a> called <a class="internal-link" href="/hypercore">Hypercore</a>, or Hyper for short. “Hyperdrives” are like websites. They store webpages, pictures, media, user data, and so on. Hyperdrives power a lot of Beakers best features.</p>
<p>“Hyperdrives” are folders you host from your computer. They contain web pages which you can browse and edit. You can create and share hyperdrives using Beaker. <a href="https://docs.beakerbrowser.com/beginner/creating-new-hyperdrives">Learn more</a>.</p>
<h2 id="why-is-beaker-different">Why is Beaker different?</h2>
<p>Beaker is built with Chromium and should feel exactly like any other <a class="internal-link" href="/web-browser">Web browser</a>. The big difference: Beaker can host websites.</p>
<p>Hosting a website is traditionally done by “servers” which are specialized computers in the cloud. Servers require a variety of skills to run, and while there are some great services out there to make it easier, we wanted to try something new. We figured, what if anybody could host a website from their laptop?</p>
<p>We call those self-hosted sites “Hyperdrives.”</p>
<ul>
<li>“Hyper” because theyre kind of magical, and</li>
<li>“Drives” because theyre collections of files.</li>
<li>Its not just a harddrive, its a Hyperdrive!</li>
</ul>
<p>You can create a Hyperdrive from Beaker, add your websites HTML, and then share the Hyperdrive link with any other Beaker user. Their computer will connect directly to yours, as if you were running a server up in the cloud.</p>
<h2 id="what-does-beaker-do-better-than-other-browsers">What does Beaker do better than other browsers?</h2>
<p>Beaker makes building a Website weirdly easy. We have a builtin editor, tools to sync folders with your website, and some pretty fun APIs for reading and writing the files in your website.</p>
<p>If youre a teacher in a digital classroom, especially if youre teaching web development, Beaker is really handy. Your students dont need to learn Git, the commandline, or any other piece of server administration. They can download Beaker and get straight into the business of building Websites.</p>
<p>Dev teams may also find Beaker handy for working on site prototypes. All you have to do is load the prototype into Beaker and share the hyper:// link around the office. If somebody wants to make a change, they can fork the site and share their version back.</p>
<p>Beaker takes the drudge work out of hosting sites.</p>
</div>
</div>
<aside class="bt b--background bw1 nl3 nr3 ph3 mt5">
<h2 class="normal f1 mv4 work-sans-light">Notes mentioning this note</h2>
<div class="flex flex-wrap">
<div class="w-50 flex">
<div class="shadow-solid-accent mb2 mr2 br4 pa3 flex flex-column">
<h3 class="mt0 f5 mb2"><a class="internal-link" href="/unwalled-garden">Unwalled Garden</a></h3>
<div class="f7 lh-copy mb3 flex-auto">An open protocol for building social Web applications. Part of the Beaker browser project. Unwalled.Garden is a kind of “Souped...</div>
<div class="f7 light-silver">/unwalled-garden</div>
</div>
</div>
</div>
</aside>
</div>
<button id="note-expand" class="absolute top-1 pointer nr4 mt3 right-0 bg-background button-reset bn foreground-text "></button>
</article>
<div class="fixed top-0 right-0 w-50 vh-100">
<div id="graph-wrapper" class="relative vh-100 code f6">
<script>
window.graphData = {"edges":[{"source":"229320080329284392969231993","target":"24831158218"},{"source":"135879330265212010996","target":"139376232583985260057851086495"},{"source":"229320080329284392969231993","target":"139376232583985260057851086495"},{"source":"135879330265212010996","target":"1277273995756"},{"source":"5230685265404876707487","target":"54003532995853691859"},{"source":"2455193638329872464","target":"14857"},{"source":"2455193638329872464","target":"81503731614520238"},{"source":"229320080329284392969231993","target":"81503731614520238"},{"source":"135879330265212010996","target":"77892520190575378197742"},{"source":"36028","target":"2196179318535330915"},{"source":"10350806862423255528305849282803523","target":"5679146086184365833430073"},{"source":"26909959832378248029278884281720415842791882","target":"5679146086184365833430073"},{"source":"229320080329284392969231993","target":"584278"},{"source":"135879330265212010996","target":"1351050207728787"},{"source":"135879330265212010996","target":"12537461525184510083948912143790305013277"},{"source":"229320080329284392969231993","target":"12537461525184510083948912143790305013277"},{"source":"24831158218","target":"44486089850979"},{"source":"54003532995853691859","target":"50678562032474"},{"source":"2579652121850163","target":"50678562032474"},{"source":"2455193638329872464","target":"403333506966985812956264495103083930421"},{"source":"403333506966985812956264495103083930421","target":"50678562812897"},{"source":"229320080329284392969231993","target":"50678562812897"},{"source":"2013266514","target":"50678562812897"},{"source":"1277273995756","target":"30172798"},{"source":"1351050207728787","target":"30172798"},{"source":"2624541068405932","target":"30172798"},{"source":"135879330265212010996","target":"30172798"},{"source":"229320080329284392969231993","target":"30172798"},{"source":"1277273995756","target":"3181528016773134152954"},{"source":"1351050207728787","target":"3181528016773134152954"},{"source":"229320080329284392969231993","target":"3181528016773134152954"},{"source":"2579652121850163","target":"872776"},{"source":"37307","target":"53175966890"},{"source":"54003532995853691859","target":"2579652121850163"},{"source":"50678562032474","target":"2579652121850163"},{"source":"37307","target":"2579652121850163"},{"source":"229320080329284392969231993","target":"2579652121850163"},{"source":"108512332758102341","target":"2579652121850163"},{"source":"54003532995853691859","target":"2019378258741"},{"source":"14857","target":"2019378258741"},{"source":"50678562032474","target":"2019378258741"},{"source":"403333506966985812956264495103083930421","target":"2019378258741"},{"source":"872776","target":"2019378258741"},{"source":"24831158218","target":"94483477513940126"},{"source":"2455193638329872464","target":"94483477513940126"},{"source":"229320080329284392969231993","target":"94483477513940126"},{"source":"5679146086184365833430073","target":"2624541068405932"},{"source":"26909959832378248029278884281720415842791882","target":"2624541068405932"},{"source":"2455193638329872464","target":"2624541068405932"},{"source":"36028","target":"2624541068405932"},{"source":"229320080329284392969231993","target":"2624541068405932"},{"source":"2196179318535330915","target":"36028"},{"source":"2455193638329872464","target":"36028"},{"source":"229320080329284392969231993","target":"36028"},{"source":"5230685265404876707487","target":"36028"},{"source":"2455193638329872464","target":"37307"},{"source":"2579652121850163","target":"37307"},{"source":"54003532995853691859","target":"3290301776931795"},{"source":"403333506966985812956264495103083930421","target":"3290301776931795"},{"source":"135879330265212010996","target":"5575968392063619945160"},{"source":"403333506966985812956264495103083930421","target":"4302444777154252931"},{"source":"50678562812897","target":"4302444777154252931"},{"source":"3290301776931795","target":"4302444777154252931"},{"source":"2013266514","target":"4302444777154252931"},{"source":"2455193638329872464","target":"2013266514"}]
</script>
<div class="absolute bottom-1 right-1 shadow-solid-accent bg-background br4 pa3">
<p class="ma0 f7 measure-narrow lh-copy">Here are all the notes in this garden, along with their links, visualized as a graph.</p>
</div>
</div>
</div>
</div>
</main><footer>
</footer><!-- That file is not particularly elegant. This will need a refactor at some point. -->
<div class="hide-child foreground-text links-foreground-text">
<div id='tooltip-wrapper' class="bg-white br4 shadow-solid-accent lh-copy dn o-0 pa3 w6 f6 absolute z-2 child">
<div id='tooltip-content' class="relative overflow-hidden note-contents">
</div>
<div id="tooltip-source" class="f7 light-silver"></div>
</div>
</div>
<script src="/assets/js/d3.min.js"></script>
<script src="/assets/js/scripts.js?1621296745771306036"></script>
</body>
</html>