# LiveProg 2021 ## Clemens Nylandsted Klokmose - Software as computational media - Allow users to assemble their own software environment - Changing Minds, Andrea diSessa - Computational medium seeded with small tools, Ideals: - Malleable - - Composable - - Shareable - synchronously and fluidly collaborate - Interoperable - software should be able - Distributable - should be able to get people your software easily - Computable - the medium should be able to "execute" Webstrates - changes to a page are stored on a server and synched to other clients with the same page. Documents <> Applications - [[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 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](https://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