Codestrates \/ Varv are re-constructible.
Codestrates is implemented in codestrate!
- You can natively modify the codestrate itself.
- Can be re-programmed from within. (sweet!)
Videostrates!
- Represents a video conversation
- re-compositing the video streams on the fly
- Essentially WebRTC shared stream
- Kinda a live authoring environment
- DEMO: Showing off an app similar to iMovie
  - Use case: simple paper prototyping tool
  - re-composing small tools to extend the functionality
Transclusion is such a powerful, general principle

New Programming Model for Webstrates - declarative model

<div concept="counter">
define "concepts" using a nested list that looks like a well-formatted yaml file.
- Similar to me and Brent Anderson's idea about Program as Code
- Application is multiplayer, in interaction with it, and in re-programming it!
Primitive todo list written in new programming model
Supports "incremental" programming
- Schemas and concepts are able to be iterated on inside the live program
You end up creating "domain-specific languages"
Programs are expressed as data structures
- Pretty easy to build "tooling" / data structures
"Personal Digital Sovereignty"
- Different path than the
Q: What are the frustrations of working with the DOM specifically?
- A: Memory usage around
Challenge: partial transclusion
Q: How do you manage synchronization?
- A: ShareDB - operational transforms - open-source synchronization of arbitrary JSON
  - Mapped the DOM to a JSON representation
    - A lot of edge cases in the DOM
  - For every-day use, we don't really experience synchronization issues
- "VERY INTERESTED in porting Webstrates to CRDTs and making it decentralized"
Issue: what is persistent and what is transient?
- We've made pragmatic choices, but don't have a conceptual clear way of doing it.
What's a better substrate?
- Not sure! Be inspired!
How much time do you spend "living in the future" - using your own webstrates on a day-to-day basis? What's that been like, experientially?
- I use it for presentations
- I use it for teaching
  - Students use "cauldron" to build
- To begin with, I used to build my own tools for note-taking and such, but I try as much as possible
We use it to build research prototypes for all sorts of things.

What about "live-editing" the software that you're using?

There are always challenges when you are "sawing on the branch that you're sitting on."
- Branching?
- What's in production?
- Lock the in-production version?

Joker: Unified Interaction Model For Web Customization

Geoffrey Kazuyuki Litt co-authored this
- Built on top of

Kapaya Katongo
Make the web more malleable and accessible1
- Increase the malleability of websites that have deficiencies.
Turn websites into spreadsheets (kinda like scraping) and then performing transforms, and work backward to modify the page.

Mariano Geuerra

Data-driven notebook style
No navigation!
No modes!
- Everything you need to do is in a single, vertical linear page
- Don't differ between logic and data - co-locate both of them
Reuse by reference, not cloning or ownership (Transclusion)
Each card becomes a DSL that you build up using the same primitives.

Computational Notebooks

Easy to do computation
Difficult to express interactivity
- Can we get back

Josh Justice

Dynamic in SmallTalk in:
User modifiability:
- Motivation
- Properties
- Challenges
https://usermodifiable.software/
Focus on a vision!
- SmallTalk - starts with the code
- HyperCard - starts with the UI
software erector set // software legos!

Smallest, simplest possible tools:

Graphics
Texts
Buttons

Vision -> Properties -> Yields innovation

Eat your own dogfood - their creators used them for their own work.

Aid their own development work!
Make your own system practically useful for you.

Open-source it!

Put it out in the world!

Get it into people's hands, and get them starting to use it.
"we didn't understand enough about what this did to empower individuals - we need to learn"

Get it in the box

What is the box today? What's available on every computing environment today? The web.
Find ways to make the systems immediately available

Appreciate spin-offs

Appreciate the evolution

Web IDEs that take the web further

Edward Misback

Three different "clients" connecting to the same shared simulation
Extremely low-latency, WebRTC, peer-to-peer connection

Limitations and Lessons Learned
- WebRTC is NOT TRIVIAL to set up - not trivial to maintain
- Have to set up handshakes
- VR development is very far from a live experience
- Using "Observable" was an easy way to get a decent live programming interface without too much work
- Shared state: different clients have their own state
- Doesn't matter which one you start first
- Distributed state also leads to problems
- Keeping everything in sync
- Hack.VR -

Let's make programming in VR something anyone can do!

Yousef El-Dardiry

Yousef El-Dardiry
Typecell.org

TypeCell Notebooks - new notebook-style live programming environment

Native TypeScript support - no framework plumbing necessary
Packaging
Builds on Monaco - code editor used by VSCode

Planning to open source later this year!

Challenges

Detecting loops
Is two-way reactive variables intuitive enough?
Disposing resources in user code - garbage collection?
Security - executing user code
Can we build Custom Visualizers and Inspectors?
Breaking out of the notebook environment
- Embedding Type
MobX-style reactive state management instead of React?
Built it on y.js - CRDT - data structures underneath
- Natively supports collaboration out of the box

David Moon and Cyrus Omar: Restruct

Restructuring structured editing
MPS: the state-of-the-art structure editor

Propose tile-based editing - a more relaxed structure

tylr.fun - Demo of a tile-based editor!

Inkbase: Szymon Kaliski

Programmable Ink
- Joshua Horowitz
- James Lindenbaum

Context

pen-and-paper as a brain-world interface

programming of ink is unexplored!

Inkbase
- it's a plain notebook
Basic semantics // queries about the composition of the ink on the page.
- Execute some code based on what's sketched in the notebook
Can you programmatically "upgrade" the fidelity of a prototype?

What did they learn using Inkbase?

dynamic hand-drawn strokes feels very good
"living" systems are great!
spatial queries feel correct in a canvas-based system
- INTERESTING! think about Spatial Interfaces
Didn't quite achieve seamlessness between writing / programming

Open Questions

Need a better programming model for this system...
How do you work with compound objects?
what's a good mental model for creating new strokes programmatically
- and related: what would be a good balance between computer voice and sketchy feel
non-black box for object

LiveProg 2021

Interactive graph

On this page