Skip to content

Lu Wilson - TodePond, TLDraw, and the Future of Software Interaction

Lu Wilson (TodePond) from TLDraw and Ink & Switch demonstrates creative coding experiments that push the boundaries of software interaction.

@devtools.fm
Jun 23, 202450 min read

his week we have Lu Wilson (also known as TodePond) on the podcast to talk about their adventure in creating coding. Lu works at TLDraw making fantastic demo of what can build built on TLDraw by using AI in creative ways. They are also a resident at Ink and Switch and they do explorations in the future of computing.

Episode sponsored By Clerk (https://clerk.com)

Become a paid subscriber our patreon, spotify, or apple podcasts for the full episode.

Tooltips

Andrew

Justin

Lu

Sections

  • [00:00:00] Intro
  • [00:02:19] Lu's Journey with Team Fortress 2
  • [00:08:13] Ad
  • [00:10:00] Creative Coding and Teaching
  • [00:14:13] Philosophy on Tools and Technology
  • [00:21:06] Exploring AI and TLDraw
  • [00:30:51] Utilizing Different AI Mode
  • [00:36:02] Challenges and Feedback
  • [00:38:46] Research at Ink and Switch
  • [00:43:22] Future of Software Interaction
  • [00:48:44] Tool Tips

Transcript

Lu: [00:00:00] I'm worried about where an AI does stuff for you and you're not involved even if you want to be involved.

Sure, if you don't want to be involved, fine, great, but what if I want to be involved? What if I want to tweak an output of an AI,~~ you know, ~~what if I want to influence it more?

[00:00:22] Intro

Andrew: Hello, welcome to the DevTools FM podcast. This is a podcast about developer tools and the people who make them. I'm Andrew. And this is my cohost, Justin.

Justin: Hey everyone. We're really excited to have Lu Wilson on the podcast with us today. So Lu, also known as TodePond, uh, has been doing a lot of really interesting demos at TLDraw. I'm so excited to dig into that. Uh, Lu, thank you so much for being here. Um, I've been going through your blog over the last several days, and there's just such rich writing.

And also, I just love the voice that you have, the creative voice. And I stumbled upon this one [00:01:00] article that you wrote about how the Toad Pond name came to be. So I would love to talk more about that, but maybe before we talk about that, Can you tell our listeners a little bit more about yourself?

Lu: Yeah, sure. Hi, I'm, I'm Lu, or Luke, um, either is fine. And yeah, I work here at TLDraw, um, four days a week. Um, mostly my job is, at the moment, it's making these wacky experiments, trying to push the boundaries of what's possible with this TLDraw library. Like what's possible on a canvas. Um, but yeah, like you say, I, I also write way too much on, on my blog.

Um, which, which is a more recent thing. Um, and like, yeah, I also go by Toad Pond, I have a YouTube channel, where I post really stupid videos. Um, and I'm also researcher in residence currently at, uh, Ink and Switch, which is independent research lab. So I'm [00:02:00] doing a bit too much at the moment. Uh, really happy to be here to talk to you about like whatever, whatever part you'd like to hear about really.

Justin: Yeah. I mean, that's all exciting. Uh, again, love the work that you're doing at TL draw. We're both big, big fans of ink and switch. They've done a lot of really cool stuff. So excited to talk about that too. ~~Uh, but so I read, uh, one of your articles that was called, it's called like my name, Toad Pond, and kind of talking about where the origins of that came from and one of the things that I loved is it started from like a team Fortress ~~

Lu: Justin

frozen for you as well?

Andrew: He is. Yeah.

Justin: Oh

Lu: All right. Okay. It's not just me. I was worried for a second. Oh, I hear. Oh, he's back. He's

Andrew: we, we, we did not hear that question.

Justin: ~~Okay. All right. Uh, uh, preamble. Um, so this records locally. Um, and you get a low res version like sent to you. So if I pause or if if you pause in the middle of talking, just like finish your sentence and then we can edit and post because it will all get uploaded. Uh, let me start. Um, ~~

[00:02:19] Lu's Journey with Team Fortress 2

Justin: so one of the articles that you wrote that I really like is about the origin of the.

Toad pod name, and you start by describing kind of, uh, some mods that you were writing for Team Fortress 2 way back in the day. So can you kind of tell us that story about like how it evolved?

Lu: Yeah. Yeah, sure. So I guess my entrance into coding. was through the game Team Fortress 2. And if you don't know, there's like a modding community there that makes all sorts of customizations for the game in this language called Source Porn. And it's, it's not as rude as it sounds, right? It's, it's like C, and that was my first [00:03:00] language.

Basically, me and a friend wanted to customize the game. We wanted to add new items. And, and, and tweak numbers and things like that. Um, it was funny because like I was, I think I was like 16 at the time. And this was my first experience of putting something stupid up on the internet and it going relatively viral.

And you know, this is, this is in Team Fortress 2 modding community viral. So it's not that impressive. But for me, it was, it was crazy. And, um, uh, I put out like a, I made up an imaginary update for the game, um, called the Biggest Update Ever or something, or something stupid. And, um, and people started to ask me, Are you actually going to make this for real?

Right, are you actually going to take these, these crazy, like, jokey ideas, um, and make them real? And me and my friend decided that we wanted to [00:04:00] try to do that. So, that's why I learned to code um We, we created a little community around it called TF2 Tightrope. ~~Um, ~~it had, we had quite a lot of regular players and community members.

And so that again was my first experience in trying to lead a community and like build a community at the age of like 16, 17. I did a terrible job and learned a lot. Um, I eventually just didn't have enough time, went to uni, handed it over to someone else. But I still kept on, like, working away, trying to build, ~~um, ~~like, a fully customizable Team Fortress 2.

And I ended up doing the really stupid thing of trying to build a programming language to let anyone do it. Like, um, and it was supposed to be really easy to do, even if you don't know how to program. Because I wanted to help out people like me, who just wanted to try stuff. Um, and, um, I eventually realized that that was a waste of time, because, [00:05:00] like, why am I building a programming language for this one video game?

But I actually started to really enjoy it, um, and I enjoyed, like, the stupidness of this language. Like, it was very jokey, it had lots of jokey features in it, like, that weren't actually good. And so then, this is how, and you may have heard of it, Dreambird got created. Right? So I changed this jokey language, which was only for Team Fortress 2, into a jokey kind of like parody of JavaScript.

And that's now like my most, uh, successful, or like most viral project, maybe? Um, like, skip a few years, and I needed like a better name that wasn't related to Team Fortress 2 at all. Um, so, my partner, uh, Uh, Flora, hello Flora, uh, she suggested I call it Toad, because it's like code with a T, and she likes frogs and toads, um, and she, [00:06:00] she's a, she's an illustrator and animator and she drew a little red frog, and, and it's just stuck, it's just stuck this whole time.

Um, that's, there's, there's even more detail in the, in the blog post, but that's like probably as deep as I should go right now. Um, Yeah, glad, glad to share that with people now, nowadays.

Justin: It's a fun story, but your, your brand is like your brand. You, the, the toad is very recognizable. Like, I think I knew you as TodePond before I even knew your name was Lou. It's like, that's just like how I had seen, uh, the references and everything. So that's, that's a really cool story.

Lu: Yeah, I mean, it's, it's been nice, like, it's gone through a few revisions over the years, right, like, it was very wobbly, like, it was very sketchy for a few years, and then Flora saw it one day, and she's like, I'm so I have to clean that up. I I didn't like, when I first drew that, I didn't realise you were gonna use it for so much.

I have to clean it up. So, there's a point in in like, the [00:07:00] YouTube videos where it gets a bit smoother and stuff. So it's gone through a few revisions. But yeah, the same red toad.

Justin: That's awesome.

Andrew: Does your partner do all your design for those sorts of things? I noticed you have like a very common theme of illustrations throughout your projects.

Lu: Right, um, she yeah, she mostly does. And like, um, uh, I feel very fortunate about that. And and like, there's a lot of hand drawn Like, frame by frame animation in my YouTube videos, and that's all by her. Um, I, I can't afford her, but if I ask very nicely, then she does. Or, like, I realized another way that, that motivates her to help is that often I try to draw and animate these things myself.

And it looks really bad and she sees it over my shoulder and just pushes me out of the way and does a much better job at it, right? So, um, yeah, I mean, like, it's, it's amazing. Like, I feel very lucky to, um, be building these like creative coding projects and have [00:08:00] this kind of like, and then combine it with some animation. Like, I don't see anyone else doing that sort of thing. So it feels nice to be able to. I don't know. But yeah, like you say, like have a bit of a brand around it. Um, yeah.

[00:08:13] Ad

Hey there. We'd like to thank our sponsor for the week clerk. Clerk offers complete user management out of the box. So you don't have to worry about getting off, set up in your app. You can just focus on actually building your app

clerk supports a whole bunch of different ways to authenticate into your app. You can do traditional email and password, you can do. Social logins. They have SSO, they have magic links, literally any way you would want to have your users authenticate, you can do it through clerk.

But that's just the tip of the iceberg. They have a whole bunch of other things that you probably don't want to do. Like the texting of bots or trying to log into your app, they support that all for you.

One of the best things about clerk is their components.

integrating with clerk, all you have to do is use one simple component. Usually today I saw a tweet where. You get a whole.

~~We ~~get a whole nice polished [00:09:00] experience for login. That's literally just one react component, no props, easiest thing to do in the world. And you'll be able to start building what you want instead of off today. if components aren't your jam, they still have your back. They have a wonderful SDK on many different languages. That allows you to integrate with our authentication. Like a breeze. thing about clerk is their free tier. You get up to You get up to 10,000 monthly active users before you start paying a dime.

If you want to learn more about clerk, head over to clerk.com to check them out, or you can go back to episode 75, where we interviewed one of the co-founders Brayden. It's a really good listen and you'll get some perspective on where they came and where they plan to go. If you're tired of hearing these ads, you can become a member on one of the various channels we offer it. With that, you'll get that episode a little bit earlier and ad-free, and also be supporting the podcast.

But if you want to find another way to support the podcast@overtoshop.dev tools.fm. And buy a hat or something. Anything you can do helps keep the podcast going. And with that, let's get back to the [00:10:00] episode.

[00:10:00] Creative Coding and Teaching

Andrew: Um, so in your work, even outside of TL draw, you are like incredibly creative. I think those ideals you were talking about of like creating a, a programming language for team fortress to have really carried into your other projects, uh, and just like doing things cause they feel weird and fun. So like, how do you like find.

That creativity and like pursue those projects and like what's one of your favorite projects that's that's weird and interesting

Lu: Yeah, I mean, it's, it's funny because I started doing all, all of the creative coding stuff when I was a teacher. I used to be a teacher. I worked in schools. I worked with children with additional needs. And like, for me, these projects were like an outlet. You know, I'm on my feet all day. I'm using my social skills all day, you know?

So there's like, Creative coding felt like the complete opposite of that. You know, I could come home and just sit in front of the computer for a little bit and just make something, make [00:11:00] something colourful and visual and kind of like, just get it out, you know? And so that's always been the motivator for me.

It's like, I have a feeling and it can sound as crazy as it might sound crazy, but like, you know, I have a feeling inside me and I need to get it out. I need to express it in some way, right? Like, maybe I need like a pickup. a musical instrument, play some music, or I put some shapes on the screen that kind of represents how I'm feeling, right?

So like, this, uh, I think one of my favourites is ScreenPond, which, and I I did a video about it called Screens in Screens in Screens, and it's kind of a way of drawing fractals, drawing infinite drawings. So you can draw a screen inside itself, so that then you can see another screen. itself inside itself and it goes forever.

And like, I'm, I'm coding this, trying to get out some feelings of being overwhelmed, right? Trying to get out some feelings of being [00:12:00] stressed, and like, try and put that on the screen, basically. And I don't know, that's how it always is for me. I, um, I think some, some people like, find it frustrating that, you know, that they find it harder to, to like express themselves in that way.

Um, and, and I didn't always find it easy, but when I, when I was working with these children that I worked with, you know, I'm constantly encouraging them to find ways to express themselves positively. Right? Like, hey, maybe don't throw a pencil at Mr. Wilson, right? Maybe Let's go and throw a tennis ball outside.

All right, or like maybe don't rip up a piece of paper Your work, you know, maybe let's make some confetti instead, right? So I think like after saying that for like, you know, six years straight you you start to realize that yourself You know, like, even though I'm, you know, I'm an adult, and I'm mostly doing okay, and I [00:13:00] mostly don't need to do that.

It's still something that we can do, and, and, I don't know. Does that resonate with you at all? Does that make sense?

Justin: Yeah, absolutely.

Lu: One thing's led to another, and then one idea leads to more ideas, which leads to more ideas. Um, and I don't have enough time to try them all out.

Andrew: Yeah, I recently said to my partner if I could invent one thing it would be the That time room from dragon ball z where you can just go in and no time passes and you can like get really good at Your thing I want that so I can just like finish my side projects and not have to like do it during my normal life

Lu: I need that so much. I need that. Like, I mean, it's, I feel really lucky at, in my job at TLDrawer at the moment is that I can spend a lot of time on that sort of thing. Um, but even so, the, my list just keeps getting longer, you know,

Justin: Yeah, I definitely feel it. It's great that you've found an expression though, that's both like, An outlet, but also I think it's also [00:14:00] just fun to encourage and inspire other people. And that's like a lot of what I really like about the stuff that you put out.

Um, I want to talk about one more of your posts before we move on and talk about maybe some of your work at TLDraw.

[00:14:13] Philosophy on Tools and Technology

Justin: Um, so a lot of you're, you're involved in the future of coding podcast. Uh, and in that scene in London, a lot of people in the future of coding space, kind of like to put Brett Victor on a pedestal. Uh, for those who don't know who Brett Victor is, you should just. It'll be an interesting read. Uh, and you have an article that is really interesting where you, uh, somebody had emailed you and said, Oh, I think like Brett Victor's a modernist and you're a post modernist and sort of like, you kind of write an article about like, What that means.

One of the lines that you have in there that I really love is you say, uh, sorry, reader, better tools won't save you from shitty drawings. And this reminds me of the like tools for thought movement where everybody's like, no, if I should just find the perfect tool, I'll think so much better. And I'm like, actually, no, you're not [00:15:00] like, that's not going to happen.

Anyway, I would just love to hear more about your like philosophy about tools and technology and sort of how you think about these things.

Lu: sure. Yeah. And like, for context, yeah, like there is kind of a running joke within like the future of coding world and the future of coding podcast that, I don't know, I, I, um, I'm constantly trying, ~~ guess trying to like, Let me restart.~~ In the future of Coding World, I feel like so much is like under Brett Victor's shadow, right?

Like the number of talks I give or the number of things I make, and then like the first thing that people say to me is, that's just like Brett Victor's stuff, you know? Like, and or like, hey, you really got to check out this guy, Brett Victor. And like for sure he's been this, uh, his work is such a huge inspiration, you know?

Like it's, it's It's, it's, yeah, if you don't know who he is, you need to like, go and watch all of his stuff right now. Quit this, no, don't quit this video, [00:16:00] but like, yeah, it's so, it is really inspirational. And, but I think, you know, being in that world, trying to establish yourself and your work, involves saying not just how you're the same, but saying how you're different.

And I think it's very easy to say how you're the same, you know, like, you can catch me basically repeating some of his same messages. But like, It's funny to see, to me, it's funny to see the resistance you get when you try to say how you're different. It doesn't mean that, like, you hate them or you think they're a bad person, it's just like, you know, I think everyone has different views on these things.

Um, and, yeah, like my, my line about, you know, Better tools won't save your shitty drawings, right? It's tongue in cheek, really, you know, it's a lot, a lot of the stuff I do ends up being, yeah, very tongue in cheek and kind of like intentionally provocative, um, but like what I really mean there is that, um, I disagree on what like better tools [00:17:00] means, right?

So in, in the tools for thought space and the future of coding space, I think people often think of better tools as things that are more powerful. things that can do more, right? Like, oh, but like in this tool, you can create a diagram that is 10 times more complicated, right? And I don't think having a more powerful tool or, or even an easy tool means that you're, you're going to make better things with it, if that makes sense.

So like, um, um, TLDraw, I think is, is a really good example for this, because like, it's, It's intentionally a bit wobbly, you know, like when you draw something, like when you, when you draw some ink, it's splodgy, it's imperfect. And when you draw a rectangle, even, it has some randomness. It's actually quite hard to make things line up if you use the default settings.

Sure, if you really want to, you can go and turn all of that off, right? [00:18:00] But like, I think you should try it, right? Try it. And it's actually makes things harder. It makes it harder to just, like, draw. Because you're worrying about making it look good, right? And so like, having a Hey, it makes it easier to line things up and look neat, but there's something else that's that's blocking you there, you know?

So like, um, some of some of the work I've done, I made this like music making tool called Aroost, um, and I made a video about it, I'm probably gonna do more with it in the in this year. And, and it's, it's goal is to sort of, uh, make this point that it's actually quite hard to use a roost, right? It's actually kind of like a bad tool for thought, but what it does do is it's, it's very playful and it's very silly.

So it kind of just like helps you relax a bit. And when you're making music with it, when you're making sounds with it, you know, [00:19:00] you, you don't need to worry so much about what comes out because you can kind of blame the tool. Yeah. Like, don't worry, the tool is bad, right? Like, so a worse tool is helping you because, because there's less, like, consequence when you make something with it.

And I'm still figuring out how to explain this properly. I'm still trying to write up an essay about it. Um, so, and I'm kind of doing that in public, right? With these blog posts and seeing the response. Uh, this one had a slightly better response. that you mentioned. Some of the other ones have had terrible responses.

So that's part of, like, that's why I write so much, is to learn how to, like, write things better. Does that help at all? Does that, does that explain anything? Great, great.

Justin: Yeah, absolutely. Something that I, I tell people, I get a lot of people reaching out and they're like, Oh, you talked to so and so that's so cool. Like, how was that experience? And, um, I guess there's like kind of two things that I end up thinking about a lot is like, one, it's like, we [00:20:00] really shouldn't hero worship.

Like people are people and they're just, they're just people, you know? And it's like, yeah, some people have done really interesting and cool things, but they're still just people. And then the other thing is like tools. Like only marginally make you better. It's like putting in the reps and building the skills that really, you know, just putting in the time as we've been talking about is the thing that's really important and the tools can, can make it easier or faster or something, but like the tools aren't the point.

Lu: right, right. Exactly, exactly. There's, something has to come from you, you know? Something has, like, something has to come from you. You can't just rely on your tools. Um, and that's it, like, I, I, Sometimes I feel like I need to tell some of, like, my subscribers or patrons or whatever to not worship me as well.

Like, you can disagree with me. You know, like, in fact, like, I want people to disagree with me. Um, and, you know, just like I'm disagreeing with someone else in this community, um, you can, you, you are allowed to disagree with me. And, [00:21:00] um, so, like, I want to be, like, a living example of that as well. You know, you can disagree, it's fine.

It's not the end of the world.

[00:21:06] Exploring AI and TLDraw

Andrew: Yeah, I think all the new AI stuff kind of, it plays very interestingly with all the stuff you just said, because it's like, it's a tool, it's a tool, it may not be a better tool, but it helps you produce, like, maybe better things, but it has this like such low amount of control, it feels like no effort and it's just kind of like a fun creative space.

So I. You've been playing around with those ideas a lot at TL draw. Could you explain to us in our audience what you do at TL draw?

Lu: Yeah, sure, so like, um, at TLDraw I'm a software engineer, but increasingly so, my role is less, like, traditional engineering and more making experiments. and sharing that, um, in tweets, in talks, and so on. I think the first one that really exploded was this experiment [00:22:00] called Make Real, um, where you can, like, draw a picture of a website, and then you hit a button, and it turns it into, like, a functioning website.

Um, so this is something I, I, um, I built on top of, uh, Sawyer Hood's original, um, demo. Um, uh, the change I made was putting the website back onto the canvas and then being able to draw on top of it. And that was really important for me, um, because you can sort of start this feedback loop. You know, like you say, you know, um, when you send something to an AI, you kind of like, you lose control, right?

You know, whatever you get back, you're stuck with. And so for me, that's like a really important part of all of the AI things I make. is that there's this back and forth, this feedback loop. Um, so yeah, so another one I made was this thing called draw fast where you're like, it's image generation, but it's not like you just give a prompt and then you get it back and that's the end.

It's [00:23:00] something that's happening in real time. You draw on the screen where you draw over an image and an image grows out of that, basically, in real time. And it's the same idea, Uh, more recently, I've been experimenting with how do we get autocomplete to work on a canvas? Because it's like, one of my favourite uses of AI is autocompleting text, and I find it frustrating that I don't have that on a canvas.

So, um, I've been figuring out how to get that to work. I like it because that feels like, you know, autocomplete feels like a back and forth, already, you know, like you don't have to accept the suggestions. You, you can try and influence the suggestions in some way and you can see how like different possibilities unfold.

Um, and much more recently, like literally like last week, two weeks ago, last week, I can't remember. Um, I've been doing this draw maths thing. Do you all draw maths? Not sure [00:24:00] if it has a name yet. Um, which is basically, and I said this Before we got onto the call, um, Apple released a calculator for an iPad, for their iPad, and they added this, like, canvas called MathNotes, where you can write and draw sums.

And then, uh, the AI, Apple Intelligence, uh, will, like, answer it in real time. And, that evening, I got like a hundred people atting me and DMing me, and atting TLDraw, saying like, You guys, you're gonna make this too, right? You can't just, you can't just let Apple do this. So, I basically abandoned the thing I was gonna work on that week, and just did that all week and like live tweeted the whole thing.

Yeah, I'm making these experiments. I'm figuring out how to, how to, how we can use AI on the [00:25:00] canvas and, and how to make the user like an active role in it. and sharing it all in real time. That's, that's what I do currently at TLDraw.

Justin: Yeah. Those, those demos are so cool. It's like, uh, there's one of them I'd seen recently where you like drew a B and it has like one stripe and another B with like two stripes and it like sums it up to three. I was like, that's, that's pretty hilarious.

Lu: Bee Maths. Yeah, ~~because one of, ~~and that, do you know what? That one was because, thanks to Flora actually. Again, it's always, so I, I, um, I told Flora at the end of the day, hey, I made a thing called Bee Maths. And what it actually was, it's that my webcam, like, put me into a maths sum so I could, like, hold up my fingers and go, like, two, or I could be, like, plus.

And we've been trying it today with different, different things. And, um, she was very disappointed when I told her that because she thought I meant, like, literally, like, B, maths, like, with Bs. So she was, she was, when she saw my face on the video, she, she was not [00:26:00] happy. So then I, so then I had to make bee masks.

Yeah. And it's great. I can just make these things, which are silly and fun. Um, and people seem to enjoy it at the moment. So we'll just keep going.

Justin: Yeah,

no, they're awesome.

Andrew: How often do people get mad at you that they're just demos? Like, I know a lot, a lot of these things kind of get shared around. People are like, Oh my God, this changes everything, but you're just making demos to show off the canvas.

Lu: Right. Right. I mean, this is, this is, yeah, this is the funny thing. Like these are demos to show what kind of thing is possible With the TLDraw library, with the TLDraw SDK, that is like their main goal most of the time. And yeah, it's a running joke that people think that we're announcing features, right?

And, and it's like, I'm trying to make the demos worse, right? So that people don't think that they're supposed, you know what I mean? So, [00:27:00] but the thing is, it's, it's actually a bit fun to lean into that a little bit. You know, I think, um, part of it is that the following that's built for TLDraw is, is, is really nice.

Like, there's a whole bunch of people who are, like, rooting us on. And, and I think there's a bit of a, you know, like an in crowd. It's like, it's cool to know that they're just demos. You know, like, actually, TLDraw is something much bigger, right? You can, you can build anything with it. And this is what typically happens.

Like, people reach out to us. And then. And then like me or, uh, my boss or people on the team, we, we get like the. the fun moment of being able to say, Oh no, this is, this isn't just a product, you know, like you could make this. And I think that's really exciting, you know, because people say, I want to have this, you know, I want to have this feature.

And I get to say to them back, actually, you could make this feature and you could make it really fast. Like I made this in four hours. I don't know what I'm doing right. Like, you [00:28:00] know, way better than me probably. And yeah, let's talk and I can show you how to do it. Um, and like, hopefully, you know, we can share more, share more of these over time, like with like repo templates and blog posts and so on.

But like, um, sometimes this stuff moves really fast, you know? So, um, yeah, it, it, it's fun. Um, TLDraw. com itself has the same, has the same like story again and again. People think that that's our product and it's like this glorified demo, you know? Um, We do look after it. It's not like, oh, it's just a demo, you know, um, and so we do, we are careful with it, but, um, it is essentially a demo.

Um, so we just get to make something that feels nice. We don't need to worry about getting people to log in. Like you can't register, you know, if that makes sense, you just, you just, you just use it.

Justin: Has there been any conversations about like taking [00:29:00] any parts of these demos and maybe packaging them up into a product? Or is it really just like inspiration?

Lu: Yeah, I mean, um, for sure. And like, you know, these, these demos, uh, they have lots of different goals. You know, they, there's, there's really short term goals behind them around marketing and hype and interest. And, and there are longer term goals too. Um, partly we are trying to figure out some of these really tricky problems, um, like with using AI on the canvas.

Right, like, um, that's, that's basically our role. These really tricky canvas problems. Let us deal with them. So, um, that's, that's one goal. Another goal is, yes, like, it, we would love to, at some point, be able to let people use these, these, like, these more advanced features that we can't deal with. give you if you're not logged in, basically.

Um, that, that would be great. [00:30:00] Like we've, we've, uh, we've played around with a couple of different ways of doing that and we haven't landed on, on like, um, something that we wanted to ship yet, but I hope we can do that in the future. Um, one thing we are thinking of doing is putting up some of these demos as like time box things you can use.

You know, like, so, um, because we don't know how much they will cost us, or we don't know, like, how much people will abuse them, right? Um, and they are essentially experiments. Um, that's something we might try and do more, is say, like, Hey, you can use this for one day, and I'm really sorry if you missed it, you know?

And, and I think that could be a fun way of letting more people play with them, um, as well. So, there, there's hopefully more things coming soon, um, is what I can say.

[00:30:51] Utilizing Different AI Mode

Andrew: So you've been using AI a lot in these demos. Do you do it like locally within the browser, or is it a lot of like different [00:31:00] APIs, or just like one API that does a lot of really cool things?

Lu: Like, we're trying everything. We're trying absolutely everything. Um, I've like, been using all of the different foundational models that are available on Endpoints for their different strengths. You know, like with, with MakeReal, um, GPT seemed to be the best with that. Like, GPT is just like great at writing JavaScript um um For autocomplete, we were basically relying on Haiku. That was only possible because Claude Haiku was so fast. It did work with some others, and 4. 0 came out during the time we were building that. And that was also pretty good, but Haiku was the fastest. Some of this math stuff, we were only able to do it because of Gemini.

Google Gemini is really good at bounding boxes. And luckily, we just built some of those primitives like the week before. Um, so like We have also tried local stuff. We've been doing some of this [00:32:00] hands tracking, which is like, I guess more like classic AI, right? Not, not the, like the large models that we're, we're now using.

Um, we've also tried a whole bunch of llama stuff. So like, this is part of our job is to figure out, um, figure out how to get the most out of the, what's available. And to be honest, I think, um, like the best way to build products with these things at the moment is to combine them all. Right? Like, like the, the things I, I build increasingly like use Gemini for this, use Claude for that, use GPT for that and use something local for this.

And I think that's realistically what's going to happen. I don't think people will just use one, you know, um, but we want to be able to like tell people what we found from that on the canvas.

Justin: Yeah, absolutely. It's, it's still amazing to watch. It's such a huge inspiration. So I love the work you're all doing. Um, one more question on the topic before we move [00:33:00] on. Uh, so it's been a while. We had Steve, uh, on a while ago now. Um, uh, so have you seen any unique uses of TLDraw, uh, that customers or open source people are doing that's just like, Oh, wow.

I just hadn't imagined it being used like that.

Lu: right. Yeah, sure. Um, like It's, it's, it's, it's really hard to like think through because my head's like darting to all these different things, right? So on the one hand, I'm like, okay, some people just want a whiteboard, right? Some people just want to chuck a whiteboard and go. And it's kind of amazing to see like, oh, right. Yeah, that, that just works.

That's nice. Um, then there's some people using it as an annotation layer. Um, and one of the things that I found quite surprising. Um, Some people have been using it as an annotation layer on top of another canvas engine editor, right? So like, I've seen, I've seen, um, some tools that are like architecture [00:34:00] tools, right?

And it's, and it's super domain specific. for architecture, but it means it sucks at more like low fidelity, um, low fidelity canvas work, you know, like you want to draw arrows, you want to do like flow charts. That's been interesting, like combining TLDraw with another editor, and like locking the cameras together so they move as one, which is pretty cool. Uh, like, in the open source world, uh, we've seen this like flowchart programming tool recently, that's amazing, where basically you can write javascript into shapes, and then Just run it and people have made all sorts of crazy things I saw them make like pong in it where they're using like programmed TLDraw shapes that move up and down and Like that's crazy and especially crazy because they actually built that before we release release this binding Api that that makes it like 10 times easier.

So I like feel really bad for them Um that this guy called orion reed who [00:35:00] we've now, uh, he's now You working with us two days a week, um, has been, he's been making like, he made like Mario Kart in TLDraw, right? Like, which is, which is kind of like, like top down, right? Which is kind of like a nice affirmation that yeah, this is quick enough, you can basically use this as a game engine.

And, and using all sorts of like constraint models to make things move around as if it's like a physics engine, which is really cool. Um, It's just, it's kind of, it's kind of mind blowing. It's really hard to figure out like, how do we support things so generally, you know, so like when I'm working on autocomplete, it's, it would be so much easier if we could just say, yeah, people are only using TLDraw for like making state charts, right.

Or people are only using TLDraw to do little annotations or people are only using TLDraw for one thing. So it's, It's a very tricky but very like exciting challenge to work on, that people are using this for all sorts of things. Does that make sense?

Justin: ~~ It does. Yeah. Yeah. ~~Yeah, [00:36:00] it's, it's definitely really cool though.

[00:36:02] Challenges and Feedback

Justin: And, you know, I respect the sort of challenge of, you know, building a generalizable platform that also, it still has to be a good whiteboard, right? Like that core, like usage still has to be good.

Lu: yeah. I mean like, I use it so much. I like, I'm constantly dogfooding with it, and obviously like as a user, but also like a, as a library user. So it's, it's nice to be able to like push it and see where like, where the issues are, um, and then actually do something about it and then go and go and fix it.

I use it with my D& D group every week and because they're my friends, they don't mince their words. They tell me if something feels wrong. They're like, Lou, this is stupid. Why is that icon there? Like what? And so like sometimes like that's the harshest feedback, but it's nice to be able to just like see people struggle with it and tell [00:37:00] me exactly, exactly how it is.

Um, and like the, the team here is so. like, care so much about it. Like, sometimes too much, you know? But, um, so, like, it's nice to work in a place where that sort of attention to detail is so important.

Andrew: Yeah,

I resonate with that, uh, working at Descript, I've loved just being able to focus on the UI and like make sure that it looks like pixel perfect, I gain an immeasurable amount of joy out of making some things look like invisibly pretty.

Lu: Right, right, that's a really good way of putting it, actually. Invisibly pretty. I, I, I'm gonna steal that, I think, because this is what I say, right? Like, um, the, the thing is, if you, if you notice TL draw, it's like we've done something wrong. You know, which is, which is kind of like a curse because you want people to notice it.

But so like, [00:38:00] this is why some of these flashier demos are helpful because it's like a way of getting eyeballs on it and get people to really look at it. Um, but yeah, like with make real, um, when, when we saw like loads of people using TLDraw, um, it's nice that they, that they don't need to worry too much about like, moving shapes around or drawing things.

They can just think about wireframing and they can just think about making a website. That is the goal. It's so that like drawing something or like interacting with something in TLDraw just feels natural. You don't need to know how to do it. Although like if you, if you want to use it in a more advanced way, that's possible too.

But like to use it fully, you shouldn't need to think about it or notice it.

Justin: Yeah.

[00:38:46] Research at Ink and Switch

Justin: That's, it's a challenge. Um, so let's switch over and talk about, uh, some of the research that you do with Ink and Switch. Um, so what does it mean to be a researcher in [00:39:00] residence? Uh, and then what sort of like research do you end up doing?

Lu: Yeah, sure. So, um, What it means for me, um, as a researcher in residence at Inconswitch. basically means that I get to join their calls, right? So it's a fully remote team, um, with like smaller groups within it. And every single Friday I get the chance of, and Monday as well, but I can only make Friday cause I'm so busy, right?

Like every single week I can hop on. and show what I've been working on and get some of the harshest feedback in the world, right? From like the smartest people in that field. Um, uh, and, and also to see what other people have been working on and give feedback and just like be in that, that network, um, with, uh, with all of these internal communications.

Um, so, and part of that can include like me, uh, putting on, uh, collaborations or [00:40:00] meetings with our team here, or just more generally. So like, for example, like this week, uh, me and a couple of people from the TLDraw team, uh, were like sharing demos and work in progress things with some people on the ink team there.

So it's like this mutually beneficial situation.~~ Um, it sort of popped up because, Oh, Sorry!~~ Um, so it sort of popped up because, um, I did a talk at a conference called Live last year, and, and a bunch of the Ink and Switch people were there, and we got talking, and that's how it came about. So the work I'm doing is, is like a continuation of, of that work, which is not TL draw work.

It's, I guess, like Toad Pond work, right? And so for me that, that has recently been, um, working on this music making tool I talked about, which is like a live programming tool. Um, and, and I've been doing this weird project called Seed, uh, which has been quite [00:41:00] unusual because it's about how do we debug.

programs better, which sounds boring, right? And, and the weird thing is that I made like an initial demo for that, um, that lets you debug your program, um, like, and, and in a, in a, in a, in a very simple way. And I thought it was going to go down really badly. I thought people were going to hate it, but for some reason it resonated or like it hit a nerve at least.

Um, so, so that currently I'm figuring out why, basically, right, like what, what's, what's currently available in the debugging programs world. What do people like? What do people hate? What do people have trouble with? And um, I'm trying to take forward what I've learned from like my more visual programming and seeing if it applies to more traditional programming.

That's basically my research at the moment.

Justin: [00:42:00] That's awesome. Yeah, it's, it's an important area. I feel like one of the hardest parts of programming is when things don't go right.

Lu: Right. Yes. And, and like, typically what that means is like switching modes, right? Like, um, you do all of your coding in one place and you tend to do all of your debugging in another place. And there are some, like, there are some better tools out there that let you do that more in one place. Um, but they don't seem to be the norm.

Like they haven't been picked up as the norm in the industry, at least from what I can see. So I think that's an interesting question, like, why isn't that the norm? Is it because actually it's a really hard problem? Or is it like more of a cultural thing? Like, are people attached to their step debuggers or whatever it is they use or their logging, you know, just console logging or whatever?

Like, and it's been interesting to ask people about it because like, um, some [00:43:00] people I think, it's a sore spot, some people hate step debuggers. Some people love step debuggers, but they, and they think that everyone else is doing it wrong, and that's why they hate it. So it does seem like there's, there's maybe something cultural involved, maybe.

So I don't know yet. That's basically where my research is going to try and figure that out.

Justin: I'm excited to see what you come up with.

Lu: Thanks.

[00:43:22] Future of Software Interaction

Andrew: Cool, so on each episode we like to ask a future facing question, um, And for you, I want to ask, what do you think the future of software interaction looks like? With the dawn of AI tools, things are changing, and I think UI is going to have to change to accommodate how people are thinking about computers differently.

Lu: Right. I mean, okay. That's a big question though, because there's like, what do I think will happen? And what do I want to happen? Right. Because I think I'm worried, you know, with like, AI becoming more and more used? I'm worried [00:44:00] about what we were talking about earlier, right, where an AI does stuff for you and you're not involved even if you want to be involved.

Sure, if you don't want to be involved, fine, great, but what if I want to be involved, right? What if I want to tweak an output of an AI, you know, what if I want to influence it more, right? So, like, I'm very worried about, um, about people who use computers. having less control and more control going away to big companies and models and we sort of lose our understanding of that.

What I want is for people to be able to like collaborate with their computers if they want to, right? So that they, they can influence it and steer it in a way. Like, that's what I'm trying to do. Um, explore, um, here, uh, I want, I want, I want it to be a [00:45:00] feedback loop, if that makes sense. Um, I don't know which one's going to happen.

I, do you know what, I'm trying to, so I'm trying to show people how things can be better a lot of the time, you know, I'm not necessarily going to, I'm going to be the one that's going to see it through, but I'm trying to like show, give people a taste. of like, hey, what does a slightly better AI collaboration look like?

What does a slightly better creative tool look like? What does slightly better debugging look like? Um, and I think it's quite important because we use computers so much, or at least I do. Maybe I shouldn't.

Andrew: Yeah, I agree. I think AI tools should be a collaboration. They should be a tool. And like, there's really like two extremes in the space right now. It's either you just, you one shot it and it's all done for you, or you really have no option. Like we need the middle ground where it's like, this is a thing we can [00:46:00] actually use.

But I feel like given how Gen Z is with phones and not knowing how to send emails, the, the events that are about to come are. Are easy to predict people are going to know how to use computers less. I find it odd that like our generation is, might be like the most technically literate one, just because we were there before smartphones and they're at the end of like the computer age.

So like just by happenstance, we are like the people best equipped to use a computer right now.

Lu: Yeah, I mean, it's, it's hard to tell. But like, I do have hope from, from people innovating on these, on these tools. And I think, like, even, even seeing like how, uh, Replit, right? Has like, made some of, made coding more accessible in many ways, right? Like, even when I started code, when I started coding, it was even a lot harder, you know?

So, um, You know, I, I, I, I'm reassured by like people kind of getting [00:47:00] this, getting the fact that, that actually we don't just want to settle for coding being hard, being, being like something that's really hard to get into. Um, but yeah, there's a lot of work we could do still, obviously.

Justin: Yeah, I'm just hoping for more. human computing relationship, I guess, you know, um, especially my, my one hope for the AI future is that like that computers become a little bit more accessible to people who don't have the privilege to be computer savvy, you know, it's like, If you're older or you come from a socioeconomic background that like just didn't grant you access, it's like, hopefully, you can just use these things for something useful in your life without it being a drag.

Lu: Yeah.

I mean, like, yeah, I, I hope, I hope, you know, I, I hope it doesn't mean that, like, there's going to be even less care put on, on things because I [00:48:00] could, I could see it going both ways really. I could see some people really like, you know, taking the new technology, technologies we've got and really making the most of them.

You know, like, using it as an opportunity to put more care into things you care about and just less care into the things that just need to be done, you know? But I can also see some people using it as, as an excuse, you know, to say like, Oh, well, it does it for me, you know, like, I think, I think you can go both ways.

And it really looks like, hey, AI is going to be here to stay. Um, so I'm, so I kind of like accepted that, but, um, what I want to do is try and figure out how we make the most of it, you know,

Andrew: Cool.

[00:48:44] Tool Tips

Andrew: And with that, let's move on to tool tips.

Lu: tool tips. Does it have a, does it have an intro? Does it have, it's. It's tooltip time! Oh, yeah, I, I noted down, I, I noted down some gif related tooltips So how this is

Andrew: going to work is I'm going to share the screen and then we're going to like round robin it and just like share one link at a time.

Lu: Sure, sure

Andrew: So my first tooltip is not the IRS. Pay your taxes, kids. No.

Okay. So my, my first actual tool tip is a [00:49:00] framework called Waku. It also uses Hono in the background, but it is a, uh, it's React server components, that's not Next. js and you can actually use in your app. The best way to think about it is it's imagine Next. js app router minus everything that connects it to, to Next.

js. So you have React server components. You have a very lightweight router. That's it. If you want an introduction on how to use server components, uh, go to these docs, read it top to bottom, and you'll understand it. Avoid the next docs like the plague, if you want a simple understanding of how this technology works and how you should use it.

So if you've been looking for a tool to try out React server components and you haven't wanted to wade through all those docs, I highly, uh, recommend Waku.

Lu: Yeah, I saw Sunil Pal use this That's how I first discovered it Um, he basically like tweeted something like hey, is there any like minimal react framework out there I can use, and he basically [00:50:00] described Waku one for one, and then someone, yeah, so obviously someone recommended it.

Andrew: it comes from a pretty prolific creator too. He's done like five different state libraries for React.

Lu: That's good numbers.

Andrew: Next up we have BuildingSimCity.

Justin: Yeah, SimCity was a very important game in my childhood and probably one of the things that like helped motivate me into a more technical direction. I've really always loved the work that Will Wright and the folks around that team, uh, Just like Spore and all the other games that they had built, they're just like, fantastic.

The Sims, of course. Um, so, uh, this, this book is sort of, uh, an enKAPsulation of the story around like how Sim City was built and its history and just talking about the history of simulation and com and computing and, uh. It seems like it's going to be a really, really fascinating read. I [00:51:00] haven't bought it yet, but that's on my to do list.

Um, so yeah, definitely if, if you've been inspired by SimCity or you're like interested in some like gaming history in early computing or, you know, whatever it may be, this seems like a really cool one to check out.

Andrew: 90 is gaming is such a crazy time for computer science. Like if, if I ever wanna be humbled, all I have to do think is all I have to do is think about rollercoaster tycoon. It's like they built that whole thing in assembly. I can't, I literally can't even imagine how that would work.

Lu: right, right. I played so much of that game.

Justin: It was really fun.

Andrew: Next up we have salad room.

Lu: Right, salad room. So, Salad Room is a way to share files between different computers or devices. Um, and it's made by a friend of mine here, part of the London coding scene, Anthony Cossens. And, this is why it's important. Because, on our team, we often share [00:52:00] around GIFs, right?

Like, GIFs to be posted somewhere. And if you just share it on like Discord or like Twitter or something, like DMs, then it compresses the hell out of them. And then they end up looking pants when you post them up. So Salad Room is great because you can, you can do it and it doesn't compress it. And it's super easy.

You just type in a code. We even ask them for like our own custom room for TLDraw. And we have like our own custom room that keeps things up there a bit longer, which is nice. Highly recommend it.

Justin: It's cool. I like that, uh, the illustration.

Lu: yes, yes, yeah. Allied Room is a bit of a, yeah, like a funny brand going on. I don't know, it's, I feel like it's very British humour, you know.

Andrew: So, uh, my last tool tip for the week is Turbo Repo V2. They added a really cool terminal UI mode where, like before, if you're running a bunch of scripts with Turbo, it just kind of blasts the output all into [00:53:00] one log, really hard to understand, or even like see the issues that are going on. Uh, with V2, they released this really cool terminal UI where you can like literally see each script in isolation, switch between them, uh, it's just so much better and this replaces so many tools for me and like my monorepo tool set.

Like, usually you want to run like a server and something else at the same time and you can use like concurrently or do it with like, Bash processes or something. This is such a better DX. You can, like, see each one, see the errors in its thing. Uh, I've been really enjoying it. So if you haven't checked out Turbo Repo, go check them out.

And if you're on v1, upgrade to v2. It's so much better.

Justin: uh, so I have a literal tool tip today. So there's this website called tool stash. com, which is really fun. It is a way to inventory your physical tools. So you just take a picture of it. Um, it's got a nice usage of AI, which literally just like. Gives you an [00:54:00] auto classification for what the tool is. Um, but the whole point of this, uh, site is to like, keep inventory of your tools and you can like loan them out to people.

So you can keep track of like who borrowed what tool or whatever. I love it. Just very simple, very straightforward.

Solves a good problem.

Lu: It is really a tool, tool tip, that one. I like it.

Andrew: Finally an app to tell me that I did buy it and I did lose it. And I have to go buy another one.

Justin: Yes.

Andrew: Okay, next up we have just GitHub.

Lu: Right, right. Hear me out. Hear me out, right? GitHub, you may have heard of it, right? But like Salad Room, when you put GIFs and MP4s or whatever, in issues, pull requests, it does not compress them. So what we do a lot at TLDraw is say like when there's a, when someone, when you put in a pull request, That has like a clear change that you can show visually it [00:55:00] makes sense to attach a gif Right to communicate with the rest of the team what the change was and it just so happens that that gif Doesn't get compressed.

So like if we're looking if someone else is looking at that pull request and things Oh that that's worth sharing on Twitter or whatever, right? Then you can just pull it out copy paste it up with no compression. So add GIFs to your pull requests and your issues and everything. Like it's, it's a nice like visual record that can also double up as marketing content.

Andrew: Great tip. And then last up,

we

have KAP.

Lu: I love this program. This is how I record all my GIFs. It's KAP. And, and I'm just surprised that more people haven't heard of it. Um, I have like a little cheat sheet of like how to get the out of it. Um, which is Like, way too boring to go through here. But like, if anyone is out there and wants to use KAP and wants to know how to make like the highest [00:56:00] quality GIFs that look smooth and a small etc.

Then, um, reach out to me. I'm, I can tell you. I'll do it for free. Um, so yeah, KAP is like the best GIF and video screen recorder out there. Full stop.

Justin: Nice. That's awesome. Check it out.

Andrew: And that wraps it up for Tool Tips this week. Uh, thanks for coming on, Lou. This was a really fun conversation about all the things that you're involved with and how AI and code might blend

together in the future.

Lu: Thank you so much. This has been great thank you. ~~Yeah, ~~

Justin: Yeah, Lou. It's been absolute pleasure. Love all the demos that you've been working on and all

the stuff that you're posting. Uh, and, and again, your writing is amazing. So

thanks for doing it and keep it

up.

Lu: Thank you. I will do. Keep following.~~ And I'm looking forward to, uh, Yeah, seeing this. By the way, oh by the way, can I like, can I um, tell people that we recorded today? It's not like a secret surprise or anything. ~~

Justin: ~~It's not a secret. No, no, it's fine. ~~

Lu: ~~a screenshot? ~~

Justin: You can take a

~~screenshot. ~~

Lu: ~~Alright, you see, this is how my life has become now. It is just like, ~~

~~can I turn this into a tweet? And, ~~

~~yeah, god, I've been doing this for like ~~

~~seven years now. Anyway, yeah, thank you. Thank you for having me. ~~

Justin: ~~Yeah, absolutely. yeah, Thanks for coming on. ~~

Did you enjoy this article?

Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.

Across the AtmosphereDiscussions