Hello everybody, and welcome to another episode of JavaScript Jump. On our panel today, we've got a j O'Neill. Hey, a j yo yo yo coming at you live from tactile keyboard switches. That's that's a fact that I never actually got. But you know, I know that people really get excited about it, so good for you. It's just a test board, okay. And and another panelist on today is Steve Edwards. How are you? Steve? Been busier than in one legged mannered a butt kicking contest this morning.
But hello from cold and rainy Portland. Hello Steve. By the way, just so you know that I'm sitting here with the window open because the weather is really nice here and I am I appreciate that. Yeah, the other issues as unfortunately, there are other issues. So for those of you don't remember, I'm coming from Tel Aviv, which is in Israel, which is at war, which is in fun to say the least. Uh. And our guest today is Andreas Mulla. Did I pronounce it correctly? Yes?
Pretty much. Yeah, I'm coming at you from Copenhagen. Then not wonderful, wonderful Copenhagen. Let's see who gets the reference. Everybody, is probably way too young anyway. So Andreas, tell us a little bit about yourself, who you are, what you do. We like to ask people why they while they're famous, you know, or they think they're famous. I am pretty convinced I'm not famous. I'm pretty sure. Yeah I'm not. But once you get once you're on here, then your famed increases and
you start getting autographed multiple people in the past. Yeah, no, I expect that, family man. I am. Well, I'm famous because I was on the JavaScript Jabba podcast, which is where people will know me from. I think, uh, yeah, I'm I'm a software engineer that's been building web applications for what is probably a little bit over two decades now, uh, and work with a ton of different frameworks, a ton of different stacks and technologies, always with a lot of focus on web because I always
found the it kind of to be the most fun platform. The fact that you can deploy apps right away has just always been fantastic. Now there's all sorts of building and packaging and bundling and transpiling and whatnot getting in the way. If only there was a way to get out of that. Yeah, I think that might be what we're going to be talking about today. Yeah,
yeah, so yeah. I've been always working with the web, and in the most recent couple of years, I've been sort of obsessed with this year if there's a at least it might brook a better way of building web applications, like something that lets you ship faster, lets you work faster,
and sort of more seamlessly. We've seen a ton of sort of progress in this space, I think over the last especially five years actually, but also the last ten years, like a lot have happened, right, and most recently a lot of the new build tools and hosting platforms has just made this process so much easier. But there's every time you make a progress, there's like you can see the next step, you can see the next place you want to go to. Right. So for me, this sort of meant
is the way to build applications faster. And I spend most of my time building the front and part of applications, so specifically it is that way to build you faster for web applications, and that sort of led me to start Title, which is a platform for building web applications without actually writing code. So you build all the UI in the title editor just like you would do
in a tool like webflow or any sort of similar tools. So that but what set Toddle a little bit apart is the fact that you can take you can build the UI title, but you can also actually build the logic and all the data fetching and everything else in total, so you never have to leave that tool. You can build the entire application there. And that is actually you can do all these things, but actually having to write any code to make that happen. Yeah, so no code and low code have been
quite the rage in recent years. It seems to me it's kind of like it's if our market is kind of splitting. You know. Some people are betting on, you know, meta frameworks and frameworks and meta frameworks which are really heavy into the coding part. You know, you write your UI as lines of code. Others are, like you said, are betting on a no code or low code approach of dragging and dropping their way to a web
application. A website or web application. By the way, I mentioned, people who have listened to this podcast probably know that I used to work at wigs up until two years ago, which is very much in the space as well. Its main focus though, is on the visual building of the websites only recently as it also started, you know, starting to target a similar place that you seem to be at, which is building actual business logic on
top of the of the user interface that gets constructed. So I looked at the total website, and I looked at some of your demos and videos and whatnot, And what got me really interesting is less the visual editing part. I mean, it's really cool the way the fact that you can build a user interface with drag and drop like a bit like you do with with like you said, with Webflow, or maybe with Figma, and then somehow translated
into an actual web web application or website or web page. But what got me more interested is the way that you implement business logic in a no code type approach. Your ability to actually specify interactivity and computational parts. And one of the videos that I saw was you actually using your tool to do like coding challenges. So it's really using a no code tool to implement to solve coding challenges. So how does that work? Yeah, exactly, coding with
a visual editor. Yeah, that was exactly. I only did the first of December and I released it on the fourth of December to make sure that I was not like giving away anything but essentially just showing that the flake flexibility of Totles, especially Logic Engine, means that you can you can solve edwin of code challenges in total, and again you can do it without writing code. That's the headliner right there. Yeah, but it's not exactly not writing
code. It's you're kind of drawing code as it were. I mean, it's it's empty complete. I think for those you know, more technically minded of our listeners, correct, yes, so can you explain that? Well? So, I think I think that's this. This is not entirely new. I realized before we did that that someone had done it in Sketch, the visual programming language for children, So we're not exactly the first first tool to do that. I think it still surprises a lot of people that it's
possible, often because it's not really what we associate. We don't associate visual programming with anything complex. It's generally used, and I think this actually kind of applies to a lot of no code. Most people see it as tools for people who can't code, and so if you know how to code, why would you ever touch one of those? Right? It seems unnecessary.
But I think what we're seeing in the more recent years is that there's actually really a point to that, and there's a power and flexibility in this that rivals code. You can do all the same thing. And I think you said sort of, well, it is kind of code, and I think you're right. We we I like making this distinction that it's programming but it's not code. So there's My wife is an accountant and she can't write a visual basic script to save her life. It doesn't make sense to her.
She will, you know, copy and paste something off of the internet, but like the very idea of indentation being a way to logically group something like she's done PowerPoint presentations, just bullet points, but for some reason like that, it just doesn't Maybe it's a mental block. I don't know. I would I would say that she is smart enough and capable enough to be able to decide a logical flow, but she no texts. She couldn't do it.
So I'm wondering if, if maybe this could open up an avenue for people like that where they I don't I don't understand it, but like just can't grasp the textual representation maybe could grasp like a nested flow representation. Yes, I mean we're seeing that all the time, so I think I think there's a very big benefit, which is that it just looks a lot less scary. And And the thing is like, when you've been coding for a long time, you kind of forget what it was like, Like you forget
the early days. My wife will never forget PHP. No, but you might forget some of the journey of learning it, right. I mean, my wife just changed to be a programmer. She just got a job last year as a front end developer, which is super I running now that I'm trying to move the industry away from it, but it's sort of as an opportunity for me to go back and see, like, oh, yeah, it was really hard to figure out how variable bindings work and why this value
is there now and not before. It's just you forgot because you've been thinking about it for years. You've just been thinking in a certain way. It's really interesting, you know. I kind of like to compare coding to the way that lawyers write contracts. You know, we need to describe something in a super precise way, but it still needs to be kind of readable. And writeable by humans. So lawyers in contracts invented like they took the English
language and they kind of twisted it. So it's still English, but it's not the English that you would write as a normal person. It's contract English, you know, party of the first part, part of the second part, and so forth. We as programmers took it a step further. We went further away from human languages to something that's you know, more alien to most people, which is why I think a lot of people really struggle with
it. Like, you know, the way that it executes the whole line after a line that seems to make perfect sense to us is really challenging to a lot of people that are not from from this space. Now, you know, we try to explain it by saying it's it's like a cookbook recipe or stuff like that, or the instructions that you might get from Ikia, but that just scares people even more. But but but yeah, but so talking about total for instead of code, which you know, most of our
listeners I assume know how code looks like. Now, obviously this is a podcast, this is not a visual medium, so it's kind of challenging. But can you try to describe how Total Programming looks and feels like, yeah, asolutely. So one of the things that are a little bit different with Total than other sort of previous visual programming languages is that in Total we kind
of split programming into three separate parts. So that's the first part, as you mentioned, the visual building, which is just building UI and essentially saying I want a div and a button inside the div, and it needs some attributes and I need to apply some styling, and it is all If people are familiar webflows, it's pretty much exactly the same thing you're doing in web flow, right, So that's kind of one editor one part of it.
Then we have workflows, which are essentially large flow charts, and they come in every time you have a set of actions you want to perform. So let's say when a user clicks a button, you can attach a workflow and say I want you to do this. If this, then do that, otherwise do that, then do this bit right, very sort of flow chart style execution, and it's visually built to look like a flow shot, right,
it's got our own spin on it. But I mean, if you read a flow shot, you can't immediately understand what's going on there, right, And if you're familiar with functional programming paradigms, this is sort of everything that has a side effect is an action in total, So flow shots are like actions or like do this side effect, then do that side effect, then do that side effect. So it can be update a variable, it can be call and API, it can be set page title, anything that
where you're sort of making a change in your system. That's an action. And the third part is then the formula editor. And again this is very much boring from functional programming. Formulas are entirely pure. I say entirely. We do have a few like date and time and now, so we're not entirely strict to that process, but there at least no side effects. So
there's only ever like computer value. And this looks if anybody's ever done Blender or like three D any sort of three D two, you know that there's like a material section to do that. This might not be all of your listeners, but if you ever seen any like three D two, you realize
that actually visual programming is huge in the three D space. When people are building materials and assigning material like different kind of notes, they're always doing these massive like computation graphs, and in this space like visual programming is entirely dominant, right, nobody's writing code for this. I never really understood why. I think the basic reason is just that people didn't, like most materialists didn't
know how to code. So it's easy to build a visual interface, right, but some of these can be incredibly complex in the three D world, and toddles visually look the same. It's a bunch of notes with graphs in between, and it's essentially function. It's essentially like just like you would have a JavaScript function. It produced one output, takes any number of inputs.
This is the same thing. Just the range. There's a big graph where on the right side you'll get your output, and then every node can have more one or more inputs, and you have this big tree graph structure. That's your computation graph right now. So I have a couple of questions about that. I'm thinking about where to start. Okay, So one thing that I remember from looking at your demos and also your videos is that there's a
strong reactive aspect to the way that you work. So you talked about actions being side effects, but what I saw is that very often that side effect is actually update variable. Where a variable is basically just the name value that can change. And whenever a variable changes, that variable is bound to things.
So it might be bound to some aspect of the user interface, for example, or it might be bound to other computations maybe, and whenever you update the variable, then everything that is bound to that variable automatically changes accordingly. Yeah, that's correct, and so the basic model here we use for how total works is exactly the same you'd seen React of view Angular today. Right. The underlying premise is a different between each framework, but the general
idea is the same. Right. You have some state you have either from variables or maybe from an API, and then every time that changes, you update the UI automatically. Right, And each platform has a slightly different mechanism in which that happens, but the overall concept is the same. And again that's the same model we adopted to Toddle. Right, So we tried not
to reinvent everything about web development. We're kind of just saying, what is that dominant component architecture that has won, so that pretty much every modern framework uses exactly the same idea today, right, and how can we apply that into a visual development context. So a few questions about that. So first of all, just to understand the scope of what you're doing. Everything is running client site. Correct. You don't actually code the back end, or
do you? No. Tottle is front end only, so it's set up to work with whatever back end you provide. And there's actually quite a few like no code back ends you can use as well, but a lot of them a little bit newer. So I think for larger projects, most of our customers are still coding the back end and you basically just access to back end via ajax calls. So an action might be an ajax call that either sends some data or retrieves some data and then uses it to update whatever part
of the user interface. Yeah, so in terms of backhands, from what I was seeing on your list there, it looks like it's stuff that's like headless CMSs that are hosted elsewhere. Can you build in your own you know, say you want or do you have your own customizble database for a back
end? Is that something you can do as well? Yeah? So title title just communicates over rest, so it really works with any back end you want, like you can you can coach your own you can use one of the no code ones that I established, but like, as long as it speak, you can talk to it over an a scp API, you can use it with tunnel. So how does it work with local development? Is this? I mean you have everything is done on the tuttle dot dev site
that's where editing happens. Or is there something you can do locally, like if you're working with local copy of a database. I mean, so you could set up total so that it would change based on parameters to redirect to different back ends. So you could say, for example, I would like to use a different base u L for these requests based on whether you're setting
some local storage data, whatever you're doing. But there's no local version of total that all runs in the cloud on total of them, so you could in theory you could set up something like an in rock RL that's open to the outside and communicate with your your rest API that way. Yeah, as long as again, as long as it's reachable from totles back in. Yeah, though to be fair, I would imagine such a solution. The more popular approach would be to use some sort of a headless CMS rather than trying
to run a local database or something like that. So even during development you're working with the cloud based service or something like that. Okay, so going these are my this is my geek things coming to mind as a developer. Since I live inside the bugging I'm just thinking about recent hours I've spent debugging something because I was able to run everything locally. How does that work?
Are you stuck with strictly like log files. There's the way to use break points and you know, just access through your webdev tools when you're not local, or how does the bugging going to work in a case like this. Before i'dressed answers, I just have to say that you beat me to the punch, because that was exactly going to be my next question. How does
debugging work in a visual coding type environment? So, yeah, it's a great question, and we don't have a particularly complex debugging set up yet. It's something we've gotten the pipeline, but we haven't really needed it very much yet. And that's because quite a lot of times the browsers debugging tools work for like very complex issues, but also totle itself. The way the formula
editors we call it works is that you're always working with live data. So as you're building your formulas, you're always seeing the next value that you're producing. And it's very similar in a way to coding and a rebel where you're sort of writing each line at a time. Similar here you see all the
data all the time. So when code, we sort of have a tendency to, you know, code for about ten minutes or maybe twenty if we're getting comfortable with typescript or something like that, we'll go in code and then we'll see how it works, and then eventually we'll go and figure out why it didn't work right. But in total, you're really running every part of your code all the time, so you have a tendency to catch things really
early. So we haven't really had a lot of need for it yet and therefore we haven't really prioritized it too much as we sort of go on. Obviously, there are cases where we now end up debugging issues by adding log statements, et cetera. Way you could definitely improve on that, but we're just we're not seeing it that much on the front end, to be honest. Yeah, to be honest, you could probably add some sort of a simple log if you don't have it already, could probably add a simple logging
mechanism into total so that certain actions. You know, like you said, in action is a side effect, and the side effect might be log So you could easily add an action that either logs locally into the deav tools console or sends it to some sort of a telemetry service to be collected, you know, for sessions in general, stuff like that, you probably want to
have some sort of telemetry service at one point or another. In any event, we have a log to console action that we use quite rigorously right now, and it's quite easy because again it's mostly pure functions are almost always pure functions you're working with, or formulas, right, you can really just copy part of a formula over and log it out and you can be quite confident that it's going to generate the same result. So logging logging is sort of
our main approach to debugging when needed. But again, because it's easy to build UI, sometimes you're just like building You'll just add like a paragraph into the page and write it there because then you can kind of track it in real time. Right, So if I'm doing like more complex mouse interactions, like some sort of swipe demo or something, right, I'm often just logging values live to the to the UI. I'll throw in a span and put whatever my mouth off set is in there, and then I can sort of
figure out, Okay, why is this not working? And as I'm dragging the mouse around, I can see, Okay, it's it's not setting it here, or I forgot to subtract some window with or whatever. It is the problems you always run into and trying to do math. So pull it back a bit. Can you talk to us about, like through the process of how you actually start using Total Like what let's say I'm saying, Okay, this sounds really cool, I want to try it out. What what
do I do? So you can simply go to our website and sign up right now. So there's a free tier that's sort of yeah, you go to Total dot Devin. You can sign up right there and then get started building a new project. We have a little tutorial project that's kind of a project build in Total that also at the same time explains to you, like there's also a website that explains how to build projects in Total. So you sort of go between interacting with it and editing it to get to the next
level all the time to figure out how does this actually work? And each page in that application teaches you a new concept, and after that, I'd say, if you want to really dive in and understand more, we have a ton of videos on YouTube, both of us explaining different concepts, but also a lot of us just building applications in total and showing how to achieve
different things. Cool, and what you described is free. Correct if I'm just building a demo website, and the restriction is that that demo website is hosted on your own platform, correct, yeah, yeah, so, and it'll be hosted on our domain. You'll get a subdomain of dot total dot site. If you then upgrade to pay tier, then you can add your own domain and also remove our little branding logo on the bottom of the So.
So purchasing is a let's call it the premium plan basically gets rid of the advertiser, the on page advertising, and gets you your own domain that you can Basically, I purchased a domain somewhere and I can associate it with the total website that I've built exactly anything else that I can purchase well, So we have different plans. The initial startup plans are for we sort of price that quite low at twenty dollars per user, and the Ateria is for
small startups to get started and start building in total. Right, So wait a minute, it's twenty dollars per user, not per website or something like that. It's twenty dollars per month for up to three users, and then you pay sixteen dollars a month if you do it annually. Yeah, but that is also today per project. So if you have multiple projects you need to be that needs to be in a paid plan. You're paying for each. Okay, so I've questioned what is the tool set used to build tottle?
What's protecting? Well, that's my favorite question, and because well, there's there's quite a few things. Our database is hosted by by Superbase, which is also where we get authentication a few other things. So we're running our whole data off Superbase. Uh. Then we have sort of a back end slash middle back end. I don't know if this needs a new word or have one I'm not familiar with, but we're running on cloud flower workers. We use them for two things. We both use them for server rendering
applications because obviously we're storing total code. If you will it's like an adjacent
format. We store the data in right and that needs to be rendered out as HTML, and we do that on cloud flow workers, so it's very close to the use always right and cloud Fly is also kind of our back end for the total Editor, so we use the feature they have callt durable objects that lets you essentially create a singleton instance of a data store where you can in memory store a lot of information, and then you can connect to
that with web sockets. And they kind of have this property where there can only ever be one globally one instance of that globally, so when you create a branch of your product or a project, you'll connect to your instance of
this server, which in memory keeps all the files up to date. So that means we can get things like live collaboration going by just having people right to that, and we can actually solve a lot of concurency issues by having the server close to people and not and just saying, well, the latest the latest right wins because there's never more than a few milliseconds latency between the user and the gerbil object. So that's sort of the back in part all
of the front and the whole editor. Our website, our block. Everything is built in top So we built the whole project in the project itself. Nice. Well that's very cool indeed. So you mean all the complex logic of you know, the editing process and whatnot, all of that is actually
done in your visual programming language. Yes, everything from like the left panel sidebar where you're showing all the elementaries with all the different nodes and all the drag and drop interactions of those, the formulateds that you can space pan around and summing it out while also editing these notes that are aligning themselves. Everything, everything is built in total of that project. So I think the current phrases that you're eating your own dog food? Is that correct? Ah?
It's such a negative term though, isn't it? But yes, I think so. I think that's have you had dog food? Well, don't you? By some of the ads I've seen as a newer dog foods might not be so bad anymore. Oh okay, good quality stuff out there. So it depends on what you're eating, I guess. But it definitely highlights the fact that you know, this tool is powerful. I mean, if you're able to build Toddle, then anything that the user might want to build is
probably covered. Yeah, I would say I I've been working on a lot of projects. I used to do a lot of contracting. I lived in London for like six years and jump company every six months because when you're young,
that's really fun. And I've been working on anything from small startups to like enterprise companies, And I don't think I've ever built anything as complicated as a no code as like this, right, this is in pure complexity, This is by far the worst because there's so many things like you only ever work with recursive data structures, right, that's the only everything's a tree,
everything's like recursion. Everything is like trying to figure out how how do I how does it work when you have like five hundred components on the screen at the same time, because these editor interfaces are very complex, right, Yeah, yeah, I know, I know, I know what you mean. As I said, I've worked at Wix, I've worked on the wis editor. The Wix editor is a huge applications, one of the largest I've ever worked on. It is actually implemented in React and it's a hundreds of thousands
of lines of code. But to be fair, Wix actually does a lot of dog fooding as well. So the editor is built on Native, but a lot of the UH interfaces there are built using Wix, and I think that's the same. It's true for workflow and and I really dig this approach because it really shows that you're serious about the tool your building when you're able to use it for that sort of thing. But it does bring me up bring me to another question. When you start thinking code, you start thinking
version control. Yes, how do you do version control in total? Well, so that was one of the things I had a lot when I started this project, was that there's all these there's all these different things that needs to happen for this to work. And when I said work, I mean work for me. Right. You can build a version, you can build a no code tool that lets do do version control, and most of them have some version of that, but it's usually the live version and the development
version, right. And I mean I'm coming from teams of like five if it's a small team, or twenty people for last teams, and like that is never going to work, right, And live collaborations all cool, but the reality is we don't use it very much because people work asynchronously, right, So you need essentially something like it gigs gets style version control if you want to be able to work in a team, and like we're a small team at TOTL, but we're still pushing like new features all the time and
we're working asynchroously. So unfortunately GIT is kind of tied to lines of code, so GIT wasn't really an option, or at least I couldn't find any way to make that work based on at different kind of diffing, right, you need a different diffing algorithm when you're working with adjacent data structure compared to just lines of code. So we had to build own, and we actually build it in a procedural sequel because we wanted to run directly in our database
so that we could essentially store all our files. So when we're storing files and super base, we have a table called blobs, which is stolen exactly from GIT. I spent like a couple of months trying to figure out, well maybe weeks, maybe it was months, trying to figure out how kit actually works, like going around looking up looking up like little hash keys and how do I get ls all these things and get cats or what they're called, right, to try and figure out what is the actual storage model and
how does this work? And then replicate it like probably three percent of that, which is a lot, right, because gives a kid is massive, right, But it's the same basic concept, like all files are stored based on the hash of their content, so that you can store these snapshots all the time of your files without actually and like a snapshot can be the whole project. But you don't have to double right files that hasn't changed, right.
And since we don't actually ever do like you just never do a manual commit, what we do instead is that every time you save, we basically start a throttled say commit timer, so it automatically commits every ten seconds if you're making changes, and then every one of these becomes a snapshot in the database that has a reference to these content in theexpiles. It's interesting because last a few episodes back, we actually had I forget his name. I'll remember
in a second, the guy from Bito dev Uh. It was guillade Cham from Bitto dev uh and uh, and they also kind of have their own substitute for for get for from for a different reason uh. Even though there is a certain amount of similarity in a sense, but It's interesting to see people coming up with with GIT alternatives effectively for various reasons, although I'm not sure the term alternative is the correct one, because you're not coming to a
regular project and saying, hey, use this instead of GIT. You're you're using GIT for your own very special use case, uh, which which I appreciate. Oh. I mean if I if I could have used skit, I would absolutely have used SKIT. I would not have gone down this road if I had an alternative, Right, but you still have the possibility to like go back to a previous revision or version, or maybe even do something
like a diff between you know, or bisecting or stuff like that. All all this, all the the good stuff that people associate with visual editing with not visual think with source control. I mean, sorry, Yeah, we we have a somewhat limited set, Like obviously we're not implementing all of GIT, right, so we've we've made some We've made some high level decisions that at least for now, seems to work just fine. So it's always trunk
based. You only ever merging out from like branching out from from the main branch and only ever merging into the main branch. Right, and that sort of lets you push real quick like that frequently and that that's seems to be just fine. That was kind of similar to the workflow we used to have when working in code as well. So for now we're sort of we're doing
some shortcuts compared to full get set up right. Yeah. By the way, it is worth mentioning that Donus Torvaldez actually wrote git in like a weekend and people, you know, people know him for Linux, but they maybe they should know him forget Uh. It took me longer to copy it that it took him to write it. Then. Yeah, he basically was committing get into get by by the beginning of the week or something like that. Yeah, it's an interesting story. He's quite a guy. Yeah. So
how big do your flow charts get? Well? Interesting, the flow charts, which is sort of an us the action part, they never get very big. I think the biggest we have is something like twenty nodes or so, like they're they're not that complex, and that's because again we all the actual computation logic is moved into formulas, right, so we have this separation, but the actual steps is like if this, then do that each of these workflows are like one action happening when you, for example, you click
a button. So if you end up taking a look at like let's say your rat code and go, well, how many things am I doing when I click this button? The reality is you're rarely doing that. Many most of the lines are in order to computer value, and then some of them actually are aren't working side effects. Right, So the float charts are usually
quite small. We actually in our UI we actually have a very small window initially dedicate to them because that sort of sits on top of the editor because most of them are just two or three actions in a row, or even one is the most popular, right most of the times, just when you click this button, do this one thing, or do these two things or these three things, and so most of them are really really simple. The more complex one again, it never gets out of hand for them. Formulas
are kind of a little bit different. We have some formulas in total that are definitely not small, but we also have the options of like you can go and say this part of the logic, I can extract that into what we call a component formula and then essentially give it a name. Right, so you have all the same just like you wouldn't write all this in one function and JavaScript, you can do the same in totals. I'm going to
extract this assign that a name. So this thing is manageable, right, and so effectively you only view one flow charge at a time, really correct? Yeah? Yeah? So and and a quote unquote program might have a lot of flow charts in it, but each one of them would be small, and you only view each flow chart by itself. But you can nest flow charts by associating flow charts with functions. Yeah, we don't really have
anything we specifically called functions. We we sort of functions are it are divided into actions and formulas I mean formula yeah, yeah, by the way, so a question about that. I mean, over the years, there has been a lot of research into visual programming h. Most of it, by the way, from what I know, kind of failed. H. There
have not been a whole lot of really successful visual programming environments. You might say that small talk was a visual programming environment and that it's aceeded, but it was actually based on code and and actual and actual solutions like you mentioned one that was like for for kids. I know that there were a lot of attempts in that area. So so my two questions I guess are,
how did you come with your own unique model for doing it? Is like, is it like based on research or just your ideas or what or things that you've read elsewhere? And why do you think yours will succeed where so many previous attempts have you know, effectively failed. That is a good question, and it's very very true that this is like visual programming is not something where most programs go, oh, that's definitely the future, because it's very
definitely the past. And I think I think it's been fun when people come like, oh, this is brand new, you got to go. The earliest example I've found is nineteen seventy six, so it's not that new. It's before we had visual operating systems. The first visual program language was created. So there's nothing new about it, right. It's it's very much an elephant graveyard of a tech technology choice to get into. But I think I think I at least have a theory as to why the other languages failed or
why this never really made it anywhere. And essentially, whether I'm right or not, it's probably going to determine, you know, the success But my theory is that when you take a programming language and then translated one to one into a visual programming language, which most of the attempts are right. Sketch is also a good example of this, right, which is the one I
mentioned earlier. Right, when you try to do it one to one, what you end up with is a programming language that takes up a lot more screen space than code, and so and tuddle has the same a feature or problem depending on your perspective. Right, it takes a lot more space on screen for something that like what would essentially be like four or five lines of
code, will take up an entire screen in total. And if you start then going through your code and saying, well if I needed an entire screen for every four or five lines of code, it's very clear why that's not a particularly good setup, right, So the trick to visual program I'll interrupt you for a second just to make it clear for our listeners why this is the case. One example that I saw on your demos was the simple if statement that in code, if is literally like four lines of code. If
condition you know, then something else, something else. So that's literally like four lines code, and in your case it's a box and a line and a box and a line. So obviously all that visual representation takes much more screen area than, like you said, than just four lines of code.
Yeah, and that it's kind of the same thing as this code. If it fits on the screen, it's a lot easier to understand than if you have to start navigating right once functions start to not fit on a single screen and in all they start to get a lot more complicated to work with. It's not the only dimension, but it's a pretty good indication. And the
same thing is true for visual programming. So if you just translate code one to one to a visual medium, you'll just have a like you'll do a lot of panning all the time, and that's the worst possible way to find anything right. That's never going to work. So the trick is the trick at least what toddled us is always to try and say, when can we
break this up into smaller parts that are easy to navigate. And because we sort of broke up at like the action's workflows and the formulas here, it means that normally one workflow with twenty notes might have been massive, right, it might have been take up like one hundred screens or something, maybe not quite but something along those lines, right, because it's just takes up so
much space. But because you're navigating this visually and quite effectively, you don't have to look at it all of it at the time, So you get to sort of break your program up into smaller bits and only like really easily navigate to the part of your code or visual code in this case that you need to work with. And that kind of lets us get away with using a lot more space for all of it because the tools we've given you to navigate your code, if you want to say, like or your app are
a lot more efficient. Interesting, And again it has to do with the fact that you're never seeing the flow chart as a whole. It's never listed this one big flow chart. It's always a specific flow chart that's associated with a particular event leading to a particular action, let's say, through some formulas. Yeah, and and I guess also the reactive aspect is also a big help here, because again you split things and at the reactivity boundary. Yeah,
for sure. I mean in terms of it's not entirely something I mean, I mean, nothing is ever something you invented entirely right, it's always
based on a hundred other things. There was a lot of as you probably heard already me talking about functional program I think I took a lot of inspiration for that paradigm exactly because it does make this hard split between what is in functional program impure and impure and and it's a it's a quite nice and quite sensible way to divide your program and actually saying, okay, when if I separated into what is an action, what is the side effect, and what
is not there's there's, it sort of becomes a nice logical boundary to split your program down, and that that's a big part of why it works quite well. And actions I assume always work as if they're synchronous, correct, Yes, but an action can emit an event, yeah, sure, but for example, it's waiting for it's downloading data. Until you get the data,
you won't proceed to the next step. Yeah. So when they're listed sort of underneath each other in a in an action chain, they're executing synchronously, and if you want to wait for something, right, that action can then say I'm going to admit an event eventually, and then you can start a new workflow of that. M okay, cool, So it's really, as you said, you were inspired by various things, but it was really your own invention. Yeah, I mean, it depends on how much you're
inspired. I suppose it's definitely a new take. It's not entirely original. Like, you can find a lot of examples of products and different kind of visual programming that are very similar in many ways, but I hadn't really seen anyone do it in the same way for solving the same kind of problem. So really I have two more quick questions. One is what's your solution for
authentication? I mean, if you build Toddle with it, and obviously you have I think you mentioned that you have authentication built in, but does it mean that also if I'm using total for my own app, I can integrate authentication into it. And the second question is is it is any part of it open source? Yes, good question. I'll take them in in the
order of the given. Then, So the way we handle authentication is that because we're front and only, we don't technically handle authentication, right, Authentication kind of have to live with your data because that's what you're authenticating and essentially
limiting access to so authentication is very much a back end problem. What we've done is essentially create a simple way for storing an authentication token as an HDP only cookie, and then we have a proxy layer also on cloud layer, where you can proxy API request too, and we can essentially just smack that token onto it. So let's say you are making a request for your API and for that to work, it needs to have a specific user token as
an outhheader. Right. What you would do in Total is essentially you would first authenticate through your service and then either come back to Total while redirect, or you might be like use a name password log in and then get a token back, and then you're send essentially told token Total to stall that token, and we'll store it as an outtoken, and that'll be stored in ACP only, so there's no even if there's foreign scripts on the side, they're
not going to be able to sniff that out because it's never actually sent back to the client again. And then when you're making an API request from Total, it first goes through our cloud fly worker and there you can then configure to say I want to I want to add this token in as authentication for this request, and then that'll make the authenticate request and come back with the data. So you're using the cloud Flare worker as a sort of a segregation
layer. In this context, you're offloading what needs to be secure off of the front end into the cloud flow worker where third party code can't access it. Take that. That was not actually the point of doing that. It's just I really hate cause issues. So that's kind of that was the original point of saying, if I just added real simple proxy here, I never have to deal with that again. And that sounds very nice, But actually
authentication became a really nice added solution there. And I think we're sort of looking at can we build some more interesting like right now we cash response based on the service send cash head, but we can see a lot of cases what it might actually be nice to be able to override that locally and say, I know the service edge you can only cast for this long, but actually I would like you to cast for just a few seconds or set some
stale vi revalidate for extra performance. Right, So it's sort of it sort of adds on a lot of benefits that we can also tap into down the line. Cool and about the open source part, there's nothing right now that is open source we are talking about it. I'm not quite sure the main reason it's not open sources actually just that we thought it would take longer to develop in public than private. And the other bit is we're quite tied into
cloud Flare at this point. Right there's quite a lot of our text that is built on cloud Flair, and I think we're probably going even further that way because there's a lot of that technology that just kind of fits really perfectly with this. Well. You know, there's an interesting argument going on happening currently about how tied to versaill is next year. Yes, and that's like
kind of the quote unquote epitome of open source development environment. Yes, yet it turned out it turns out at least that's what For example, Kent wrote in his critique that it's a lot of it is tied to versall services, but you know, it is what it is liking at home that is epitome. E me, sorry, It's okay. I said it epotone for a long time too, because you read it and you never hear anyone say it.
Did you also say fake aid instead of pasade? No? But I said subtle when I was in third grade, or so I said subtle before we wrap up, because we are really approaching the end of our of our show. Is there anything else that our listeners really need to know about total, you know, additional things that are worth mentioning. Yes, I would like to know where the name came from myself, if you have like little toddlers running around at home or what was the what were you trying to emphasize
with that name? I do, well, I don't actually have a toddlers right now. I've got a six year old and a three months old, so I've got on either side. But well, the name is my wife came up with that. I am not sure. I'm tiredly understand why it's called Totle, but when she suggested it, everyone liked it, and eventually I sort of felt powerless to do anything about it. And now I've kind
of grown to like it, like it's it's sort of just become. You know, when you name something long enough, right, eventually anything else sounds weird anymore? Is the epitome of a great name? I mean epitome? Sorry it is. So while while we've been talking, I've been playing around with this thing, and I got into the calculator app because I figured, Okay, that's going to be simple programming. I'll be able to understand. And I actually don't. I fundamentally don't get how this is working, like
somewhere very well. I guess i'd have to go through the tutorial, but I just opened up the example app and I oh, and I click on the equals button and I look at the click action and I can see there's the flow chart just going down and it and it sets result to zero, which seems weird because I wanted to set the result of whatever the previous operations were put together. It sets the operator to nothing and then it sets the current value to zero. That's not my experience. When I click on two
plus two equals, I get four, not zero. So is there how what? What's what's the paradigm here or the thing that I need to know to to make this work? From a brain, I think, I think this is less of a total thing. And just like I had a really weird idea in my head about how the dates a model for calculator should be.
Oh okay, but it's essentially it's sort of evolved because I wanted that additional features and a lot of calculus have when you when you keep planting pressing equals, like, there's a lot way when it sort of repeats these things. So I ended sort of doing a few versions of that, and I think this was sort of what I came up with was a smart way of in a relatively minimal way to store this. But yeah, I don't think
that it's not so much the total thing is. It's just I mean I would have probably done the same thing in code, had I've been in the same mindset at that point. Well, I see where it sets the variable, but I don't see where it actually carries out the actions, Like where is the logic stored in this thing? So the logic is usually stored in the formulas, right, that's usually where you compute the values. Let me check and see, because I don't. I don't see it right until AJA
finds it. Anything else undressed that you want to mention, Yeah, I think I think one thing that's that's because we've been talking very much developer focused
on on this podcast. One of the really nice benefits of tottle, and actually one of the main things that we find out that we found out we were solving here is that in a traditional setup, especially when you work on the front end, we sort of end up having like an assembly line of usually a product manager that feeds the idea for a feature to a designer that then builds a design that feeds it the developer that then goes to a QA
and then all of this goes back and forth in certain circles depending on how much many people get back in the iterations. Right, it rarely ever goes once. And even though we do say agile a lot, and we love saying agile all of us, I think it's still kind of an assembly line, right, it still kind of follows this frokite off. And one of the things we really found about Tottle that was quite unique is that everyone in
our company are building in total. So my co founder is a designer and he's not I mean, he's not how very capable in total and can do quite complex logic, but he doesn't like to do it, so he rarely does. Right, He'll just work on the design and the fact that we can build in the same platform, and it's not like a handoff where he first does all the visual design and figma and then shows me a picture of an UI and now can you go and build it from scratch? Right?
But actually he'll just build it and if he needs help with the logic, I can step in fix that, or I'll build something and it'll look absolutely horrible, which actually happens a lot, and then he'll just go in after and make it look like what did you look like? And the fact that we don't have to work in cereal but can work in parallel for this has
been an incredible speak boost. And it's not just us, like our new head of marketing is like building our partnership platform in total because he didn't want to, like, we were doing other things right and this was important, so it's better he just did it it. Interesting point here there are a growing number of solutions out there that are implementing some mechanism of taking figma and translating it into code, So that step seems to be I wouldn't quite call
it solved, but much easier than it used to be. So it's much less about the process of here's a pigma drawing or whatever, now recreate it in code. You can't get the initial code very often these days, or at least something that you can start from. What is missing from my perspective, and I think the total is a very interesting solution. Here is the other way around. I mean that figma to code is kind of a one
time thing. You can't really take the code and the changes you've made in the code and then take it back into Pigma up uh and so so it's like one shot uh. And and if some if the designer then wants to make a change, the process needs to kind of happen again in a lot of ways, or it becomes a very manual process then and and and what's really great about the solutions like puddles is that they kind of you know, this throwing things over the wall doesn't doesn't exist. It's it's the same.
It's a single tool that handles the entire flow. So so yeah, for sure, I see that a lot of value there. And it's not just the signus, right, Like if if a product manager goes in and says, like, why on earth is this text there? This makes this is not descriptive role, This doesn't make any sense, right, this is the worst way of explaining this feature. They can just go and fix it,
right, And it doesn't break everything. It doesn't like it's not going to automatically not compile because they're changing text or they're changing an image, and that's really easy to do, right, So like a lot of time, making a change in tottle is as easy as making a jury ticket for that change, and then you can just not do that and that the amount of speed and velocity you get from that is like like unlike anything I've seen before.
And Total right now is a five person company that are building a no code platform or a visual development platform for building this right, It's not an easy problem to solve, and the reason why we can do that is because we can be incredibly efficient with our time by actually using Total to ship this way. Okay, I think we're more or less hitting the end of our show. So before we go to picks, if people want to contact you undress to you know, learn more about Totle, try it out, you know,
discuss your thoughts and ideas about no code and stuff like that. What's the best way to reach you and discuss these things with you? So they can definitely find me on Twitter. I'm quite a lot on there. My Twitter handle is color of It, which is a character from the hit Tiger's Guide to the Galaxy. But I spelled his name wrong, so maybe we'll add it in a note somewhere. But they can also find both me and everything about I'm totled a dev There's a lot of links to both Twitter and
social platforms and total. Maybe we should have set it up, Francis t O D D L E. Yeah, obviously it will be in the show notes and the episode title and whatnot. Okay, then I think it's time to push on into picks. So who wants to start a j You want to go first this time? Sure? Okay, let's see what if I got to pick here? Ah. I watched the movie A Man Called Auto with Tom Hanks, and I have mixed feelings about it. Give me both.
But so it started out so hilarious, and then about halfway through the movie it kind of switched from being a comedy to being the message and I it just I yeah, And then I started to feel like I was getting preached to, and so the ending I just felt like they ruined it. They had such a strong comedy and then but they had to make sure that I got the message. They could have just had the elements that they had without explicitly telling us that, you know, men are stupid nitwits and you
know, like this, like it just it got weird. It got weird somewhere between half and halfway through and three quarters through. And but I think I'd still recommend it because the first half was so good. I just, I mean, just the opening scene was comic gold. Comic gold. He's buying a length of rope at the hardware store, right and they won't sell him five feet of rope because the computer system doesn't have a way to It's just yeah, and he's he's like, you mean to tell me the computer
can't do math on five feet anyway? It just so for me, and being a grumpy old man myself, I just I loved it. It was it was just so good. And until he got to the part where he's got a really weird relationship with his neighbor who is married and has a husband, and yet he and her are going on dates. And I didn't say
it that way out, but that part was pretty good. Oh okay, but yeah, that scene in the story reminds me of the father of the Bride of Steve Martin where he goes to the store and he's raging about how there's so many buns and a hot dog package. But you know, there's more hot dogs in a package than there are buns in a package, and he's taking out and yeah, get short in jail because of his rampage at the store. Yeah, so that that anyway, So I still recommend it.
I just I just wish they would have just kept the comic tone the whole way through rather than switching over to I just I don't know whatever it was towards the end there. But but then let's see, other than that, I had something, had something I was gonna pick, and I don't remember what it is, so well, will uh, I'll pick the Super Mario Brothers movie as well. Oh no, wait, wait there was a The Prime again? What he did something? Oh now I remember John them
Blow? So the Prime again? Primagen, Primagen, primage. I keep on saying it wrong. I'm sorry, my apologies to the Prime. He he I watched a video of his where he did a reaction to Jonathan Blow, but he did actually watch the full Jonathan Blow video. Jonathan Blow is another crotchety old man that I would just get along with swimmingly, I am sure, and his his talk, the full one, was that the snippet was being reacted to. It is called Preventing the Collapse of Civilization, and
there was some pure comic gold in this as well. But he talks about how we have all these records of civilizations with ancient mysteries that we can't unravel or we know a process by which it works or how it works, but we don't know how to reproduce it. And he talked about how software engineering may be in one of these peaks of civilization before the decline, where the wisdom of the ancients is lost and then people aren't able to to Uh.
You got to watch the talk actually, and I'm not doing a justice and I'm making it sound probably more complicated and stupid, but it was super entertaining,
great history lesson and some good laughs. And now now I've been watching some of Jonathan Blow's other stuff and he's based as they say, so Jonathan Blow by the way people are saying that, you know, archaeologists are saying that our age is our era is very problematic, that we're probably not going to leave any a lot of any records behind because everything is digital, so you know, in in a thousand years, there will be nothing left that's
readable or accessible from from this era. And that's what kind of makes us think, you know, maybe the Egyptians did have supercomputers. Maybe maybe AI generated the pyramids. Yeah, okay, moving on, Steve, what about you. Let's see I actually have a couple of picks before we get to the high point of the episode, which is my dad jokes if you didn't
know that Andreas So. First of all, AJ made a comment that reminds me of one of my favorite XKCD cartoons called Wisdom of the Ancients h and I think about it often, and it basically shows it says, never have I felt so close to another soul and so helplessly alone as when I google an error and there's one result a thread by someone with the same problem and no answer, last posted in two thousand and three, and it shows the
guys shaking his is Denver Coder nine, Actually Denvercoder nine, what did you see? And I have I've actually used that comic in the past, like where I have posted a question like on stack overflow and never got an answer. And I'll come back and say, in order to avoid being this guy, and put a link to this cartoon and then I'll provide my answer, so God bless you. It's a great cartoon. It's not quite as good as Nerd Sniping or Bobby Tables in my estimation of x k CD cartoons,
but it's one of the best. Or the pseudo pseudo make me a sandwich, that's the other one anyway. And then a definite highbrow piece of something to pick is an ad I have to see on Twitter. Normally I can't stand ads on Twitter and just get past them. But this is a very effective tool made by a company called I don't know, I said, resik b R e z K. And it is a fart machine toy rubber. It's awesome and just a little thing you hold in your hand and squeeze it
and you can understand guess the sound that it makes. But looks like a very amazing tool and only thirteen bucks. So if anybody's got all that, Dad wasn't tempted, Oh, I was so tempted. Well, it's funny. Reminded me also because I got had a white elephant exchange at my gym here recently within the past couple of weeks, and one of the things that I gave as a toy that somebody else got was a whoopee cushion. So that tells you all you need to know about my humor. Anyway, now
to the talking about your humor. Yes, speaking of my humor, the dad jokes of the week, and this here's a this is a Christmas themes question. What do you call a broke Santa Claus, Saint Nichol less. So well, by the way, I did figure out how to upload sound effects. I just got to get it done so I will have the rim shots for those who enjoy that. Number two, a Roman walks into a bar, holds up two fingers and says, I'll have five beers please,
you know five? Okay, okay, that's a good one. If you if you've ever seen mel Brooks History of the World Part one, you know he's got all the visual gags throughout all his movies like this, and there's one of them is the X and V Tent X and V sent Store. Well you remember is that it's good to be the King? Yes, it's
good to be the king. I think Patrick Stewart used the same thing in one of the rock in Robin Hood Men and Tights when he kisses made Marion it's good to be the king, and then finally questioned, so, how can a room full of married people be empty because there's not a single person in it anyway. Okay, so now it's my turn before we hand it over to you, Anderson and dressed. Sorry, So if you have you
have a few moments more to think about what you want to pick. So I usually pick something about the war in Israel and Ukraine and depress everybody. So instead I won't talk about it that much. I just mentioned that I tweeted something in kind of a relation to that, which is one of my tweets that got the most likes ever. I think it got something like nineteen hundred likes, which is a lot for me, which is somebody tweeted that
a stupid statement that you know that Jesus was Palestinian. Now you can be in favor of the Palestinians on this side of the debate. You can be in favor of Israelis. You can in fact be in favor of both sides, which is what I kind of tried to be, especially when I'm in a giving mood. But you know, don't try to rewrite history, please. You know Jesus was a Jewish Man living in a Kingdom of Judea. Yes, Palestinian hadn't even been created with a couple of centuries. That's that's
kind of true. There was, there was the well, it's not exactly one hundred percent true. I mean, the Greeks living there did use the term Palestine or Philistine as as as a way to refer to the coastal region, but the province wasn't called Palestine until about a century and a half later anyway. So but you know, so I tweeted that, and I got a lot of likes for that, so wo be for me about that. By the way, epic too. Yeah. The other thing is that I
really like the community notes feature. I mean, I'm I'm critical of a lot of things that Elon Musk did you know, does and did and whatnot, But the community notes are a great addition to Twitter. I think it x or whatever it's called these days, because you know, it makes a
huge difference about these sort of things. And and in this case as well, I mean, people put you know, after I wrote my tweet, people put a community note in there that basically said something along the same lines, and and it's it's really I've yet to see a community note which I really objected to. Let's put it this way. Most of them have been really on point anyway. So and my final pick is we we watched the series on TV, which unfortunately turns out it's going it's going to have this
only one season. It wasn't continued, but we really enjoyed it. It's called Lucky Hank. It's with Bob Odenkirk, who might be you know, very familiar from his roles on you know, on Breaking Bad and uh on ah, what's the better call? So exactly I've was having like my brain throws uh. And he plays the department chairman of the English of the English department in this like small college and it's like a comedy drama and we enjoyed it a lot. Uh. And unfortunately, like I said, it's it's
not going to be continued for a second season. But I still really recommend watching watching this and you know, we enjoyed it. So those would be my picks, and what and do you have any picks for us? Yes, I do actually have a couple of picks. I think the first one since since we had a movie as the first pick, I want to add one in. I just finished watching The Last Action Hero with my wife. Not exactly a recent movie, but you hadn't seen it before, and I
got to say, I think that's a classic that still holds up. So that's gonna be my first pick. I can still remember the ads for that when that movie first came out, and they had they would do. They had two voice actors doing spoofs of stallone and Schwartzenegger, And the one line I always remember for this is you have more like Last Action zero, you know, still on making fun of Schortzenegger. But yeah, that brings back some memories. Excellent, just sneaking another dead joke in like that. That's
masterfully done. By the way, Oh thank you. Lots of practice. That was I can't take credit because that was actually a line from the ad, but it was still a good one. But yeah, I think that that one still holds up with my book. The other thing is a little
bit on topic. Actually it's a it's a talk you can find it on YouTube by god called Brett Victor, who for studying different kinds of use of interfaces and the kinds of ways we interact with computers, and he did a talk called the future of programming, and the whole setting, the whole sort of theme of the talk is that he's pretending to be giving this talk I think in nineteen seventy something around there. It's actually in like I think,
early two thousands, but he's sort of pretending. So he brought an overhead projector on stage and he's changing all the slides and doing the whole thing, playing it long, and he's talking about that from this point in time when computers really started to take off and everybody could see it was going to be the future, but nobody had any idea what that future looked like. He stood there and said, what are the predictions we're making, and what will
it definitely look like? And obviously none of those predictions actually ended up being true. But it's a really interesting take both in how many times people couldn't dream big enough compared to what was actually going to happen, but also how many times where we may be settled for something that wasn't what it could be right, like we could have probably had more right why didn't this happen? The interesting thing about people making predictions is that we generally take what we know
and we extrapolate on it. We we rarely think about you know, it's essentially impossible to think about the new ideas. So like when people in like the fifties imagined what our century will look like, they thought, hey, we have cars, we know about planes, so we'll probably have flying cars. But nobody thought about, I don't know, like like an iPhone, because you know, the concept just you know, it wasn't there. So
you take the ideas that you have and you extrapolate from that. There's a famous story about, you know, when when semiconductors were starting to happen, you know, prior to that, they had the vacuum tubes, before they had the semiconductors and transistors, and what one of the scientists was actually asked, you know, how small would have would a single bit get or would the and and he said, as small as small as possible, where when
you where you can still replace one when it burns out. Now today obviously we we just take this entire wafer with billions of bits on it and just throw it in the garbage. But he couldn't envision that. Uh, you know, so we kind of like stuck in the paradigms that we know. It's really it's it's such an impossible to think of an alternative paradigm. One of the one of the founders of the university I went to, is quoted
for saying flying machines that are heavier than air are impossible. There's a few people that made Yeah, it's it's an interesting statement. I saw interesting talk about it. Where the point of the speaker was is that they should have known it was possible because they could have opened the window and looked at birds. So if birds can do it, then you know, it's theoretically possible
to build a machine that can do that can do it. But you know, which is his argument why self driving cars are eventually bound to happen, that if people can do it, we can eventually be able to build a machine that does it. Anyway, I think that more or less concludes our episode for today, So Undressed, thank you very much for coming on and telling and explaining total to us and telling us about it. It's very very interesting project and a very interesting take, and you know, I highly recommend
for our listeners to check it out. And that's it. By everybody.