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

What does the interface for the

HtmlRenderer

“instrument” look like? Can I create my own Ratio “instrument” in Ratio?

Yes you can create your own instruments. There’s a “+ Instrument” button at the bottom. You can see how in the first video from last week (end): https://vimeo.com/573378340 Inside the “HTMLRenderer” there’s essentially only some String Concatenation and iframe rendering going on. If you don’t like what it does or how it works, you can edit it or clone it. There can be 100 different renderers with different interfaces. Same for Sliders. If they share the same inputs/outputs, they can be swapped out. So I could use your awesome slider instead of mine. I’m not sure about the term instrument vs. blocks vs. tools, but I’m hinting at something there that I want to explore further 🙂

Would you consider making the left-most “column” the “in ports” to an instrument and the right-most column the “rendering” / “out ports”? I thought you were going to re-use the “LOGO” workspace as another instrument 🙂

Yes! I think e.g dragging a wire dropping it should show a filtered list of blocks that match the port type. Also the left/right side is something I thought about but haven’t settled on. Thanks for the feedback!

RTL languages could be a presentational change of just flipping the column order.

Interesting project, I love the design 🙂! Pretty cool that you can define your own instruments. Is there a documentation, or source code we can see? What are the use cases for Ratio, besides a code playground? Maybe some very specific use case / example you could describe?

I will post more demos soon, but the possibilities are endless. The goal is to be able to bundle workspaces into self-contained apps. So far I’ve built: • Time Tracking App • Multi-pane responsive browser preview • Notes app • CSS Inspector • SVG Optimizer • … What I would want to build: • A personal email client • A blogging app • … essentially my own suite of personal software My goal is to write a more exhaustive article soon. In that I want to explain the concept behind Ratio and also describes how to use it. With that, I should be able to publish a version.

Do you imagine Ratio being used instead of web app frameworks, to replace some of the web apps? Or is it more for personal tools? What would I use Ratio instead of?

Good question! Given a more flexible layout block (right now you can only create equally sized columns and rows), I think that web apps could be built with it. It already solves a lot of the annoying parts (props drilling, state management, component creation, imports, …). In theory you could build a block that can work with a database — anything really because it’s just backed by code. And because you start with an empty canvas, you could build anything. So in a sense it is a framework that comes with its own GUI builder. The longer I think about it, the more I realize that it could become an operating system that could host all of my apps — with the advantage that apps could talk to each other and share data. Not sure if I want to push it in that direction, but it is an interesting thought experiment. I think you could use Ratio instead of: online code playgrounds (CodePen, ObservableHQ), Automation tools (Automator, Workflows, Zappier), Code Utilities (Paw, JSON Tree Viewers, API Explorers) and Command Line Tools that are missing a GUI (image compressors, FFMPEG, FTP, …). So mainly developer tools used to figure things out. The other audience could be “open” personal apps that can be hacked and interoperate. That part depends on the time invested into that area. But the fun part would be that someone could program a “backend” block (e.g. for fetching and sending emails) and someone else could build UI on top of it. And someone else could build a different UI on top of it. And so on … right now the design is very unified, but you can completely change the look and feel if you wanted to. Will try to show something in my next demo 🙂