# consistent order: # article # demo # url # code # paper # video # recording # status # - finished # - pending # - active - title: Lively4 cvKey: L4 description: "I co-created and maintain Lively4, a live, self-sustaining, and wiki-like web-based programming environment and application platform. Lively4 integrates the spirit of Squeak/​Smalltalk with modern Web technologies." # It allows you to modify applications while they are running and can be loaded into external Websites to script them. We use Lively4 as a vehicle for personal, research, and teaching projects. demo: https://lively-kernel.org/lively4/lively4-core/start.html code: https://github.com/LivelyKernel/lively4-core paper: papers/LinckeReinRamsonHirschfeldTaeumelFelgentreff_2017_DesigningALiveDevelopmentExperienceForWebComponents_AcmDL.pdf highlight: 1 image: lively4.png status: active - title: Vivide/JS description: "A JavaScript implementation of Vivide, a graphical tool building framework. Vivide supports working with live data in a tangible manner and the effective scripting of visualizations using an expressive DSL." # Ref Marcel's Diss # Create presonalized Views on live data using an expressive DSL. image: VivideJS-livelyFiletreeSMALL3.png code: https://github.com/hpi-swa/vivide demo: https://lively-kernel.org/lively4/lively4-core/start.html paper: https://www.hpi.uni-potsdam.de/hirschfeld/publications/media/Taeumel_2020_DataDrivenToolConstructionInExploratoryProgrammingEnvironments_Dissertation.pdf - title: d3 Bundleview image: d3-bundleview.png description: "An interactive visualization to explore massive hierarchical data structures with relations like software projects with dependencies. Edge bundling provides high-level insights while the interactions allow you to focus on specific parts of your dataset." demo: https://onsetsu.github.io/d3-bundleview/ code: https://github.com/onsetsu/d3-bundleview highlight: 3 - title: floom cvKey: Floom image: floom_spawn_cycle_white_cut_lossy.gif description: "I created floom, a fluid simulation written in JavaScript. floom uses the Material Point Method, a hybrid variant of particle and grid systems. You can switch between computational models and change material parameters on the fly." highlight: 4 code: https://github.com/onsetsu/floom/ demo: http://onsetsu.github.io/floom/example.html - title: X-Ray description: "The X-Ray is a graphical tool that overlays over the user interface of a website. It allows developers to reveal and inspect the internal structure of the DOM hierarchy and makes user events visible." image: xray.gif code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/src/client/reactive/components/basic demo: https://lively-kernel.org/lively4/lively4-core/start.html - title: Lightweight Probes description: "Probes directly embed dynamic runtime information in static source code. This feedback mechanism allows developers to see concrete values or how often a code path has been taken without the mental and time overhead of switching between editor and debugger. Here, I explore how lightweight such a widget can get. We only require the editor to support text-to-widget replacements to implement probes." # Thus, they integrate dynamic runtime Information directly into static source code, reducing the distance between thrm and the contwxt switches required. demo: https://lively-kernel.org/lively4/lively4-core/start.html?edit=https://lively-kernel.org/lively4/lively4-core/demos/using-probes.js code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/src/components/widgets/lively-probe.js image: lightweight-probes.png status: active - title: Signals image: signals-aexpr.png description: "An Active Expression-based implementation of Signals, a reactive data type that allows to model functional data dependencies in a program. This implementation works similar to conventional Signals but updates on every state change, not just on Signals." demo: https://lively-kernel.org/lively4/lively4-core/start.html?load=https://lively-kernel.org/lively4/lively4-core/demos/aexp-signals.js code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/src/client/reactive/babel-plugin-databindings - title: Active Expressions cvKey: AEs image: active-expressions-minimal-overview.png description: "I developed Active Expressions, a reactive primitive that adds reactivity as a first-class citizen to state-of-the-art languages such as JavaScript, Python, or Smalltalk." # You can define an object-oriented expression and get notified whenever any state change affects the expression's result, triggering your callbacks. Based on this mechanism, you can easily write more involved reactive programming concepts. Available in multiple implementation variants including byte code rewriting, dynamic interpretation, and using proxy objects. #recording: https://www.youtube.com/watch?v=DjNeAt31aOs highlight: 2 demo: https://lively-kernel.org/lively4/lively4-core/start.html?load=https://lively-kernel.org/lively4/lively4-core/demos/aexpr2.js code: https://github.com/active-expressions paper: papers/RamsonHirschfeld_2017_ActiveExpressionsBasicBuildingBlocksForReactiveProgramming.pdf - title: Zone-based Layer Activation slides: slides/Ramson_2020-07-21_ZoneBasedLayerActivation.pdf image: zone-based-layer-activation.png description: "In Context-oriented Programming, one dynamically activates behavior variations of a program for some duration. Zone-based Layer Activation is a variant of dynamic extent that activates variations for the duration of a block, including all its logically-connected asynchronous operations such as Promises and native async/await. Implemented in ContextJS in JavaScript using customized zones." paper: papers/RamsonLinckeWatanabeHirschfeld_2020_ZoneBasedLayerActivationContextSpecificBehaviorAdaptationsAcrossLogicallyConnectedAsynchronousOperations_AcmDL.pdf demo: https://onsetsu.github.io/area51/experiments/github-access.html code: https://github.com/onsetsu/area51 - title: ContextJS image: cop-overview.png description: "I am one maintainer of ContextJS, the goto JavaScript implementation of Context-oriented Programming. ContextJS allows to define behavior variations that activate dynamically at runtime and cross-cut inheritance-based modules." # modules called layers demo: https://lively-kernel.org/lively4/lively4-core/start.html?load=https://lively-kernel.org/lively4/lively4-core/demos/contextjs/showfocuslayer.md url: https://www.npmjs.com/package/contextjs code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/src/client/ContextJS paper: https://www.hpi.uni-potsdam.de/hirschfeld/publications/media/LinckeAppeltauerSteinertHirschfeld_2010_AnOpenImplementationForContextOrientedLayerCompositionInContextJS_Elsevier.pdf - title: Reactive Layer Activation image: ila-working-principle1.png description: A variant of implicit layer activation that enables adaptations to system behavior while a declarative Boolean condition holds. Using reactive programming, we eagerly (de)activate variations, allowing them to be combined with life-cycle callbacks. # Implicit Layer Activation allows to activate behavior variations automatically depending on a Boolean condition." code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/src/client/ContextJS paper: papers/RamsonLinckeHirschfeld_2017_TheDeclarativeNatureOfImplicitLayerActivation_AcmDL.pdf - title: Card Game Editor image: card-game-editor.png description: "I created a custom editor for board and trading card games. The editor is directed towards quick iteration through minimizing time to create a playable prototype to gather feedback. This includes layouting, card art, and simplifying printing." demo: https://lively-kernel.org/lively4/lively4-core/start.html?load=https://lively-kernel.org/lively4/lively4-core/src/components/widgets/cards-example/example-all-cards.json code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/src/components/widgets status: active - title: Home image: knowledge-graph.png description: "A personal knowledge graph and surrounding tooling with the idea to make your everyday data (eMails, todos, contacts) tangible and programmable. As an antithesis to the app concept, you work directly with objects from different domains, associate them, and create or customize your workflows according to your specific needs. Powered by an underlying ontology described as triples." # As an antithesis to the app concept, you can directly work with objects and instead of being limited to predefined workflows designed by others. # objects from different domains can be linked together code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/templates - title: Reactive Debugger image: reactive-debugger.png description: "Together with Markus Brand, I developed a toolset that allows programmers to inspect and debug multiple reactive programming concepts that interact and collaborate in a single system. We designed tools to investigate their cross-cutting aspects, including over-time structure, evolution of values and events, and the relation of dynamic information and static source code." #, such as signals, implicit layer activation, and Active Expressions all in one view/system. demo: https://lively-kernel.org/lively4/lively4-core/start.html?edit=https://lively-kernel.org/lively4/lively4-core/demos/stefan/debugging-reactive-programming-concepts.js code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/src/client/reactive/components/basic paper: papers/RamsonBrandLinckeHirschfeld_2024_ExtensibleToolingForReactiveProgrammingBasedOnActiveExpressions.pdf - title: Babylonian/JS image: babylonian-js.png description: " Babylonian Programming scales example-based live programming toward big software projects. You create examples for classes and functions. Example executions augment static source code with live data inlined using probes. In Lively4, we developed the original implementation of Babylonian Programming." demo: https://lively-kernel.org/lively4/lively4-core/start.html?edit=https://lively-kernel.org/lively4/lively4-core/src/babylonian-programming-editor/demos/tree-scene.js code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/src/babylonian-programming-editor paper: papers/RauchReinRamsonLinckeHirschfeld_2019_BabylonianStyleProgrammingDesignAndImplementationOfAGeneralPurposeEditorIntegratingLiveExamplesIntoSourceCode.pdf - title: Press Banana To Play image: press-banana-to-play.png description: "Our entry for the 6th HPI GameJam on Alternative Input Methods. Each level, you preprogram your little blobby avatar's action like running, jumping, digging, or gravity-reversing. Then, time these actions using only a single button, or banana." demo: https://onsetsu.itch.io/press-banana-to-play code: https://github.com/onsetsu/GameJam6 - title: Massive WebVis image: bp-viz-treemap-cut.png description: "In our bachelor's project we developed massive data visualizations for the Web. We created a graph visualization framework to explore software analysis data both on desktop or inside a browser." # Transforming, handling, and visualizing massive data article: articles/BP_Pressemitteilung_D1_final.pdf # https://hpi.de/fileadmin/user_upload/hpi/navigation/20_das_hpi/20_veranstaltungen/05_hpi_veranstaltungen/10_bachelorpodium/2012/Pressemitteilung_D1_final.pdf paper: papers/Lehmann_2012_AnalysisAndComparisonOfWebGLFrameworksForWebBasedRenderingOfMassiveGraphDataStructures.pdf context: Bachelor-Projekt - title: Reactive Object Queries image: reactive-object-queries-example-entity-finder-with-code2.png description: "Reactive Object Queries allow developers to query objects that satisfy a condition, regardless of their position in the program's object graph. The created view updates live as program state changes and can be further transformed or augmented with additional behavior." # Creates a live-updating view. code: https://github.com/active-expressions/reactive-object-queries paper: papers/LehmannFelgentreffLinckeReinHirschfeld_2016_ReactiveObjectQueries_AuthorsVersion.pdf todo: - get demo running again - title: Pronto cvKey: Pronto image: pronto-example-magnet.png description: "Pronto is a game mechanics prototyping tool build on top of the Godot game engine. It encourages quick assembly and rapid iteration. To do so, Pronto makes behavior tangible as visible objects in the game scene. Visual drag-and-drop connectors overlay the scene to define trigger-action relationships. I worked primarily on Pronto's conceptualization and initial version." # It has an emphasis on the quick assembly of throw-away prototypes. demo: https://hpi-swa-lab.github.io/godot-pronto/ code: https://github.com/hpi-swa-lab/godot-pronto paper: papers/KrebsBeckmannGeierRamsonHirschfeld_2023_ProntoPrototypingAPrototypingToolForGameMechanicPrototyping.pdf todo: - use more paper content after double blind - title: Bloob image: bloob-mini-example.gif description: "Bloob is a full-fledged physics engine for soft-bodies written in JavaScript. It features spring- and pressure-based soft-bodies, different types of forces and joints, dynamic object creation and manipulation and built-in debug rendering." demo: https://onsetsu.github.io/bloob/bloob.html code: https://github.com/onsetsu/bloob - title: Lively Connectors image: lively4-connectors.png description: "Together with Eva Krebs, I built Lively4's version of connectors. Connectors allow you to mash-up widgets using graphical dataflow connectors to quickly assemble applications. Connectors can listen to any property, event, or expression on the source widget. Created connections can be persisted, bundled to bigger applications, and shared with others." # powerful and highly configurable code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/src/components - title: Compiler Explorer cvKey: PE image: plugin-explorer-screenshot.png description: "The Plugin Explorer is an editor specifically designed to develop compiler extensions, here babel.js plugins. The editor provides linked views on the textual and abstract syntax tree representations of both example input and computed result. Due to its live programming properties, the editor allows you to instantly review the effects of your changes by comparing input and result with the intended behavior. Changes to the compiler apply immediately to the Lively4 environment, so you can use new capabilities right away." # Live Programming editor for babel.js plugins. # Compare input and results. # Linked Views on textual and ast representations of both input and output. # Make changes go live immediately. # Compiler changes become active immediately. demo: https://lively-kernel.org/lively4/lively4-core/start.html?load=https://lively-kernel.org/lively4/lively4-core/demos/stefan/plugin-explorer/README.md code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/src/components/tools - title: Debugging Compilers Back-in-Time image: plugin-explorer-trace-viewer.png description: "Together with Tom Braun, I developed a back-in-time debugger for our compiler editor. Using it, you can view the entire execution trace of a compiler and easily identify, which control pathes it took and how the program was modified." demo: https://lively-kernel.org/lively4/lively4-core/start.html?load=https://lively-kernel.org/lively4/lively4-core/demos/stefan/plugin-explorer/README.md code: https://github.com/LivelyKernel/lively4-core/blob/gh-pages/demos/tom/index.md - title: GrindScript # image: grindscript-visual-editor-screenshot-no-border.png image: grindscript-visual-editor-5fps.gif description: "GrindScript is a prototypical visual programming language to program units' artificial intelligence. It emphazises input efficiency and intuitiveness over discoverability." code: https://github.com/LivelyKernel/lively4-core/tree/gh-pages/src/components - title: Babelsberg/JS image: babelsberg-scoped-constraints-weplaytanks.png description: "Babelsberg is an Object Constraint Programming Language, allowing you to specify invariant using object-oriented expressions. These invariants are automatically maintained by a set of constraint solvers. I worked on parts of Babelsberg/JS and extended it with scoped constraints and a configurable reactive constraint solver." # Integrating Reactive Programming and COP into Object Constraint Programming in JavaScript. Tanks game. demo: https://babelsberg.github.io/babelsberg-js code: https://github.com/babelsberg/babelsberg-js #- title: Some Educational Board Game # image: extreme-pro-gaming-redacted.png # description: "Together with Luc Prestin and Eva Krebs, I designed the educational board game Some Educational Board Game to fill a gap in a software engineering lecture that lectures and an accompaning student project could not cover. We use the game as an engaging introductory activity to convey core values of agile processes. I oversaw the design process of the game, providing design feedback." # todo: # - put in an image and links # ---------------------------------------------------------------------------------------- # ---------------------------------------------------------------------------------------- # ---------------------------------------------------------------------------------------- # ---------------------------------------------------------------------------------------- #- title: SAP-IC Relation Viz # description: "Massive Data Visualizations on Corporate Software. In particular, preprocessing of massive software projects to be consumed for data visualization purposes. CSV in, Attributed XML Hierarchy out. Nothing visual to look at here." # nda: true # date: 07-2012 - 10.2012 #- title: Workspace Plugin/Var Recorder # description: "Enables to run multiple JS modules as if they were executed in the same scope. Crucial to enable REPL-style programming or Smalltalk-like workspaces in JavaScript." # tosmall: true #- title: Whyline/JS # description: "A Back-in-TIme Debugger that allows to see where values come from and flow into." #- title: GameJam5 # description: "A Horror game about making and avoiding noise." #- title: RT-TCG # description: "A real-time TCG." #- title: Onsetsu # description: "Das Gemeinschaftsprojekt, revived." # Ba # Ma # Freizeitprojekte # - RTTCG? # - Onsetsu? # PhD # - Papers # - Seminars # status?: active, paused, finished # slides? from talks? as alternative to recordings?