• m

    Maikel

    1 year ago
    Auto connecting nodes when dragging them onto the stage :

    https://youtu.be/EZtNgBM3osE

    .. In this codesandbox you can try it out yourself : https://codesandbox.io/s/flowrunner-canvas-wljy9
    m
    Rob Haisfield
    +1
    4 replies
    Copy to Clipboard
  • Florian Schulz

    Florian Schulz

    1 year ago
    Today, I’m sharing a first glimpse of my new programming environment for prototyping and building user interfaces and apps. It’s like a breadboard for building software. You can wire up components, prototype, figure out, think, iterate. It’s a tool for creating tools. I think the closest reference I’ve looked at is Fabrik (as seen in @Ivan Reese’s Visual Programming Codex). It’s tough to share all the potential things it can be used for in one short video. I’ll try to refine it through more videos and writing in the next weeks. 🙂 The video is uncommented. So here’s a summary of noteworthy things: • There are workspaces, blocks and wires. It’s like nodes & wires, but with strict layout and user interfaces in mind. • This doesn’t try to replace code, but makes working with code easier. • Programming (dealing with data and organizing chunks of code) can be done visually. • Copy & Paste as first-class citizen → Code becomes tangible • By visualising and showing data, it reduces the mental overhead of keeping state and data in my head. • Wires are a tool, not a necessity (in theory, a workspace could have a single self-contained block and no wires at all) • Instead of needing to wire up every input, blocks can define their own inputs through inspectors or by providing their own UI – some blocks allow both: external inputs and UI • Blocks can have high levels of abstraction (no need to create blocks to do something easy like
    a+b
    ) • Wires can be hidden and the program still makes sense because there is always some layout, user interface, … • Various mechanisms for abstraction (wire up something, then copy the resulting block elsewhere), collapse blocks to hide data/UI, combine low level blocks (many inputs) into larger blocks (few inputs)https://vimeo.com/573378340
    Florian Schulz
    i
    +1
    6 replies
    Copy to Clipboard
  • Rob Haisfield

    Rob Haisfield

    1 year ago
    I wrote a little bit of code to simplify a workflow so I would know what I’ve processed already and what has yet to be processed! I don’t want it to be the case that every time I move things from my personal vault into my shared vault, I have to reprocess everything. I’m feeling pretty proud of myself because I’m learning to code and I successfully executed on a practical personal project https://twitter.com/roberthaisfield/status/1413561614431789061?s=21
    Rob Haisfield
    1 replies
    Copy to Clipboard
  • c

    Chris Maughan

    1 year ago
    Continuing my experiments with wiring up the audio graph visually. I'm prototyping mostly, trying to decide what is worth doing. I haven't had much opportunity to work on this, so progress is slow, and I'm still trying to decide what I actually want!

    https://youtu.be/f3J0dyniX6k

    c
    Florian Schulz
    +1
    4 replies
    Copy to Clipboard
  • Florian Schulz

    Florian Schulz

    1 year ago
    Here’s another demo of Ratio, the programming environment I’ve shared last week. In this demo I’m assembling a Code Playground. To keep it short, I didn’t add a block to save the file. But I can show that in another video next week. 🙂 https://vimeo.com/575734037 For context, here’s some background information I’ve shared last week:https://florianschulz.info/portfolio/writing/programming-with-ratio
    Florian Schulz
    Cole
    +1
    12 replies
    Copy to Clipboard
  • Mariano Guerra

    Mariano Guerra

    1 year ago
    New Feature: Variables in Formula Editor Keyboard First feature that adds alternatives to drag & drop operations Improves discoverability Avoids long/failed drag&drop operations Makes it easier to use on devices without a mouse

    https://www.youtube.com/watch?v=IEA1oailsk8

    Mariano Guerra
    Florian Schulz
    2 replies
    Copy to Clipboard
  • m

    Maikel

    1 year ago
    Hi, Recently I have been working on making the Flowrunner-canvas editor available as a React component (currently just for my own usage, it’s far from stable), and not only that, but I want to be able to provide custom ways of running a flow. What I’ve shown so far is that flows are run by the editor itself with the node-types provided by the editor environment. I’ve already been experimenting with backend flows, where you can design a flow which has http endpoints and communicate with a the database. What I’ve been doing today is compile a visual flow to webassembly, live in the browser 🙂 . I already wrote a litte webassembly compiler which runs in the browser, so all I had to do was parse a flow and generate the code that this compiler understands. It’s offcourse still very early stage, and I hope to show some more soon (currently this flow-type only supports variables and expressions, but the compiler has already support for functions, while loops and very basic memory manipulation). One of the things that I already noticed , is that I need is to be able to have vertical flows instead of just horizontal in the editor 😊. An image of the above can be seen in the attached thread I’ll be back with a video soon! Have a good sunday! Maikel
    m
    Kartik Agaram
    +1
    9 replies
    Copy to Clipboard
  • Yousef El-Dardiry

    Yousef El-Dardiry

    1 year ago
    Hi all! Quick update on my notebook project TypeCell. I’ve worked on loading and saving Markdown files directly from Github and the local file system. Basically, I can now use Markdown files to create interactive notebooks: https://www.loom.com/share/1d858e72e00742989d66c1eeda28a53a. Thoughts? Ideas? Suggestions? All welcome!
    Yousef El-Dardiry
    Mariano Guerra
    6 replies
    Copy to Clipboard
  • Florian Schulz

    Florian Schulz

    1 year ago
    This week I demonstrate my vision for integrating with existing tools built on the web. When other makers publish information about the output of a tool (ports, types) the data can then be used by other tools, such as Ratio. In the video, I show how the data from a color palette generator that is hosted on CodePen can be used inside Ratio: https://vimeo.com/581547608
    Florian Schulz
    2 replies
    Copy to Clipboard
  • Yousef El-Dardiry

    Yousef El-Dardiry

    1 year ago
    In this demo I’m exploring mixing a Live Programming Notebook with a block based editor like Notion. This unlocks creating Reactive Documents you might know from Bret Victor’s demoes: https://www.loom.com/share/6fd5637254584cfea8de315f0f3b532c
    Yousef El-Dardiry
    André Terron
    7 replies
    Copy to Clipboard