Episode 23
Steve: I want them like on top of a mountain, I want it to be in Bali, when it comes to content for developers, I think that spending three days on the rotated cursor problem or these little things that would have been left behind that's the yoga on the mountain man.
Andrew: Hello, welcome to the DevTools.fm podcast, visit podcast about developer tools and the people who make them. I'm Andrew in is my co-host Justin.
Justin: Everyone, today. We're joined by Steve Ruiz. Steve is a London-based developer slash interaction designer who just recently launched TL draw congrats on the launch.
It's really, really awesome. And it's been amazing to follow your Twitter feed and watch you develop this sort of real time. Yeah.
Do you, would you like to tell our audience anything else about
[00:00:52] Steve's Origin
Steve: Yeah. So my name is Steve. I am based in London, but I'm originally from Chicago and I've been in the UK for a couple of years. Most of my background has been. Well, I guess to tech I was actually in a fine art and contemporary art, but within tech, most of my experience has been in the design organization.
I've never actually had an engineer developer job title per se, but my design work has always been technical and sort of the prototyping guy very much the 2017 designer who codes when that was really popular. And yeah, now I work increasingly on creative tools and tools to help other people make creative tools.
So that's where my focus has been.
Andrew: Super interesting. So you started out in fine arts. So like what type of degree do you have?
Steve: So I have two degrees. I have one degree in fine art, and then I have another degree in fine art. I kept my master's my MFA in visual art from the university of Chicago. In 2013. And yeah, if you, if you ever go to Steve Ruiz, art.com, you'll find my paintings, which were kind of like, look like the backgrounds of a graphic novels.
I encourage you to try and find parallels between the paintings and the work that I do now.
Andrew: Yeah. I, I checked those out. They look, they look really nice. I'm a big comic book nerd myself, and like the one with the trees and just like the thought squares in the background, really like that one.
Steve: Thank you. Yeah, that's definitely the radio hit!
Justin: Yeah, the style is awesome.
Steve: but then I turned 30 and I decided I should probably make some money. And so I'd always had kind of like, like many artists, I suppose I had a job in Chicago. I was I worked for lawyers. I did research for lawyers, but it was a very kind of like analytical type of thinking job. And then I was also a fairly well-paid job.
So I could, you know, be in my studio for two, two or three days a week as well. And that kind of pattern you've find a lot actually with, with artists still have this sort of analytical profession, like side profession eventually. And then the, the kind of the creative stuff that, that is, you know, different part of the brain different for an interest group.
And yeah, after a couple of years in the UK, I decided to close the studio and kind of find something that could bring those two things together. And that ended up being, technical user experience design with a lot of care for like the little details that go into. into interactive products.
Justin: I'd like to know a little bit more about what your path was there specifically, because I mean, you don't just do like small, simple, like prototypes. You do some really complex, very detailed, very well thought out, but like technically challenging products, like the stuff that you're building is like, would not be easy for anyone to build.
And so I'm curious about like, You know, did you have sort of a history of just like messing around with programming is like sort of a side thing or was this like when you're like, Hey, you know, I really want to dig into UX. Did you just like by nature of sort of really trying to dig into that have to learn a lot from programming or like, what was that
Steve: Yeah. So the it's I had a little bit of technical skill like many other artists. I had a portfolio website and, you know, I'd done that, but that technical skill was essentially wordPress apps and cobbling together plugins for WordPress apps. So I knew a little bit of the basics, but for example, I didn't know, JavaScript as of like 2016.
So everything kind of like has been pretty rapid in terms of that. When I got into design, you know, I was like, everyone else, I kind of went through the, well, for me, it went from publishing design. Cause there were some publishing companies in the, in the city that I was living in Cambridge in England.
And then from publishing design into interactive kind of features of the publishing design software. So in design. And then into other sort of interactive design kind of tools, I eventually found a piece of software called framer, which would, I guess now be framer classic. And that was, that was. Yeah, that kind of changed my, god it sounds a little bit sappy to say it changed my life, but it actually did.
It changed my professional life for sure, because that was the first time that I could have a immediate feedback loop between like the code on the left and the sort of the designer of the result on the right, which, you know, certainly wasn't the first thing to do that, but it was the first thing that I'd ever found that it was just instant.
And I was there and I could say, you know, change the word green to blue. And the thing changed from green to blue. And so I used that to, I just got really into it and started making designs that way and interactive designs that way. This was like the beginning of 2017, end of 2016.
There was a wonderful group in London, a meetup group for framer. And so I started making my connections then. It turned out. I, I was kind of good at it, decided I wanted to be better at it. It was also a time where a lot of different design teams were excited about, you know, designing code meeting, and specifically excited about framer, especially after like Uber like kind of promoted it as something that they were using internally.
And but no one knew how to use it. Like no one, like we would go to these meetups and I would be like, yeah, cool. I want to get some tips from people. And, you know, we would just be sharing our like awful prototypes together, which was wonderful. But it was also like, I thought a great opportunity for me just coming into this field to say, okay, well, here's something that I enjoy doing, let me specialize in it and let's see where that goes.
And so that actually went really well. I had a product job at a company called clear score here in London by the end of 2017 and had done some contracting in the meantime. And then went to an agency in 2018, a company called Endeca, which really was a way of like rapidly learning product skills. I recommend agencies to everyone, but maybe not for so long because that's, it was really intense.
And then by the end of 2018, I'd actually agreed to join framer itself. And so I went to framer they're based in Amsterdam. I, I did remotely from London, but I did their their educational content for a year. And so, I had to buy this microphone. I had to well, actually not this microphone, but, but when like it, and, you know, learn how to make video tutorials.
And so there was this whole weird twist into like content creation, I suppose, which was really hard and by then, I definitely learned to learn to program and learned to use code and react and JavaScript pretty well, but I never really talked about it at length. And, you know, they say that whatever teaching is, the teaching is a great way to accelerate your learning.
For me, that was definitely the case. And I probably got more out of that job then than they got out of me. But after a year it was, it was time to attempt to leave. So by then I was, you know, the prototyping designer again, and stayed in design tools, went from Framer to a company called play based in New York.
That is making a really amazing design tool for your mobile phone, which sounds like it wouldn't work, but it does. And it involved rethinking a lot of the patterns of design tools. A lot of the software patterns in interactive patterns for mobile and kind of like digging really deep into some of these patterns, which you have to do if you're, if you're re implementing something like a layers list, which, you know, has hasn't changed since whatever illustrator and yeah.
And then I started making the things that probably brought me to your attention, I guess. And I could talk about those as well.
Justin: yeah, yeah. absolutely.
[00:08:47] Making the Perfect Arrow
Steve: So in between, this is, this is where the story, when I tell the story about what I'm working on now, this is kind of where it starts. So I was in between framer and eventually what would, what would be play? And I was working on projects. It was independently. This was also right when COVID started. So like, I think it was like April, may 2019. Home with my kid, you know, nursery, clothes, everything, you know, having this bizarrely nice, beautiful summer in in London, but you know, in the midst of this, this terrible event.
And so in the time that I did have, I started building a like design tool for state charts, which are kind of nested state machines where you say you know, on or off. And I'm, if I'm on, I might also be in like quiet mode or loud mode, but I can never be an off and loud mode at the same time, cool, whatever, kind of like a graph.
And, you know, the benefit of state charts is that they're visual and you can make them into an actual chart that you can take your code and output, like visual graph of, of which states exist in which states are active and not active. And importantly here for this story, like how do you get from one state to another?
So if I'm in the quiet mode, you know, and maybe there's a button. Increase the volume or something like that. And that'll take me, you know, conceptually it'll, it'll make the quiet mode inactive and the loud mode active or the loud state active. But conceptually, it just feels like you're on a board game and you're kind of like moving from one part of the board game to another.
And so you probably want an arrow in the UI to show show this. This is at like statedesigner.com. If you're curious there's a JavaScript library. And then there's the the like app dot state designer.com. Still there it's free. You can use it, whatever.
So I had this problem, which is like, well, how do I show the arrow? Cause like, I'm not going to be designing this arrow. I want this to be generated automatically. I want to say like, well, here is a rectangle and then here's another rectangle that's kind of at a different part of the screen. Find out where those rectangles are and then draw an arrow that connects the one to the other.
And that turned into like, like I have so much faith in open source for just someone somewhere has solved every single problem that there is. I just have to find it. And that I could not find an answer for. And it's possible that there's some message board for, you know, unity, somewhere that I missed.
And it might have been out there, but it wasn't for me. Cause arrows are hard and good-looking arrows are even harder. So I got really into it and I started kind of posting this problem that I had on, on Twitter first, just to see if anyone else knew of an answer or like an existing algorithm for this.
And then increasingly because like the attempts were like my attempts at building an arrow that would, you know, look correct, no matter where I'm moving my hands around. as Boxes are kind of rotating around each other or overlapping each other, all these nightmare situations. Yeah, those like those, my attempts were inherently visual.
Like the debugging was very visual. The building out these weird skeleton arrows and all this stuff and arms that were going in all directions and flexing like they were really cool. And so I started taking like GIFs to them and putting them on, on Twitter and people started really enjoying them and asking me about them and having discussions about arrows and stuff like that.
And so it became this wonderful place of me who, you know, I didn't have a background in in like math or geometry or video game engineering or, you know, all this type of development that might have involved. What I now know is like vector math and linear algebra and all this stuff. I was just learning it as I went.
So it was good to talk to people and hear about what I was actually doing or what the problems were that I was actually trying to solve. And I did eventually come up with a pretty good arrows algorithm, which is now available on NPM as perfect arrows. And yeah, sure enough, if you just have two boxes and you need an arrow that connects them, if you're making that kind of thing, use perfect arrows. It's great. You're, good-looking arrows for free and it's not concerned with rendering, so you can draw them however you want using SVG or canvas or, or anything. And the algorithm itself is pretty short, so you could bring it to a different language if you wanted. But that was like my first open source. Like I'm going to come up with this problem in public. I'm going to try and solve it in public. And then once I, I do solve it well enough, I'm going to, I'm going to open source it. And that was perfect arrows and that sort of started this whole cascade of related projects.
Justin: Yeah, I think there's a, this Twitter threads you did with the gifts are exactly how I discovered you. It's like just watching these really interesting breakdowns of like, sort of the interactions. And it's like, okay, well here's what might be happening by the time the scenes, like here's like, if we just projected the arrows out infinitely and like, you know, here's the intersection points and all this stuff. And I was like, yeah, this is a, it's a dang hard problem.
I had been interested in visual programming for a long time. And back in a prior life, I had tried to build a node editor. And one of the things that you generally do with the node editors, you need to connect two lines between two points. And, you know, I, I experienced how like incredibly difficult that that challenge is. So it was like, it was really impressive not just to see like a really good solution to the problem, but also. Breaking it down and in a way that's like pretty like visually expressive of the complexity underneath the hood, which is, I think is really awesome.
Steve: Thank you. Yeah.
I think this is where that, like maybe my experience with framer and, you know, like after trying to create a good looking tutorial video, which takes, you know, hours and way too long, and I should have hired a video editor, like on day one. Like I still wanted to create content, but I, I needed some way of like making interesting things that was much easier to do. And so making these like, well, much easier to do for me, but also like much easier to And so I have a, like a lot of thoughts about, you know, what content kills for programmers and people in the development space on Twitter.
I haven't, I haven't perfected the look at the content pipeline for doing Twitter threads, but I can tell you that like eight, second GIFs at 125% speed showing how something works is just great. I love it. I love consuming it. I love making it. And especially if what you're working on actually can be like explained visually and it can be well, or, or with commentary alongside like, oh man post that stuff on Twitter. I will, I will retweet it. I will like it. it's great!
Justin: A good tip about the length and the pacing. That's an important thing. Cause if it's like it's too long, you lose people's interest. If it's not the right speed, you lose people's interest. So it's like, you've got to
Steve: Yeah.
Justin: that out.
Steve: And if you can make it loop, um,
which, which I spend way too much time trying to like, get my cursor back to the place where it was before. That's good too, yeah, since everyone asks me, I should probably just say I use Ooh, maybe I'll save this for the tools tip section at the end of the episode. Hold on, I'll talk about just a little teaser. I'll talk about what I use to record and the settings that I used to record.
So stick around!
[00:16:22] Learn by Tweeting
Andrew: Yeah. I tell many new developers that Twitter is a super valuable tool. Like for years I wasn't on Twitter. And then when I got on Twitter, I was like, wow, mind expanding. Like, I would have never been introduced to stuff like your work. If I had never been on Twitter. Do you think Twitter has helped kind of like change the course of your career?
Do you think you'd be working on what you're working on now without, without
Steve: Yeah, Good question. I think earlier, no, I mean, I wasn't very active on Twitter until I was working in the role at framer. It was, I mean, I completely agree with what you've said. It, it has been instrumental in introducing me to like how do I say that? Like I shut down my, my LinkedIn account, which I probably eventually will have to rebuild it, but I felt like that I always felt like on LinkedIn, not that specifically hitting on LinkedIn, but my experience of it was although maybe a little speaks, know, whatever my experience of LinkedIn was that like, That presence, that social media presence that's professional, but it doesn't represent me in the way that I want to be represented professionally like my interests, whatever.
Because I feel like that kind of grows out of the things that I, I get excited about. And, so Twitter is a much better representation of the things that I'm excited about. And yeah, if you, if you want to employ me or something like that, I would much rather you be excited about the same things rather than just need a developer in London.
But yeah, especially when working on things that I didn't actually understand, which is almost always having other people drop in to my DMS and be like, dude, you're making a parametric, you know, whatever tool. And I'm like, I don't know what I've never heard of that, but let me go, let me go look it up.
And and yeah. That is definitely clarified clarified a lot for me and helped me push it forward.
Andrew: Yeah, it's, it's cool. How you stuck, like stumbled backwards into all of this like super complex math. Like, I, I think that's the best way to learn things is by, I want to build something, so I got to learn a bunch of shit. And the math that you've learned is pretty impressive. So hats off to you for sure.
Steve: Thank you. Yeah.
it's, you know, this is a whole field of like mathematics that just doesn't really matter as much in a web development, normally web development. But it's, you know, it's like vector vector math, which is like, has to do with the direction of things and has to do with like, moving things in certain directions and all that.
And also comes well, basically it's like all over the place in, in, in game design, 2d game design. You know, you need to know if your cursor is close to something else and all that. But it doesn't really come up that often in web development, except in like visual tooling and creative tooling. And, you know, like the way that sketch or Figma works is very similar to the way that a, whatever a game works, the 2d game.
And so the more I got into the more I got into that, the closer I got into into design tools, which I was sort of already in. So, yeah, it, it sort of became a natural place to which I should say I got into design tools, not because I was interested in, you know, whatever vector math or the types of patterns used in video game design.
I just discovered those fell in love with them and was already in the industry and the slice of the industry where they mattered the most. So it was a really happy accident for me and sort of like. My work, it made me better at my job. Go learn, go learn vector math, go find yourself an arrow. Yeah,
Justin: Yeah, for sure. I mean, there's nothing quite like taking on a project like this though, to really get at the root of, you know, something that like seems inherently complex, but, you know, ultimately the intro to linear algebra and doing some basic vector math is not necessarily always a Supreme really difficult task.
If you try to conceptualize the entire field and you get into the like details, it can be really complex. Like, you know, if you're trying to approach it from like a purely mathematical like theoretical standpoint, but, but a lot of times, if you just start trying to understand an algorithm, sort of like, how do I, you know, translate this thing?
Like, what does that look like? Those things can often be more approachable than, than you might expect. I think this is actually one of the problems with like how most educational facilities go about teaching mathematics generally is because it's like so hard to see the implied result of these things that you're doing, that you have to sort of like not only pattern match against this problem and its solution, but also like, kind of in your head, like, and visualize whatever you're trying to do. But if you reverse it and you're like, I have a specific problem that I need to have know how to solve it. I feel like it makes it a little bit more
Steve: Absolutely. Yeah. I, somewhere in the future, I'll probably be teaching a you know, geometry through game design class at my kid's high school or something like that. Once you have a pretty good idea of what you're trying to do. And you have ways of visualizing it in between.
Like you can, you can go really far with those, those two things, especially in this type of thing. When I hit a thorny algorithm problem that does not allow me to sort of visualize it. That's, that's when I, that's where I start losing days. Cause it's, it's very hard to like yeah. Iterate and dial in and do all the things that I've learned to do through design with something that I can't put it on the screen or record an nine second GIF of and ask Twitter, like, why is this line going in this direction?
Justin: I'm sure. Another important part of this is like learning approximation. It's like, you know, there is surely there's a correct algorithm for all the things out there in some theoretical world, but sometimes you can just fake it, you know, sometimes you don't have to do exactly the correct thing.
[00:22:23] Perfect Freehand
Steve: Well, one of the things that I liked, and maybe I can talk about a perfect freehand probably is the next project. but one of the reasons I liked arrows was that you like drawing a straight line between two points is like a yes or no problem. Basically drawing a curved line is incredibly like subjective as to like what curves look good and what look, curves look right.
There's no, there's no real heuristic about like, when is this true or what is this a correct algorithm versus when is it not? It's a, I mean, you can even have something like, is it still pointing at the thing? Like yes or no, maybe. But, but mostly it's just like, does that look? I mean, my research for perfect freehand, like devolved into just me drawing, you know, pages full of boxes and just connecting them with lines and then staring at it and saying like, well, what's, what's the pattern? Because I was dialing in it, not like the only terms of success, where would I actually have drawn that line? Or would I actually have chosen that line or that arrow. And and that was, that was really fun. Cause there wasn't and even the name perfect arrows is sort of a riff on that is that there's no actual answer for this this type of thing.
There's, there's few things that actually have answers, but there's even fewer for arrows. just because it's like, yeah, it's just a, what looks good or what's, what's not it's aesthetic. So in the same vein perfect freehand, right? So the story there started I was also making videos and I wanted to like draw on top of my screen while I was streaming, like streaming.
And I knew how to do that in post, like, you know, I can do that while editing the video afterwards, but this was like, I want it to be able to stream. I want it to say like, you know, if I had the, still, when I was working at place, so there would be like a mobile phone on the screen. The problem with a stream of a mobile device, unlike a desktop device is that I can't like just wave the cursor at like one part of the screen.
Like I might do if I was like, you know, streaming about how to use you know, something on the, on the desktop. I couldn't just like kind of like tap or wipe my finger around that area because, you know, that would be interpreted as a as an actual input. So I needed some way to indicating parts of the screen on the mobile phone that was on the screen without without actually interacting with the device.
And so I was like, okay, Like a American football game. I'll just draw a circle on the screen and like, maybe like draw an arrow to it. And I had already made like a minimal drawing app for the state chart designer, like as an example. So I was like, okay, I'm just going to grab that rip up a electron app.
It's going to sit on top of my screen. It's going to be transparent and that'll just let me draw on the screen while I'm streaming. And that worked. It was great. And I had like my stylist on my lap and I would just be drawing. And then I was like, you know, I'm using the stylist. The stylist can do pressure.
I want this line to, to be pressure sensitive as well. And so I, you know, did a quick Google, like pressure sensitive or variable width line SVG, no hits. You know, I find a spec that is hasn't changed in four years and never got implemented. All right. Well, whatever, like how do I turn a line with some pressure information into a polygon, you know?
And then I'll, I'll just render the polygon. And again, like eight year old discussion that's still going for like, Inkscape, you know, like, well, how do we actually do this? And and it just didn't end. It was like, wow, there's nobody like this. You know, the the free store, the, the open source, infinite bucket that I just have to look, look harder to find what I need.
th this is just not a solved problem. Like, there's nothing. I shouldn't say there's nothing. There was a, the way that they would do it, the way that you might've seen it done is it's not an SVG, but in canvas, what you can do is kind of take the user's input points, tournament to a spline, and then draw a line between each point on that's spline and the width of the line is based on the kind of the pressure or whatever. So, more pressure is a thicker line. Less pressure is a thinner line. And with respect to the, the, the folks who came up with that, cause it's a very smart solution to that. It just does not look good.
And I was like, I was like, ah, I can't do that. You see it sometimes in like signature apps or something like that, like signature JS uses the same strategy. I think something in Android uses it as well, but no, I want it to like make a polygon, like input points or a line. Give me back a lot, like, something that has an envelope around that line and have that envelope be thicker or thinner.
And so I started working on it. I had like watched a a video tutorial about like recreationally about how to create Like splines for a racing game where you might have like a racetrack and you want, you know, the racetrack to follow the line or whatever. I was like, okay, cool. You have the input lines.
And then they kind of stick their arms out to either side. And then now you have a roll of left points and right points. And you can kind of just go around you know, down the left side and then back the right side. And now you have that envelope and I'm like, well, okay, perfect. And then I'll just use the pressure.
So that envelope, those arms will be longer if it's a lot of pressure and shorter, if it's not a lot of pressure. And that should give me the envelope, like a pressure sensitive envelope around the line. And it turned out to be a little bit, a little bit trickier. Like I lost, like I didn't lose, but I spent like the next six months if not longer working on this variable width line, that was fast enough that I could use it while drawing and that it could kind of recompute the line as needed while drawing and stable enough so that the line didn't change behind like your cursor. So like, as you were drawing the end of the line, that the beginning of the line wasn't changing, that could handle sharp corners.
Eventually that could handle a tapering at the start or at the end and different like line caps and all this stuff. And it, again, like I was, you know, doing the Twitter threads about, you know, it's like 10 times a day, just, you know, after work being like, all right, perfect. Or like variable width line or freehand line time, like beat my head against this thing, trying to try to make it work.
And eventually that did lead to the library that I released as perfect freehand. Which again is like a very, like some perfect arrows. It's very small minimal library. You give it the information that you have, which in this case is just that, that collection of input points, like here's what I recorded from the mouse.
And maybe those input points have actual pressure with them as well. And then I'll use that actual pressure. Otherwise it'll simulate the pressure based on you can tell it to simulate the pressure based on the distance between those points. So slow is more pressure and fast is, is less, although you can invert that, or dial that in.
There's a whole suite of, you know, options and settings and stuff for, for how it interprets that data. And so perfect freehand has now become its own. You know, I don't know. It's like used in and a bunch of white boarding tools. I think like Next.js live is using it like this it's it's everywhere because like, You know, why not?
Like if you, if you're going to have like a pen tool or a pencil tool, like why not make it a good-looking variable width line? It seems like you'd have to come up with a good reason, not to, if you're making a tool that involves a pencil tool or pen tool or some sort of thing in your application, you should definitely definitely use perfect freehand.
Just throwing that out there.
Justin: Yeah, completely agree. Another thing that I really appreciate about this is, you know, along your, your same common signature, it's like if you go to the repo, it has like a really nice visualization. That's like, okay, here's kind of, what's happening behind the scenes to make this you know, to make this polygon essentially.
And it's just those delightful sort of touch points that, that takes this. What is really complex interaction, with a really amazing output and sort of like reveals the magic a little bit. I think it's, I think it's pretty awesome.
Steve: Thank you.
Justin: Yeah, of, of, you know, your, your many spectacular skills and talents.
I think one of the things that makes all the work that you do so delightful is your ability to present it in a way that's like easily grokable just by someone who's like, oh, wow. You know, I've never, I never thought about how that could be done. And it's like, now I can just visualize it and eight seconds and yeah, that's, that's pretty awesome.
Steve: I think it's like, yeah, I think the, the there's a dopamine releasing part of every developer's brain that just wants to see a tiny explainer, a little gift showing how it works and, I love nothing more than, than hitting that. So thank you. I appreciate it.
Justin: Yeah. So, you, you already said it that perfect-freehand is used all over the place. I remember when it got integrated into Exaclidraw, and I was like,
okay, this is like, this is like, really, this is really cool. This is really interesting.
[00:31:43] Getting Globby
Justin: So what point after perfect freehand, did you start working on what is tldraw?
Steve: Yeah. So, probably right after, well, I spent a week that integration in excalidraw, um, like like I did that they, they used some of the money from their OpenCollective to kind of pay me to do that integration. And I'd done a little bit of work with that repo before I did. I did the arrowheads in Exaclidraw, which is, you know, I that's what I tell people at parties.
Yeah, so I was, I was familiar with the repo Exaclidraw is an amazing project. The way that it grew up opensource, again, kind of through social media. it's just a great story and I, I, I'm very, very happy to have been a part of it. But it, it got me thinking about how these sorts of tools work.
Towards the end of, you know, like really intense period of involvement with, with perfect freehand. There was another app for iOS called or yeah, iOS, iPad, iOS called good notes.
And good notes is you know, it's a great note taking app and it has like really good digital ink, like really, really good. And you know, I would use this app and I'd be like, how, how are they doing this? Like, what are they doing? Cause I, every time that I thought I had kind of figured out how that worked, I would, I would go back to it and it would work differently.
So I was chatting with the founder of that the company that makes that app and I was like, come on, how do you, how do you do your lines? Like, just tell me like how, you know, like, how do you do it? And, all he would say is that he uses like circles. He's like, yeah, we use, we used circles and you know, I, I didn't, I didn't press him that hard for, for more information, but I was like circles. Huh? And so I had some, you know, made some sketches and, and, you know, spent some time in the notebook thinking like, okay, well, you know, what would that look like? And how do you do a variable width line using, using just circles? Without, you know, just doing it like the Photoshop way of, of, you know, interpreting and just cloning the same stamping, the same circle, like into the canvas.
How do you do that using vectors? And during that discussion another person would sort of been involved in helping me along suggested this article by a man named Andrew Glassner who kind of, you know, been involved in graphics for, for a long time now. And he had put out an article about this thing called a glob and a glob is.
Hard to describe over the air, but it's you can look at a glob at globs.design or by looking up Andrew Glassner and globs. I got super into globs and like shamefully obsessed with globs for like two months. It is this primitive of two circles that are connected by two curves.
And those two curves hit the circle at at their tangents. So it looks like, you know, it looks like the curve just kind of like runs right into the curve of the circle. So it kind of like that, that curve between each circle kind of smoothly enters both full circle circles on either side. And you can use this, you know, like make one circle smaller and the other bigger. And now we have this kind of teardrop shape. You can move the globs around you. Can you have handles to determine the control points of each, each a Bezier curve. It's very hard to describe this without show like the tyranny of audio right now, as I'm trying to, as, as I'm trying to come up with a way of describing this without, without showing it.
Globs.design is the, is the app that I built to help me understand globs. And it was like I built for perfect freehand. This is another kind of like canvas app or canvas style app. I could zoom in and out and pan around. I took this one a little further in terms of the features, because what was interesting about the glob was that other design tools you know, if you've used designed tools where SVG graphics tools or anything like that before you've probably use like squares and circles and maybe like lines and maybe the vector pen tool where you can kind of define curves that way. Those are all like different primitives, not like the word that people use is primitive. Like the pen tool is a primitive for a curve is the primitive and pen tools use to create that curve or a vector network is a primitive and the pencil is used to create the vector network.
A glob is a different kind of primitive. And while I was very, very familiar with all the ways that software design tools or design tools like managed the primitives that I knew about, like, I had no idea how a design tool would manage globs. Like they're just different. They need different things, things snap to different points, you know, like they align in different ways.
There's things that you do with a glob, like, you know, both circles change at the same time, you know, I don't know. It's all this weird stuff that I had to kinda, well, I didn't have to, but man, I got totally obsessed with like figuring out like all the UX around this globs shape. And and along the way, I learned a lot about how, like, again, more about how designed tools were made and what's an efficient way of creating a kind of a canvas on the browser.
What are all the hacks and what are all the tricks in order to make this fast and performance? How do I do snapping? How do I do all this stuff? And so after I kind of, I never did figure out how to do the circle, handwriting, variable, width line using, using globs. That answer is still out there and it, it, it kills me, but but I did learn a lot.
Yeah.
[00:37:17] TLDRaw
Steve: I figured like, okay, well I'd made this type of UI for perfect freehand. I had made it now for globs. I doubt that I'm gonna stop being interested in in making this kind of like exploring these kinds of questions. I doubt that I'm going to stop making kind of contents around it. So I should probably just make a generic piece of software that I can use to either experiment with visual algorithms or experiment with different primitives.
So I made this kind of skeleton of, I took what I'd made with globs and I started making this new app that didn't know about globs or it didn't know about circles or anything. It didn't know about any primitives, primitives were something that you provided it.
And so you could provide it with a line or a glob or anything you wanted. And this also let me kind of get into more general design tool questions. So globs, the only thing you had to work with was globs. And there was quite a lot of overlap, like a surprising amount of overlap between that and like what you would do in an app like Figma, but it didn't have everything.
And this was an opportunity to sort of look at everything else and to look at, you know, like Z ordering or so like what's in front of what, or cloning, like holding the option key in order to like copy things by dragging it all the standard interactions are like the kind of table stakes interactions and features that you would expect from a, from a design tool.
And again, I was posting this on Twitter and saying like, you know, what happens if I rotate something and then I want to select something else. And now I want to stretch the box that contains the, you know, both of those things, like, what is the rotated thing do, does it skew, you know, does it, does it get wider, but the lose the fact that it's a rectangle and different apps would answer that in different ways.
So it was also really fun to kind of find these, these obscure corners of design tools and like compare against, you know, okay, well, what does sketch do? What does fig Figma dude? What does framer do? And again, like, I, I was kind of chasing the likes man. Like it got really popular Twitter. People love this stuff because they, you know, if, if your developer Well, there's two things.
If you're a designer. And most of the followers that I had at the time were like, designers are in this kind of UX engineer hybrid role. You know, you, you worked with these patterns every day. And so, you know, it's cool to like, learn about them and see how they work. It's also cool to see how different they are in different apps and that like, yeah, man, like selecting a rotated ellipse in sketch is very different than selecting rotated.
It's, you know, these things don't really matter that much, but it was just good content and it was really interesting to work on. And at the same time I started realizing that these, these kinds of like edge cases, these small features, et cetera especially where they differed between different.
Or where it seemed like one app, like, got it. Right. Well, another one didn't like, oh, does the cursor rotate? If I'm like resizing the edge of a rectangle and I rotate the rectangle, you know, like Figma does, it does sketch too. It does it, you know, this framer framer sorta does it, but not the same way. Like these are all places where I think the other developer, like as a developer light, you know, there were always times where there was these like little details in the, in the app where I'm like, oh man, like I would love to stop what I'm doing.
And spend three days figuring out this little detail. I know it doesn't matter to the product. It's not going to move any numbers, but like, it's fascinating and I'm going to have to skip it. And so I think if you've, if you build software, then, then you leave a trail of like unfinished half answered questions that you wish that you could go back to and you probably never will.
That's just part of the job. But I think like the metaphor I use or the example I use is that like, if I'm on Instagram and want to watch someone doing yoga, or, you know, if I'm watching someone play a video game on, on Twitch or something. And like, I don't, I don't want that to remind, like, I want that to be a little bit of a fantasy, you know, like, I don't want them doing yoga on their London flats, back porch or something like that.
I want them like on top of a mountain, I want it to be in Bali, you know, like I want there to be a, you know, and so when it comes to content for developers, I think that like spending three days on the rotated cursor problem or these little things that would have been left behind, like, that's, that's the yoga on the mountain man.
Like that's the content that fulfills that sort of fantasy of like, boy, I wish I had time to do that, you know? And. So spending time on those things, especially since I wasn't really building anything, I was just kind of playing you know, I knew what I wanted, but it wasn't like critical. I didn't have a runway or anything like that.
And so it was just interesting. So, yeah. How do you, what do you do with a rotated rectangle when you resize the selection that includes it? Like I spent a week on that, you know, and I came up with some pretty good answers and they weren't answers that, you know, were, were necessary in a way. Like you could definitely cheat around that.
You'd just be like, all right, well, whatever the whole selection is now aspect ratio locked, problem solved. Let's move on to the next, you know, ticket or something like that. but yeah, it's a good answer. It's a very flexible, good answer about how do you deal with like one aspect ratio locked thing inside of a group of things that are not aspect ratio locked.
I won't say that people started losing their minds over it, but it was the response was really good. And I so I kept going on that and that project became tldraw. And tldraw became a sort of a Exaclidraw equivalent. I kind of set the feature set of Excalidraw as a good minimum for what I wanted to be like build like a collaborative diagramming slash drawing tool that was vector based.
Eventually SVG and CSS based and just felt like super good because of the abundance of tiny details. And so around July, I decided I wanted to work on this full-time and so I, I canceled my contract with play and started working. on on tldraw and just say, okay, I'm going to take the rest of the year.
I'm going to build this thing and I'll see where it goes. And by then I had also kind of decided to split it into tldraw the app, and then tldraw, like the, kind of the core library that anyone else could use to build something like this. Because definitely after building like three or four of these type of UI, some like there's a ton of reusability here. I might want to reuse this and in fact, I have a couple of times so other people might as well.
And I think that idea of having like a kind of a general purpose or abstracted away kind of toolkit for building these sort of UIs, like canvas styles, zooming, UIs that is been very influential in where I've taken the project since.
It definitely started as like a personal tool, turned into a little bit of a content play in order to, you know, be like, screw it. I'm going for 10 K Twitter followers by the end of the year. Let's let's go. And then like, well, tldraw.com, which I launched maybe end of November. It's pretty cool.
It works really well. It has like sweet arrows, surprisingly. And how would I, I can talk more about the arrows there too. Cause they're different. And yeah, it was, it was cool. It was like top of hacker news. It was the number one trending repo on GitHub for a couple of days in a row. It's up to almost like 5,000 stars on GitHub, which, you know, these are all.
Whatever hacker news, whatever. Like, I don't know, that's a good signal that it was, it resonated with people. Everyone likes a good free diagramming tools, especially one that like you can use inside of vs code. And that has cool integrations. but yeah, I think it was, it was also just all those, all those little details that I hope add up to a pretty good, pretty good drawing experience or pretty good diagramming experience or whatever.
And that's, that's, tldraw the app, that little idea that I had about having other people build on top of like a, kind of a generic or like kind of toolkit for for these kinds of apps that definitely took off. It turns out a lot of people have ideas for, for apps that involve this type of UI.
And while I may love spending four days on rotated cursors or a while I may love figuring out the weird aspect ratio, bounding box problem. Like people just want to build their app and are more than happy of taking someone else's work in order to, to do that faster. So tldraw is now spinning more into the, like, I dunno, I want to turn it into something like, like if I was making an app that involved a map, I wouldn't build a map.
Like I would use mapbox, like, you know, I would use Google maps. They're like these things are just too big to make on your own. And I, I can say with a fair amount of certainty that, that building the sort of engine for the canvas UI, which, which every Figma for X type of team needs to do in order to make Figma for X.
The, the sort of the Figma side of that equation is like really hard to do it yourself. So anyway, that's tldraw the kind of the service or company that I'm working on building. And then there's, there's, tldraw the app, which right now is a tiny little drawing app and eventually may become like the, kind of the flagship product for that company for that service.
But it is been a, how do I say a wild couple of weeks since, since launch I'll I'll tell you that much. Yeah, I dunno. So that's the story of tldraw.
Justin: That's amazing.
Andrew: Yeah, it's it sounds like you want a tldraw to basically become the Monaco of canvas based editors were like Monaco is that like text editor as a package, go off to the races you want TL draw to be that.
Steve: Yeah. I mean, I don't think that everything needs to be a service or needs to be solved by someone else. But like some things kind of do and I wouldn't have said that this type of a UI might like be, be part of that thing, like be in the text editor map you know, whatever, maybe checkout experience like where I'm just like, oh God, I'm so happy.
I don't have to be responsible for this. But I think it does. I think if teams could license the canvas from Figma, they would and, but that's, that's the product, you know? And I think that tldraws an interesting position as an opensource project and as something that is still pretty nimble, I suppose, that like, yeah, I can spend December and January kind of rewriting it for like teams first or plugins first, or like, what does this really need to be in order for teams to be able to say, okay, cool.
I can use this for, for my project. Not that they're not already doing that, but how do I make that easier? It's kind of the, the, the, the bigger question.
Justin: Yeah, I think you bring up such a great point is like so many product organizations end up taking on a lot of incidental complexity. When they're
trying to build this product, that's their vision. And you talked about all these details that are like, are delightful for you and you want to spend time on and that most programmers can't and it's because generally that's the problem they're trying to solve is just trying to ship the Figma for X.
Right? So they don't, they want to do all this things, but they don't have time to do it super well. They just need to make, they need to get the MVP out. They need to make it work. Back in episode 17, we talked to Pedro from modules
about
Steve: I stuff.
Justin: Yeah.
They, they do awesome work, but they're also talking about like, maybe even at a smaller scale, thinking about just like a select box.
It's like, you want a really good select input, custom select input UI. You're going to spend weeks on that and you're going to do it wrong. And you know, it's like, it's really, really hard to do. Well, most people aren't going to try to do it. Well, they're just going to get what works like for the minimal version of what they test and then get it out the door.
And I think there's really something to be said for like the culmination of all these like shortcuts that people take and like making a product not as, as enjoyable because, you know, with tldraw is, like I, I can definitely feel it when I go and I can, I can fill this sort of like craft and every little interaction and it's just a joy to use.
It really is. And It's not really, it's not really realistic that we take all the products that we're doing and like focus on every little aspect and make every little thing enjoyed because you just never ship it. You know? So it's picking and choosing is important. So that's why I'm really excited that you're tackling this domain and especially coming at it with the way that you approach these things.
It's like every little interaction is like, it's nice for this experience because it, you know, often I like to use this phrase, but you know, a rising tide raises all ships or lifts, all ships. It's like, this is kind of what you're doing is like by making this sort of platform, you make all the products that use this platform, just that much better, you know, feel that much better to use.
And I mean, it's, it's super admirable.
Steve: I hope that. Well, I guess I know that it's turning into more of like a, oh, this can be, you know, a company or this can be a team or something like that. Well, I hope that people, that the future is that people are building on Tildra. Right. Like, but failing that, the second thing that I hope is just that a project like this, a like kind of sets the bar of, of like, this is, this is how this thing should feel, you know?
And if you're building your, your own, like, you know, use it as a, as an example like how does tldraw do this? And since it is open source and kind of open core that that it also offers a way of like cheating around those problems. For example, if you have a rectangle and you have a stroke around that rectangle, and that stroke has a dash, right?
So, like a dashed line around that, right. You probably want the corners of that rectangle to have like a dash at them. Do you know what I mean? You don't want the corner to have the middle of the dash, because that just looks like the courtroom boxes broken.
That is a problem that I had to solve for tldraw you know, and there's a code in the tldraw repo, like get perfect dash props or something like that. And I've, you know, I've talked to plenty of people who are like, man, I love those dashes or, or whatever, you know, equivalent feature. and I'm like, yeah, like here's a link here.
Here's the gesture. Here's the, you know, the shortcut, right, right. To the line, like use it, like go for it. And and so I really do hope both the availability of tldraw as a service, or just the availability of an example of how do you solve these types of problems that are a part of every single app just contributes to, yeah, maybe, maybe there's fewer things that need to get left behind, or maybe the implementations are just that much better.
My hope is that as we get the next whatever thousand apps that want to be Figma for X, not that there's anything wrong with that. I definitely want more like Figma for X apps in the world. Like I love using this type of pattern. And I, I clearly, I believe that it, it, it has more use just beyond, you know, designed tools, but I hope that those apps just feel better.
I hope that they're they feel pretty good. And yeah, it's it. I mean, I use Radix UI. Primitives, like all over tldraw. I think the code base is like 30%. Radix like when I bundle it because that's not the problem that I'm interested in. Like I'm interested in having a good context menu. I'm not interested in making a good context menu.
That's not what motivates me. And without a good open source alternative for that, or a good you know, available alternative to that alternative to me building it myself. Like I would have to build it myself and it wouldn't be very good because I want to get back to the canvas type stuff or I wanted to get back to the multiplayer stuff.
Open source for front end is becoming so much better just in the last like two years. I don't know, maybe more people are taking it more seriously. Maybe more people have consolidated around certain, like libraries, like react where, you know, you can make something and have, you know, a million downloads on an NPM and use it to promote a different product or something.
But no it's been wonderful and I've certainly benefited a lot from the type of thing that I'm, I'm hoping other people benefit from too.
Justin: Talking a lot about open source. I sort of agree with, with all the things you said, but there's like another, another side to this coin. If it were like funding, in open source is still a pretty contentious things, still pretty hard to navigate. So you're, you've been doing relatively well with sponsors and you know, much deserved.
Steve: Thank you!
Justin: What are your thoughts on open-source and funding and, and specifically I'm really interested in, as you go about thinking about this, instead of just an open source product, but like actually building a company which will have to ship some sort of product that people pay for. It's like, what is, how do you think about like monetization and how that changes how you approach
Steve: I've thought about open source a lot. I like open source. Like I, I like it for like, as a consumer. I like it for as an alternative organization of labor. I've said that it's not very compatible with capitalism in its current state, just because you can extract so much value from an open source project without having to return any of it or pay any of it.
and you know, we have folks that are working on things that are, you know, in their free time, like voluntary for passion or for, for themselves. And there are definitely like benefits to being an open source developer like for your career or for your, you know, building expertise in and things that you, you want to be an expert in, but maybe can't become an expert in through your job. So open source has a lot of benefits to the author, even. No, nevermind the money side, but it's just the money side does matter as well. Then there are only so many passionate projects that can exist in the world and be open.
And if you like open source and you want more open source, then there's a whole field of projects that we have to figure out, well, how do we get those types of projects to be opensource? And I think what GitHub, for example, GitHubs sponsors. I make of it like 2000, I'm almost at $2,000 per month on GitHub sponsors, which is amazing.
And thank you to everyone who has done that. That, that seriously, it means a lot. it's not, it's not big time, Twitch, streamer money or whatever, but I think part of that is because the the, types of relationships and things that cause someone to maybe want to sponsor someone on GitHub are very similar at the moment to something like Twitch, is that you, you might be connected to the person you might like the, well, mostly it's like, do you like the content that they create around the thing?
and so like the current model of GitHub sponsors definitely encourages more people like me than than any other type of project. And that's fine. That's good for me, maybe, you know, but like not everyone needs to you know, it needs to fill up their hard drive with eight second GIFs in order to to fund it their open-source project.
Although storytelling is always good, you know, everyone likes a good story. And Yeah.
so I think there's, I mean, other people are probably better equipped to talk about, talk about. You know, getting, getting larger companies, making it easier for people who belong to larger companies to donate. So whatever you're giving Google like a million dollar pool of sponsorship and having each individual engineers say, okay, you have $200 this month to spend on sponsorships.
Like it's up to you on how you want to spend it, or your team has this much this year. It's just the pools there. You can use it. And I think that is a great solution for, for sponsorships in general, but that's also gonna kind of fall more towards things that are more popular than it's. I dunno.
We'll see how that shakes out. If GitHub wanted to use its current model, but make it really, really effective, it would have to make it easier to be easier to use GitHub as a content platform. Meaning like. I dunno, you just go to any other content platform that drives individual donations, like Twitch or like steam or something like that.
I don't know. I, if it was about supporting open source through the existing individual donation model, like I go to GitHub.com and I see whatever the Vue guys, you know, that team on live stream, you know, like making the next version and taking questions from the chat and having little boom, you know, thanks for the five bits, you know, Vue user 2, 4, 5, like, I mean, if it was going to go in that direction or if it wanted to stay in the direction that it finds itself in right now, I think it w it would just have to be better at doing that.
Because I think that's, what's driving donations at the moment. Most of my donations came from, by people who knew me via Twitter and who'd liked my threads. I had tldraw as sponsors only for the first, you know, up until November. And so there was kind of a cycle of, I would post something cool on Twitter, like whatever arrows that would stay pointing at the shapes that you, you know, and you move the shape and the arrow is still pointing at that shape.
and people would just be like, I got to try that. I got to what's five bucks a month, come on. And then, so that I would have the bumps of of subscribers that way. It wasn't people like necessarily using it. It wasn't people building on it and it wasn't, people just stumbling on it. Like I was driving that content.
Or that those subscriptions through, through the content that I was creating. So yeah, if GitHub wanted to do individual sponsorships, well, I think it would have to be better at being a, a content platform that was made interesting content for developers and then encourage those people to express their interests through donations.
I'm not sure that's really what GitHub wants to be, but that's, that's my, that's my take on it. Sponsorships also have an interesting role. I'm learning to play in the early stage of a, what will be a company. For example, I am definitely not organized enough or, I mean, tldraw is not definitely organized well enough as a company in order to take large customers or any customers almost is that.
The type of like as a one man shop that is in the process of kind of building even just like whatever building registering a company for tldraw. I have my own as a contractor and it's, it's run through that. Like, I don't have a team for support. I don't have other engineers for, for whatever.
Like I can't actually take customers, but I can take sponsors. And so the teams that have been working with tail draw some of them very small, some of them actually surprisingly large have been using sponsorship as a, as a kind of way to, to encourage the fact that the, you know, you don't want the project to go away.
You don't want me to get a job, you know, do you want me to stay unemployed essentially? So this is a way of kind of keeping that, keeping that going so that they have the faith and the trust that it will be there so that they can build on it. And so sponsorships have an interesting opportunity there as like yeah, like, the non-transactional support like non-transactional payment from what would normally be a customer.
And yeah, that has that again, like at, for someone building something at this early stage, like that has been hugely helpful, especially just as signal as like, oh, we do want to pay for this. This is worth paying for you know, get your stuff together. And we will be me normal customers, but in the meantime, we can be sponsors.
And that's been great. That's been really, really good for the project.
Andrew: Uh, You've mentioned a lot about projects being built on top of TL draw in the perfect ecosystem. Do you have any examples of what people are building? One, one I saw in one of your tweets was this Dungeons and dragons world builder, which like ignites a geeky fury in me to want to start my own campaign.
But have you seen any other cool things like this pop up?
Steve: Yeah. So, first off I haven't used the phrase perfect ecosystem, but I like it. I take it I'm I'm still looking for potentially a new name for for these projects or the platform project. I did register like troubled that dev like T RBL, but we'll, we'll see where that goes. Yeah, the, the project that you're talking about that has sort of built on tldraw at the moment is legend keeper. And this is a T this is kind of a product for like world building. So whether, you know, normally that would be for like a, yeah, like a Dungeons mat dungeon master someone who's going to be leading a story game to, you know, organize the, all the characters and the NPCs and the places and like the lore and, and keep track of that as, as things happen so that you can go back and say like, ah, you've been here before this person remembers that you, you know, killed the dragon and left your coin here.
I don't know. I'm a never actually played Dungeons and dragons. So I want to and they, well, they had an idea of like, well, we want to have like a kind of a whiteboard for, you know, you, you have all this data in the system. We want to be able to arrange it spatially. So that you could kind of put it up like a, like a pegboard and say, these, this is the family tree, or this is the relationship between these two things.
But the way that they described it to me was that like, you know, was, this was essentially blocked because it's a very small team. It's a cool idea, but like, again, if you're going to build a tool like this, you have to build the UI, which is really hard and is a project of its own. And so when they found a tldraw, it was like, oh, we can actually make that bill.
Like that board view, we can actually do that. Like we're not starting from, you know, negative 1000, we're starting from zero. And and so that's what they did. And it's great. I like lurk their discord channel, just looking at the boards that people are sharing. And they're amazing. I encourage you to go, go, go find them yourselves or I'll, I'll retweet some of them sometimes from the tldraw account, it's awesome. It like, you know, warms my heart to see this, this tech that I built being used for such a, like such a different type of creativity. And, yeah, it's great. The other teams that have been building on this there was a very large company that is had a white boarding solution that was legacy and needed to come to the web.
And so, they were like, oh shoot, like, this is all, you know, highly optimized C plus plus code from, you know, a couple of years ago. This is, this is not something that we can just bring to the web. And then also, you know, in the years, since people's expectations have been driven by apps like Miro and now fig jam, I was like, yeah, you want, you want these like interactive, independently complex things like on the board?
Depending on your implementation, that might be very, very hard to do. Might be very easy to do in like HTML and CSS might be very easy to create a timer, you know, using a react component or to do lists using a react component might be very, very difficult if you've chosen a complex web GL renderer or something like that.
So another kind of reason why you might look at like a tldraw, and then there's, there's there's teams that have, you know, Greenfield ideas. Like we are building, you know, a well, something for architects and we want to have, you know, like we need to find a technology for this. And, and so, our just considering tldraw as another sort of, you know, engine for it, not that there are many others.
But yeah, that's something that can kind of, again, kind of skip them to the point where they can start working on, on their domain rather than spend the time. Building the the canvas UI, the zoom-able or the special UI. Those are the kinds of the patterns that I see again, like either replacing something legacy in order to match new constraints, doing something completely out of the unexpected with it on top for a different domain.
So like legend keeper or something new that that is basically just, yeah, like we're going to be Figma for X and now we need to go find ourselves a Figma. And those are the teams
[01:06:52] Tooltips
Andrew: Awesome. Well with that, I think we'll switch gears and start going through the tool tips.
My first tool tip of the week in line with what we've been talking about of getting the tiny little details, right a new popper library from one of the authors of popper JS, this one's called floating UI. And what really caught my eye about it is that they want it to be as small as possible.
So I think in here they say it just, yeah, it's the core library is only 600 bytes. And that is like, you don't want your tool tips to weigh down your page any more than they have to. And switching to something like this could really help with that. And it looks like they implement most of the functionality of popper JS itself.
So this could be a pretty easy to use popper replacement. And then it's also not tied to react in any way. So you could use it with whatever front end framework framework that you want.
Steve: Looks great. I would use that.
Andrew: Yeah. And they got a nice little a icon up here. Yeah. Little smiley guy,
Steve: What's it called again?
Andrew: a floating UI.
Steve: Cool.
Justin: There's something to be said about implementing the like hard functionality and just like getting a really, really good APIs for this. And
Andrew: Yeah, poppers are definitely another one of those places where it's like, oh, that's simple. I'll just build it myself. Or, oh, CSS. CSS can do that. And it's like, Nope. Edge cases galore. So it's nice to have a libraries like this.
Justin: yeah, so, my first, tool tip of the week is something that I've actually been following for a while, and I'm really excited about it. You can find it at codehike.org. It's called code hike. It's by Rodrigo Pombo, Rodrigo Palumbo. If you've ever written code in markdown like a code example, you know, you have like the, the code fence, the three back ticks, and then you'd like, can describe the, the language that you're using and that's basically it generally, right?
And then you just paste, paste your code in there. Sometimes you want certain things to be highlighted and like, these are the details that are important and everything else is unimportant. And there's some code highlighting libraries that will look kind of do that for you, but like, there's not a whole lot of great ones.
Well, this does that. And then so much more it's like, do you want animations, like to show going from one code file to another code file totally handles it. It's like just all kinds of like scenarios of, let me show you a code example, but that's really rich. And that focuses on exactly what you want to see.
And it just is another piece of like really phenomenal work where Steve, like, when I, when I think of you and I think of like tldraw and like graphics, I also think of, of Rodrigo and his work around like documentation for, for code hike. It's it's really, really well done. And I think it's, you know, just a excellent resource.
This is also somebody who's like doing great open-source work that you can sponsor alongside Steve. So, that's the thing that you need. You need good documentation, please, please check it out.
Steve: That is an amazing doc site as well. Speaking of losing weeks on something that seems incidental to the actual thing that you're working on. I got doc sites. Oh, that's beautiful.
Andrew: I think he's been working on this for quite a while at this point.
Steve: Right on. Good job.
So the first one I guess I have to write the first one is a project that I mentioned earlier in the stream. It's one of my own projects, a telestrator. So this is T E L E S T R a T O R. I didn't come up with that name. That's like the name for this type of thing that lets you draw on top of your screen when you are watching American football and they draw this yellow line or whatever, like they're using a telestrator invented by the sixties or in the sixties.
In any case, this works really well. If you do any sort of a live screen shares or demos or things like that you know, it's just a it's like a drawing tool that you can kind of summon from the left-hand side of your screen, you know, make your marks they'll fade away after a few seconds. And then if you need to go back and kind of give control back to the, to the regular window or app that you're using, you just press escape.
So again, if you're doing streaming or live demos or screen recording, like, it's a pretty good way. You can get pretty fast at annotating what's on the screen. So that's telestrator, it's free. It's on GitHub. Has a little electron app for Mac probably needs landing page, but it's open source. So if you want to get involved, let me know. The second one, I, I mentioned that I was going to say how I do my screen recordings cause or make my GIFs and things like that. And I use an app called cap, which is much easier to spell. It's just K AP. And that is what it getkap.co. And that is a yeah, like a screen recording app. and this is made by, I think I'm not sure if this is actually an agency or not.
It's a team called wolcano, like kind of volcano, but with a w I'm, I'm pretty sure it's a couple of people, but it's definitely Christopher SkilKorn who works on this. And again, it's open source. it has a really good UI and a really good plugin system as well. You could just kind of select the part of your screen that you want to record and then record, and then, then choose how you want to export that, which I think that, that the control that it gives you over, how you export is really what sets it apart from something like clean shot, which is great in many ways, but yeah, kind of limited in that way.
The way that I use it, I. Record at a 16 by nine kind of dimension. So whatever I, you, you're able to select the dimensions that you want to kind of choose on your screen. I do 16 by nine. I record it and I export it at well, I record it at 60 frames per second, but for GIFs you want to export it at 50 frames per second, which is the maximum that GIFs allow you to export that.
Didn't know that before. I had to learn it here. I export seven 20 by like 4 0 4, I think is the size, but seven 20 wide. And then I normally tweak the speed. I normally give the speed, unless I'm doing something about performance, which is where speed would actually be cheating. Like, I normally do videos for that.
I put the speed up by like, you know, to like 125% and make the length of. Eight to 10 seconds long less than eight is kinda distracting more than eight you're you're risking attention, but I think they've done studies that people will stare at just about anything that is moving for about eight seconds before, you know, being able to decide that they're not interested in it.
So if you're, as long as your content is worth, you know, you got to just promise me that it's worth actually looking at for eight seconds, but as long as that's the case then then eight seconds is a pretty good, pretty good target. And since it's at like 125% speed, that's actually like, you know, 12 seconds of content.
so you get, you get an extra four anyway. So that's what I do for for my GIFs it also gives you the option to compress the GIFs like with the lossy compression algorithm, like nice FF MPEG And it works great and Twitter will take them and turn them into videos anyways so you don't have to worry about the size as much.
But that's how you make a good Twitter GIF with Kap.
Andrew: Noted.
Steve: Get cap.co
Justin: That is a pro tool tip. That's amazing.
Andrew: Okay. My last tool tip for the day is a library from the makers of code sandbox called sand pack sand pack. Yeah. Sand pack is a I don't really know how to describe it, but it's like a bundler in the browser where you can have like this full live code, editing environment without like almost any setup.
I think it does. It does a lot of really cool things like it does NPM dependencies on the browser hot module, reloading cat. And it's another one of these like building blocks that you can easily use to make your website and your examples and your demos a lot better. So some of the examples they actually give is in the new react docs, the hooks based docs that we talked about a few episodes ago all of the interactive tutorials in those docs are made with sand pack.
So that's super cool. And then I think coincidentally enough code hike, the Justin's tool tip from this episode is also built with sand pack for those live demos and they use just the editor part in, in the demos, but it's there too. So cool. Cross-pollination this week on our tool tips.
Justin: Yeah, maybe a rounding it back out. My my final tip for the week is this visual programming environments by Samuel Timbo. It's called IO unit. The, the website is I O U n.it. And it's just like a really interesting exploration in visual programming. It looks very sci-fi it. It takes a little bit of, of, of getting building up some intuition to sort of like really figure out how to navigate it.
But there's like this little panel at the bottom where you can add new primitives and you can essentially just build up like this really like visually pleasing flow, which is like really nice. I really love all things, visual programming, and this is, this is a fun exploration in the space you know, with, with all like visual programming tools that I feel like generally they're not necessarily superintendent intuitive when you just step in them the first second. But, but this one, yeah, that's interesting. So if that's your kind of thing and you like playing around with futuristic circles, then, you know, jump into it because especially when you build something out, it looks very, it looks very fun.
Steve: I have a call with this guy tomorrow. I am so excited to talk to him about this. I love how cryptic cryptic the UI is. It definitely like is yeah.
Andrew: no clue how.
Steve: intentionally intentionally cryptic,
Justin: It feels like alchemy, you know, like,
Steve: but that's part of the fun of it. I th The onboarding experience is wonderful.
Andrew: You don't even know what you're looking at.
Steve: The onboarding experience Is like, what that, you know, is this a game?
Is this, yeah, it's wonderful. I love it!
Justin: But really when you, when you build it out, it's like these, like, it reminds me of like alchemy. It's like all these symbols and everything, like putting things together and it's like flow chart kind of thing. I don't know. That's pretty fun.
Steve: I already did my two, but if you, if you want to throw up glob stop design, you know, I'm trying to, trying to build that out into something bigger here.
Justin: Ah,
Steve: I'll tell you, this might not be the future of design, but it's, it's, it's somewhere, somewhere around the future of design.
There is a place for globs in this world.
Justin: Have you heard of nerves?
Steve: Yeah. The different kind of a spline
Justin: what, yeah,
what, it kind of reminds me of, of nerves. It's like what I think of it in like a 3d space almost because it's like, yeah, it's, it's different. But with like two nerves fears, when you like, get them close to each other, they can kind of like connect to sometimes it's like, that feels like very loud, like.
Andrew: Yeah. I don't know how I would ever change the tool like this. I, I saw when you originally tweeted about it, I was like, oh, that looks really cool. And then I tried to like, make something I'm like, oh, I am not a designer.
Steve: it's a really popular with or had some popularity with folks who were working on like a script based languages like Chinese or Japanese and. Made some really amazing stuff. Some of it even 3d, like based on this. Yeah, it was great.
That's globs
Andrew: Awesome. So that wraps it up for our tool tip segment. Thanks for coming on. This has been a super interesting conversation about topics I've never even thought about. So thanks for coming on.
Steve: Thank you. No, thanks for having me. It was yeah. It's a lot of storytelling, but it's, they're fun stories to tell
Justin: Yeah, well, it was listening to your story was what's absolutely lovely. And it brings all the things together because you've already been telling this amazing story on Twitter. So it's like falling all of that. And now getting all the details. This, this is really great.
Steve: Anytime, anytime.
Andrew: Well, that's it for this week's episode of dev tools, FM, be sure to follow us on YouTube and wherever you consume your podcasts. Thanks for listening.