browserforge

html files are inplace-editable documents like dokieli which can be shared over peer-to-peer networking (wifi, bluetooth, sneakernet)

everything runs in the browser

status

concept

implementations

• https://github.com/happyborg/p2p-git-portal-poc - collaboration app, no backend
• https://github.com/MichaelMure/git-bug - store issues in git
• https://github.com/tinacms/tinacms - content management system with visual editing (inplace editing)
• https://github.com/linkeddata/dokieli - client side editor, but i want "dokieli with git backend"
• https://github.com/solid/specification - federated web hosting, but i want "solid pods with git backend"
• https://github.com/isomorphic-git/isomorphic-git#who-is-using-isomorphic-git
  • https://github.com/mizchi/next-editor - https://next-editor.app/ - 300 stars - last update 2020
  • https://github.com/wmhilton/nde - https://wmhilton.com/nde/ - https://nde.now.sh/ - broken - 80 stars - last update 2018
  • https://github.com/wmhilton/git-apps - https://git-app-manager.now.sh/ - broken - 0 stars - last update 2017

specs

inplace-editing

document is a html page by default, it is read-only (not editable) when i click "edit" then load the editor = make the document editable *in place* = no page reload

offline first

aka: local-first, dweb, nocloud, nobackend

https://github.com/topics/offline-first https://github.com/topics/local-first https://github.com/topics/dweb https://github.com/topics/dapp

because ...

There is no cloud, it’s just someone else’s computer

workflow

like on github: fork, branch, edit, commit, merge

the user's "first impression" is the rendered html file, because documents are "read often" or "mostly read"

when the user wants to make a change, the "editing experience" should be instant, so the user does not forget his idea.

to edit the page, click the "edit this page" button, and edit. the details of the edit process (fork, branch, edit, commit, merge) come later. but the "first edit" is persistent across page reloads, so dont worry about data loss.

the user can fork before editing, but its not a hard requirement, to make editing as "instant" and "inplace" as possible.

when the first edit is done, its time to fork, branch, commit.

fork: download the full repo to the browser (filesystem api or indexeddb). this must be independent of the original URL, so we must install as browser app.

window.showOpenFilePicker()

<details> <summary> filesystem api </summary>

https://web.dev/file-system-access/

The entry point to the File System Access API is window.showOpenFilePicker(). When called, it shows a file picker dialog box, and prompts the user to select a file.

We have developed a library called browser-fs-access that uses the File System Access API wherever possible and that falls back to these next best options in all other cases.

Opening a directory and enumerating its contents

To enumerate all files in a directory, call showDirectoryPicker(). The user selects a directory in a picker, after which a FileSystemDirectoryHandle is returned, which lets you enumerate and access the directory's files. By default, you will have read access to the files in the directory, but if you need write access, you can pass { mode: 'readwrite' } to the method.

</details>

now the app can work offline: browser other pages, edit pages, branch/commit/rebase

on future page loads, the app will ask "do you want to fetch updates?"

updates are merged with local changes. use either the simple conflict-resolution of git, or a the complex conflict-resolution of CRDT (yjs, automerge, ...). the problem with CRDT is, it needs lots of memory to store ALL the changes (character-based diff)

also handle schema migrations

self-modifying code

code and data - both can be modified with this system, so it can be called "self-modifying code" (in a good sense, a "good virus") more precise a "self-modifying browser-app"

https://www.i-programmer.info/programming/javascript/989-javascript-jems-self-modifying-code.html

pazguille/offline-first

https://github.com/pazguille/offline-first Everything you need to know to create offline-first web apps

html first

javascript is optional no build steps, no SSR, no markdown

"html is the mother language" -- rich harris, svelte

markdown can be derived from html

browser first, native second https://jasonette.com/

qwik framework

https://github.com/BuilderIO/qwik - 14K stars

The HTML-first framework. Instant apps of any size with ~ 1kb JS

https://qwik.builder.io/playground/

qwik playground source: https://github.com/BuilderIO/qwik/tree/main/packages/docs/src/repl

ui framework should be "SSR by default" like qwik to produce static html pages, which run without javascript. optional javascript dependencies are lazy-loaded (on demand) to reduce memory footprint of the app

builder.io

https://github.com/BuilderIO/builder - 4K stars

https://builder.io/demo

Drag and drop Visual CMS for React, Vue, Angular, and more

Integrate with any site or app. Drag and drop with the components already in your codebase.

see also

• https://github.com/primodotso/primo - https://primo.so/ - 500 stars - javascript - visual CMS, based on: svelte, prosemirror. Primo is a component-based CMS that makes it easy to build visually-editable static sites

htmlgoddess

https://github.com/jonascript/htmlgoddess

A static site generator to code like its 1999

no javascript, only html + css

html as data exchange format

html is useful as a data exchange format between mobile devices

data flow:

• click on "export app" -> this will download all data to a single html file
• this html file is sent to the other device
• on the other device, open the html file
• this will install the app to the other device

html template:

<html>
<body>

<script>
console.time("parse html");
</script>

<div>hello ...</div>

<pre style="display:none" id="packfile">
UEFDSwAAAAIAABQFkw14nJXLQQrDIBBA0b2nmH2hjHU0DpTSZTc9hI5jE4hJCOb+TY/Q5fvw+64K
EaUKsi9RBsbgfYxUQrmJkji1pNlFSTWbLe26dFCnjvKtMglqKox+COjQWqrM2eZK7BAxm3T0cd3h
Pc1pgddPcG8nxuP5aWmar7K2B9gQ2CIjE1zQIpqztql3/f80x2a+AzI+TZ4NeJyNy0EKwjAQheF9
TpG9VGaStM6AiEs3HmKaTGzBtKWk9zeCB3D5P95Xd1XrUxzJkyoTSgJOpOQ1955i1qgQcuaRM5tN
...
20 MByte of base64 data
...
</pre>

<div>... world</div>

<script>
console.timeEnd("parse html");

console.time("get innerHTML");
var packfile = document.querySelector("#packfile").innerHTML
console.timeEnd("get innerHTML");

console.time("decode base64");
packfile = atob(packfile);
console.timeEnd("decode base64");
</script>
</body>
</html>

benchmark in chrome on a cheap laptop:

parse html: 769.47216796875 ms
get innerHTML: 865.382080078125 ms
decode base64: 1356.555908203125 ms

the base64 data is generated by

git gc
# now there is only 1 pack file
cat .git/objects/pack/*.pack | base64 >>pack.html 

based on

this is a fusion of multiple tools

editable html files

• https://github.com/linkeddata/dokieli
  • backend: https://solidproject.org/
• https://github.com/LivelyKernel/LivelyKernel - browser-based runtime and development environment that makes creation of (Web) applications much more immediate and direct. All development happens "live", i.e. you change your application and the system while it is running
• IPFS-based
  • This single-page web app can edit itself
    • https://medium.com/textileio/this-single-page-web-app-can-edit-itself-62734dac2700
      • https://laptrinhx.com/this-single-page-web-app-can-edit-itself-667783868/
    • https://github.com/ipfs/js-ipfs
    • https://github.com/carsonfarmer/profile-app
    • https://github.com/textileio/dapp-template
• https://www.pagecloud.com/blog/how-to-edit-your-website
  • document.body.contentEditable = 'true'; document.designMode='on';

web desktop

aka: web based operating system

https://github.com/syxanash/awesome-web-desktops

svelte

https://github.com/puruvj/macos-web - 2K stars - macOS Web written in Svelte

react

https://github.com/blueedgetechno/win11React - 7K stars - Windows 11 in React

https://github.com/DustinBrett/daedalOS - 6K stars - Desktop environment in the browser.

https://github.com/Renovamen/playground-macos - 3K stars - My portfolio website simulating macOS's GUI, developed with React and UnoCSS.

https://github.com/vivek9patel/vivek9patel.github.io - 3K stars - Personal portfolio website of theme Ubuntu 20.04, made using NEXT.js & tailwind CSS

https://github.com/piyushsuthar/windows-11-web - 500 stars

vue

https://github.com/GoodManWEN/GoodManWEN.github.io - 1K stars - A website simulating linux system's GUI, using theme of Deepin distro.

https://github.com/DonChiaQE/win95 - 100 stars - Windows 95 Portfolio built with Vue.js

other

https://github.com/os-js/OS.js - 6K stars - OS.js - JavaScript Web Desktop Platform. based on Hyperapp, an "ultra-lightweight Virtual DOM, highly-optimized diff algorithm, and state management library" (Virtual DOM is a bug ...)

https://github.com/dahliaOS/pangolin_desktop - 2K stars - Pangolin Desktop UI shell, designed for dahliaOS, written in Flutter.

https://github.com/KilledByAPixel/OS13k - 500 stars - A Tiny OS and Mini Game Engine - 13 KByte

https://github.com/Manthee1/linuxWeb - 100 stars - Linux... but simulated on your web browser.

web unix

• https://github.com/plasma-umass/browsix - https://browsix.org/ - 3K stars - Browsix is a Unix-like operating system for the browser.
• https://news.ycombinator.com/item?id=13151566
  • https://github.com/runtimejs/runtime - https://github.com/runtimejs-comm/runtime - operating system (unikernel) for the cloud
  • https://bellard.org/