Dan Abramov 0:31 So Friday night, Holy Ghost, take me to your level. 0:39 Show me the one I need the most, I need the most. 0:44 I wish I knew you when I was young. 0:47 I could have got so high. 0:51 Now we're here, it's been so long. 0:57 Two strangers in the bright light. 1:04 Oh, I hope you don't mind. 1:07 We can share my moonlight. 1:13 Two strangers in the pipeline. 1:23 I wish I knew you. 1:26 I wish I knew you. 1:29 Oh, I wish I knew you when I was young. 1:35 Is all that you need. 1:37 You bury that seed. 1:39 Is everything beautiful. 1:43 And that sound comes from the underground. 1:46 It's all inside you now. 1:49 Is everything beautiful. 1:52 But what you, what you, what you, what you running from? 1:57 And they got, they got, they got, they got you on the run. 2:02 So Friday night, Holy Ghost. 2:07 Take me to your level. 2:09 Show me the one I need the most. 2:13 I need the most. 2:14 I wish I knew you when I was young. 2:18 I could have got so high. 2:24 Now here it's been so long. 2:29 Two strangers in the bright light. 2:33 Oh, I hope you don't mind. 2:38 We can share my mood. 2:44 Yeah, two strangers in the back light. 3:00 I wish I knew you. 3:03 I wish I knew you. 3:05 Oh, I wish I knew you now. 3:42 Now we're here, it's been so long. 3:45 Two strangers in the bright light. 3:47 Oh, I hope you don't mind. 3:49 We can share my moonlight. 3:53 Two strangers in the bright light. 3:59 I wish I knew you. 4:01 I wish I knew you. 4:03 I wish I knew you when I was young. 4:48 provision. 4:53 But when things fall into place, superposition. 5:00 In any universe, you are my dark star. 5:11 I want you to want me. 5:15 Why don't Superstition aims with imprecision, but when things can't be explained, superposition. 6:10 In any universe, you are my dark star. 6:16 I want you. 6:52 No matter what we do, I'll be there with you. 7:04 I want you to know me. 7:10 Why don't we rely on care? 7:22 Street. 7:24 Why don't we collapse the spaces that divide us? 7:38 I want you to want me. Speaker B 8:27 I had caught a swing in my two hands. 8:31 Alone we traveled on with nothing but a shadow. Dan Abramov 8:37 We fled far away. 8:43 Hold your horses now, through the woods we'll find a bed. 8:52 Hold your horses now, through the woods we'll Some had scars and some had scratches. 9:05 It made me wonder about their past. Speaker B 9:09 And as I looked around, I began to notice that we were nothing like the rest. Dan Abramov 9:16 Hold your horses now, until the sun goes down. 9:22 Through the woods we ride, between the mountains south. 9:30 Hold your horses now. 9:33 Sleep until the sun goes down. 9:43 Through the woods we ride. 9:46 We sleep until the sun goes down. 9:52 We sleep until the sun goes down. 10:35 Hold your horses now. 10:42 Through the woods we ride. 10:51 Hold your horses now. 11:00 Through the woods we ride. 14:03 Stop me calling around. 14:13 One foot still down. 14:15 Sometimes it cries. 14:19 Don't stop till it's over. 14:26 Don't stop till you surrender. 15:28 Every step that I ran to you, only blue or black days. 15:35 Electing strange perfections in any stranger I choose. 15:42 Would things be easier if there was a right way? 15:47 Honey, there is no right way. 15:50 So I fall in love just a little or a little bit every day with someone new. 15:56 I fall in love just a little or a little bit every The darkness of someone else. 16:30 I guess any thrill will do. 16:34 Would things be easier if there was a right way? 16:38 Honey, there is no right way. 16:43 So I fall in love just a little, a little bit every day with someone new. 16:48 I fall in love just a little, a little bit every day with someone new. 16:54 I fall in love just a little, a little bit every day with 'Cause God knows I fall in love just a little, little bit every day with someone new. 17:30 I fall in love just a little, little bit every day with someone new. 17:35 I fall in love just a little, little bit every day with someone new. 17:41 I fall in love just a little, little bit every day with someone new. 17:46 I fall in love just a little, little bit every day with someone new. 17:53 I fall in love just a little, little bit every day Talk with every stranger, the stranger the better. 18:03 Talk with every stranger, stranger the better. 18:07 Talk with every stranger, stranger the better. 18:12 Talk with every stranger, stranger the better. 18:17 I'll fall in love just a little, little bit, every day with someone new. 18:22 I'll fall in love just a little, little bit, every day with someone go. 18:58 There's no starting over, no new beginnings. Speaker B 19:02 Time raises all. Dan Abramov 19:04 Just got to keep on keeping on. 19:08 Got to keep on going, looking straight out on the road. 19:12 Can't worry about what's behind you, what's coming for you further up the road. 19:18 Try not to hold on to what is gone. 19:20 I try to do right what is wrong. 19:23 I try to keep on keeping Ever just sad. 20:26 There's hope, there's a silver line. 20:30 Show me my silver line. Speaker B 20:33 Show me my silver line. Dan Abramov 20:38 I hear a voice call, calling out for me. 20:43 These shackles I made, it's time to be free. 20:48 Be it for ease, be it for love, I won't You want to take me? 22:58 Tell me, 'cause you really know I still love you head to toe. 23:07 Like the back of my car on a sunny day, your song on the radio. 24:17 You want to take me? 26:14 We met in the Paris cafe. 26:21 Can I sit with you? 27:06 Baby, in another world I don't feel so unlovable. 27:30 In a room full of people, I look for you. 27:34 Would you avoid me, or would you look for And once there was a nightingale. 28:41 It had a son that mowed the lawn. 28:46 The son was an okay guy. 28:50 They had a pet dragonfly. 28:55 The dragonfly ran away. 28:58 But it came back with a story to say. 29:29 The forest of talking trees, they used to sing about the birds and the bees. 29:40 The bees had declared a war, the sky wasn't big enough for them all. 29:48 The birds, they got help from below, from dirty ponds and the creatures of snow. 30:33 So for a while, things were calm. 30:38 They were scared down in their homes. 30:43 The forest that once was green was colored black by those killing machines. 30:50 But she and her furry friends took down the queen, the Enderman. 31:00 And that's how the story goes, the story of the beast with those four dirty paws. 33:27 I could never define all that you are to me. 33:32 So move me, baby, shake like a bad willow tree. 33:39 You do it naturally. 33:43 Move me, baby, you are the right of movement. 33:50 It's reason made lucid. 34:25 I'm so flawed and free. 34:28 So move me, baby. 34:31 Shake like the bough of a willow tree. 34:34 You do it naturally. 34:39 Move me, baby. 34:41 So move me, baby. 34:45 Like you've nothing left to prove, but nothing to lose. 34:50 Move me, baby. 41:45 Beneath your way, every night my mind is running around. 41:54 Thunder's getting loud, loud, loud. 41:57 Baby, you're like lightning in a bottle. 42:03 I can't let you go now that I got it. 42:06 Now all I need is to be By your electric light, baby, your electric light. 42:32 Electric light. 43:08 Baby, you're like lightning in a bottle. 43:14 I can't let you go now that I got it. 43:19 All I need is to be struck by your electric— It's empty in the valley of your heart. 43:49 The sun, it rises slowly as you walk away from all the fears and all the faults you've left behind. Speaker B 44:00 The harvest left no food for you to eat. Dan Abramov 44:03 You cannibal, you meat eater, you see. 44:06 But I've seen the same, I know the shame in your defeat. 44:14 But I will hold on hope, and I won't let you choke on the noose around your neck. 44:24 And I'll find strength in pain, and I will change my ways. 44:31 I'll know my name as it's called again. 45:10 Despite my faults and despite my growing fears, but I will hold on hope and I won't let you choke on the noose around your neck. 45:26 And I'll put strength in pain and I will change my ways. 45:33 I'll know my name as it's cold again. 45:41 So come out of your cave walking on your hands and see the world hanging upside down. 45:47 You can understand dependence when you know their maker's plan. 45:55 So make your sirens call and sing all you want. 46:02 I will not hear what you have to say, 'cause I need freedom now and I need You know how to live my life as it's meant to be. 46:43 Let's hear you shout on the news around your neck. 46:53 And I find strength in pain, and I will change my ways. 47:02 I'll know my name as it's calling you. 47:40 my heart for the first time. 47:44 Cuz now I'm moving on. 47:47 Yeah, I'm moving on. 47:54 And there's a place that I've dreamed of where I can free my mind. 48:03 I hear the sounds of the sea season and lose all sense of time. 48:12 I'm moving far away to a sunny place where it's just you and me. 48:30 Feels like we're in a dream. 48:33 You know what And we will sleep by the ocean. 49:08 Our hearts will move with the tide. 49:13 And we will wake in the morning to see the sun paint the sky. 50:27 To a sunny place where it's just you and me. 50:36 Feels like we're in a dream, you know what I mean. 51:16 kind of way to face the burning heat. 51:20 I just think about my baby. 51:23 I'm so full of love I could barely eat. 51:28 There's nothing sweeter than my baby. 51:32 I'd never walk once from the cherry tree. 51:36 My baby, sweet as can be. 51:39 She'd give me toothaches just from kissing me. 51:44 When my time comes around, lay me gently in the cold, darker. 51:52 No grave can hold my body down. 51:55 I'll crawl home to her. 51:59 When my baby found me, I was 3 days on a drunken sin. 52:08 I woke with the walls around me. 52:11 Nothing in her room but an empty crib. 52:16 And I was burning up a fever. 52:19 I didn't care much how long I lived. 52:24 But I swear I thought I dreamed her. 52:27 She never asked me once about the wrong I did. 52:32 When my time comes around, lay me gently in the cold dark earth. 52:40 No grave can hold my body down. 52:43 I'll crawl home to her when my time comes around. 52:52 Lay me gently in the cold darkness. 52:55 No grave can hold my body down. 52:59 I'll crawl home to her. 53:04 I would never I'd still have my baby and my babe would have me. 53:19 When I was kissing on my baby and she put her look down soft and sweet, in the lonely flat I was free. 53:31 Heaven and hell were words to me. 53:35 When my time comes around, lay me gently in the cold, dark earth. 53:43 No grave can hold my body down. 53:46 I'll crawl home to earth. 53:51 When my time comes around, lay me gently in the cold, dark earth. 59:10 Come on, Texas sun, say you want to hit the highway while the engine roars. 59:24 Come on, roll with me till the sun goes down. 59:29 The Texas sun will Texas sun caressing you from Fort Worth to Amarillo. 59:50 Come on, roll with me till the sun dips, you know. 59:56 Texas sun, Texas sun. 60:41 Texas sun. 60:49 Texas sun. 60:53 Texas sun. 61:01 Texas sun. 61:11 You say you like the wind blowing through your hair. 61:16 Come on, roll with me till the sun goes down. 61:22 Texas sun. 61:33 Texas sun. 61:37 Oh baby, you're so gorgeous. 61:41 How about you and me take a little trip? 61:56 Think about it. 62:41 All right, come close. 62:45 Let me show you everything I know. 62:52 The jungle's like My simple— this ain't going to work. 63:50 My, my weak words and tipsy talks— I can't take this place. 64:04 No, I can't take this place. 64:07 I just want to go where I can get some space. 66:22 I can't take this place. 66:29 I can't take this place. 66:38 I just want to go where I can get some space. 68:06 Down dirt country road and you'll crawl back with fire and snow, 'cause there ain't no other place to go. 68:20 I need you like God needs the devil, honey. 68:23 Someday soon this dust going to settle. 68:26 Come real quick and get inside my mind, 'cause when I'm all fucked up but don't feel no pain. 68:35 Won't you run to me, run to my face, baby? 68:39 Won't you come and give me high? 68:46 I'm in love in a nightmare. 68:48 Please don't wake me up. 68:50 Got a bad case of making bad luck. 68:53 It's who I am, not who I was, but that's a lie. 68:57 What can you do? 68:59 I need someone and I Come and get me high. 69:32 I said I need you like God needs the devil, honey. 69:34 Someday soon the dust's going to settle. 69:37 Come real quick, get inside my mind. 69:43 When I'm all fucked up, don't feel no pain. 69:45 Won't you burn in me, run through my veins? 69:49 Burn in me, run through my veins. 69:53 Baby, won't you come and get me high? 70:00 Baby, won't you come and get me high? 79:17 You run. 79:18 Oh, light, oh, guard the light. 79:25 Oh, keep the spirit strong. 79:31 Watch it grow, child of Waukegan. 79:35 When I run through the deep dark forest long after After this begun, where the sun would set, the trees were dead and the rivers were none. 79:51 And I hoped for a trace to lead me back home from this place, but there was no sound, there was only me and my disgrace. 80:31 Yeah. 80:41 Father at the door. 80:45 You don't smile anymore. 80:50 You're a drifter, a shape-shifter. 80:53 Let me see you run. 80:57 Wayward winds, a voice that sings of a forgotten land. 81:07 See it fall, child of Hollow Land, demanding hands. 81:13 When I ran through the deep dark forest long after this begun, where the sun would set, the trees were dead and the rivers were not. 81:27 And all for a chance to lead me back home from this place, but there was no Hello everyone, we're going to be getting started in just a few minutes. 82:25 Come on in and grab a seat. 82:33 Thank you. 82:34 Uh, I believe so. 82:42 I believe so. 82:46 Um, organically Great, awesome. 83:00 Let us get started with our afternoon sessions. 83:04 Dan has been working on this for a while, and he's now going to give us a live demo of what he's put together that he's calling Social Components. 83:12 Take it away, Dan. Speaker B 83:19 Can anybody hear me? 83:24 Okay. 83:26 Hi. 83:32 I couldn't find the water, so today it's going to be Coke. 83:39 So hi. 83:40 My name is Dana Abramov. 83:41 I used to work on Bluesky for a little bit and on React for a little bit before that. 83:49 And right now I'm just doing random stuff. 83:53 And so I— you know, some projects you start because you have a real problem that you want to solve. 83:59 This is not one of those projects. 84:02 So this is one of those projects where I just had this idea that, you know, I know React pretty well and I know how components work. 84:10 And I also kind of know it at this point. 84:14 And I just had this idea, like, what if you put components on it? 84:17 And I just couldn't, like, kind of get rid of this idea. 84:20 And at some point I decided, okay, I just need to try and see where that leads. 84:26 So I vibecoded a prototype, like, a couple of months ago in one week. 84:31 And it kind of looked like this. 84:33 I ended up spending the next 2 months completely rebuilding it, like, properly. 84:39 But I'll just show you the prototype first, and then I'll kind of show you how it works. 84:44 So what you see here is I guess it's kind of like— it's kind of like a Bluesky profile page. 84:50 So I'm just using that as an example. 84:53 You know, it has like different tabs. 84:55 It has, you know, the replies tab and the media tab. 84:59 It has pagination. 85:01 It has this curricular component. 85:04 You know, there's this third-party website that has this feature that lets you see social connection and jump between people and see who interacted with whom recently, which I think is a really nice kind of thing you can do when the data is open. 85:25 But one frustration for me with a lot of apps, like with app paradigm in general, is that that things like this have to live somewhere else. 85:35 Like, if you— there's really no point in continuum between, you know, here's like a one-off tool that I throw away that like lives on some URL somewhere that is like not discoverable, and here's like a whole app. 85:48 And there really isn't much like in the middle. 85:52 And so I thought it would be interesting if there was a way for, you know, people to kind of prototype features like this in a place where you can find them. 86:01 And so maybe let's have a look at how this actually works. 86:04 Because so far, you know, it just looks like kind of like a worse browser. 86:09 But one interesting thing we can do is I can click inspect on it. 86:15 And it kind of opens up a little bit. 86:18 You can see, you know, that actually like what I've been looking for is kind of like a tree. 86:26 Kind of like a React tree. 86:27 Except each of these things is actually a— it's proto record somewhere. 86:33 So these are different components that could be implemented by different people, could live in different places, and so on. 86:40 And maybe let's— I'm just going to pull it out a little bit. 86:43 So this is my profile header. 86:46 And this is profile posts. 86:49 And profile posts is probably, you know, you wouldn't be surprised that it It's a list of posts. 86:58 And a post itself, you know, it has, like, avatar and handle. Dan Abramov 87:05 Yeah. Speaker B 87:06 We need to go deeper. 87:10 Yeah. 87:10 So, okay. 87:11 So, what, you know, what can we do with it? 87:15 So, one thing I want to do is I'm actually going to open this as a different user. 87:22 So I have like another browser here. 87:26 Let's take this profile header. 87:30 So I'm now logged in not as Dan Abramov but like as another user. 87:34 And I have this remix button here. 87:36 So I'm going to press remix. 87:38 And I hope that it works. 87:41 And so this opens up sort of an editor. 87:43 So this is the profile header. 87:46 And you can see there's a bunch of something that looks like JSX. 87:48 Here, but, you know, really it's JSON. 87:51 That's what JSX has always been. 87:54 And I can actually look at— like, another way to look at it is just on PDSLS. 87:59 So, I'm going to open PDSLS. 88:02 And I have this inlay component collection. 88:06 And I have this profile header. 88:09 And so, this stuff that you see here, like, there's like a stack with like avatar and like title and caption and like a all of that jazz. 88:17 And like the COVID uh, is actually like— you can also see here that this is this JSON structure, which is just like a UI tree. 88:27 And it imports from some DIDs, which are— this is like the built-ins, this is the design system, and these are actually like my other components. 88:35 So it's kind of like DIDs act kind of like packages. 88:39 And here it says that this component can act as a kind of a view of the profile collection. 88:46 So it's like a thing that can render a profile. 88:49 At least one of those things. 88:51 And so I'm going to remix this a little bit. 88:53 I think I'll get rid of the COVID And actually, like, maybe, you know, maybe I'll get rid of the avatar too. 89:01 And instead I'll add a— I'll add a circle component. 89:05 So you've seen the circle before. 89:08 So I'll just throw that in here so that it's easy to find. 89:12 I think I'll actually— let me put it here. 89:16 And I'll make this a row instead of— yeah. 89:20 And maybe I'll add some inset. 89:24 OK. 89:24 So this is my take on what a profile header should be. 89:28 So there's already a profile header component. 89:31 But I'm going to publish another profile header component from kind of my perspective, from this user's perspective. 89:39 And so this, you know, this doesn't change, like, what we're looking at here. 89:43 But actually, like, again, you know, I can switch between them. 89:46 So here's the new profile header component from, you know, my other user. 89:51 And, you know, you can see there are, like, all these different ways to look at the profile. 89:56 Right? 89:56 Like, what makes a profile a profile? 89:59 Even, like, something like— Like BDSLS shows it. 90:04 And so, okay. 90:06 So, I made this profile header. 90:08 But this profile component written by somebody else, it doesn't use that header, right? 90:13 But what I can do is, again, I can click Remix here. 90:16 And so, now we're going to— wait. 90:19 Is it going to the wrong thing? 90:22 I think it's going— let me just refresh just in case. 90:26 Yeah, it went to the wrong thing. 90:28 But here's the— so here is the profile component itself that contains— you can see it has the profile header. 90:36 It has the tabs with, like, posts and replies. 90:39 And kind of, you know, delegates to those. 90:42 It has the circle tab. 90:44 I'm not going to need that because I've moved the circle, you know, into— and I guess Paul doesn't listen to music, so it doesn't have to. 90:52 FamPlace. 90:54 I'll just get rid of that too, actually, for now. 91:01 Yeah. 91:01 And so— but now we have two versions of the profile header, right? 91:04 There's one by Dan Abramov, which is the original one. 91:07 It's here. 91:08 And then there's profile header by my user, which I just created. 91:13 And so what I'm going to do is I'm going to slide this a little bit up so that it takes precedence. Dan Abramov 91:18 This. Speaker B 91:19 So now the profile header is going to refer to the version that, you know, that I remixed from my user. 91:25 So this is kind of like a low-stakes way to, like, play around with, okay, this is what I think a profile page should be. 91:33 So I'm just going to, you know, I'm just going to publish this as profile. 91:37 And again, the, you know, it's just an option here. 91:42 So now you can see that this is my take, you know, my user's take on what a profile page could be. 91:58 Okay. 91:58 So of course we don't want to always create everything from scratch unless you're using LLMs. 92:04 This project is like very caveman mode. 92:06 I'm sure there's like a way to get LLM to do this as well. 92:09 And I don't know if it makes sense. 92:11 But I'm just showing you. 92:13 Kind of the vanilla version. 92:16 And so canvas, you know, this thing I'm calling it like a canvas, right? 92:21 It's just like this thing where you can kind of jump around and kind of see different things and pull them apart. 92:29 But one problem— that's my first prototype. 92:32 But I realized that, okay, like how do you actually discover these components that other people create? 92:36 And that's, you know, I made the editor, but then the question was Where do you find them? 92:41 So I realized I needed something like a browser too. 92:45 That's kind of like— I guess kind of like PDSLS, right? 92:48 So we could say, you know, if you've ever seen PDSLS, you know this interface where, like, you select the user and then you select the collection type and you can just, like, navigate between records, right? 93:04 So this is kind of PDSLS. 93:06 Excel is inspired. 93:09 But maybe you can, like, register these, like, other ways to view the same data. 93:15 Right? 93:15 That are, like, more human-friendly. 93:18 And I'll just show you, like, the process for what, you know, what it feels like to create one of those. 93:24 So I'll say I'll go to profile. 93:27 And again, like, just a profile record. 93:31 Like, looks like this. 93:31 This is a built-in Chin component. 93:33 I'm going to create a new one. 93:34 It gives me this template with like stuff that's available. 93:39 And I'm just going to say, okay, like let's say I want an avatar. 93:44 And it knows that, oh, like there's already a JIT here. 93:47 So it pre-fills it. 93:48 And I want like a, you know, I want like a title with let's say like Paul's like display name. 93:57 Right? 93:58 Display name here, and let's make this like a— oops, oops, oops— Dan Abramov 94:02 a row. Speaker B 94:06 Okay. 94:06 So I'm going to publish this as like profile example. 94:13 Okay. 94:13 So here's my profile— where is it in the list? 94:17 I don't see it in the list for some— oh, there it is. 94:20 So here's my profile example component. 94:23 Let's check that it appears in my other user's DSLS. 94:29 So there it is. 94:32 Profile example. 94:33 You can see the tree and stuff. 94:36 So there are 3 types of inlay components. 94:40 So this kind of component is called a template component because the actual JSON for how to— for the UI lives directly inside the record. 94:51 So, you know, if inlay dies, you can, you know, you can just interpret the same data and kind of bring it back to life. 95:00 But it's very limited, right? 95:01 Because I can't have— this is not JavaScript. 95:03 This is just like a JSX editor. 95:05 It's just like— it could have been like a block editor or whatever. 95:09 But it doesn't have like loops. 95:11 It doesn't have conditions. 95:12 It doesn't have like any fancy— you can't like hit another app view, another service or whatever. 95:17 So it's a bit limited. 95:19 But the one thing we can do we can eject. 95:21 I really like this feature. 95:23 I build it into everything. 95:26 Okay. 95:27 Wait. 95:27 I can't eject from this one because I haven't created token. 95:31 Let me use— let me just do the same example from my user where I already connected. 95:37 So, there is this thing called valldown. 95:41 I don't know if you— let me delete this. 95:46 Call this profile X. 95:47 Example. 95:49 Yeah. 95:50 So there's this thing called Valtown, which is like a kind of simple coding environment for publishing some server code. 96:00 Kind of like REPL for, you know, that lets you like run a server. 96:04 So when you press eject on a component, what it's going to do is it's going to hit the Valtown API, which is for some reason taking like 5 seconds, and generate what they call eval. 96:15 So eval is just, you know, it's just a server. 96:19 And I made some helpers for this thing. 96:22 And like these are lexicons. 96:23 So it like gets type checked. 96:27 But this is, you know, this is my component. 96:30 Like I just moved it from here. 96:32 Now I can like call it. 96:33 So it's an xRPC call to that component, which means that I can, you know, I can treat it as code. 96:40 Code. 96:40 I could make, like, different, you know, API calls here or whatever. 96:48 And let's see. 96:49 Yeah. 96:49 You see it updated. 96:51 So it works. 96:55 All right. 96:58 Now I need to drink. 97:05 So let's Let's build another fun little component. 97:08 So, let's go to this— what is it? 97:14 No. 97:16 The you and me connection thing that everybody's been using at the conference. 97:20 Well, spoiler, I already made it. 97:25 Well, let me just delete it so I can demo it again. 97:30 Where is the— why can't I delete it actually? 97:34 Is it from a different— oh, I made it from a different account. 97:37 Wait a second. 97:37 I'll delete it. 97:38 Don't— close your eyes. 97:42 So that you haven't seen it. 97:44 And then I'll just make it again. 97:46 Okay. 97:46 It's gone. 97:47 It's gone. 97:48 So, we're going to make a little component. 97:50 You know, like when you look at the version of these connections, it's like what is going on here? 97:55 Subject did and so on. 97:58 So, let's see. 98:00 We're going to create a little component. 98:03 That I'm gonna take the did of myself, you know, from the record. 98:08 And let's show maybe like an AVI handle. 98:14 Maybe it's not a bad idea. 98:16 And then let's take the did of the subject and maybe also show an AVI handle. 98:21 And maybe let's like just do some emoji like high five. 98:29 And yeah, so, and let's say we still add a timestamp. 98:37 Okay, so we're gonna publish this as a connection. 98:40 So now you can see, you know, you can see what's been going on. 98:45 Yeah, let's see who I said hi to. Dan Abramov 98:53 Yeah. Speaker B 98:55 Okay. 98:55 So this is working. 98:58 Let's go back to the— let's go back to the profile. 99:07 So I kind of have this playground where I can, you know, kind of just play with different components, kind of riff on them. 99:15 It is a bit tedious sometimes. 99:17 Like if I want to— like maybe I just want to change something globally. 99:20 Right? 99:20 Like in npm, like the models of So far I'm following this similar to npm, but like each component has dependencies. 99:26 And so like if you want to change something, you fork that component and then you kind of have to fork upwards, dependency chain. 99:32 But for example, in npm there's this feature like resolutions at the top where you can just say, you know, for everything, like I actually want to globally make something different. 99:41 So, for example, like let's say, you know, like yesterday Paul was showing this example with removing the handles and just showing I'm like, I'm so far ahead of the display names. 99:53 Way ahead of you. 99:55 Well, the truth is I actually haven't built a handle component. 99:57 So I just literally can't make the handle work. 100:01 But I have a different idea. 100:02 So I kind of want to remix this Ivy handle thing. 100:08 And specifically, you know, I want to democratize education. 100:16 So I want to make us all PhDs. 100:20 So I'm just going to put PhD here. 100:24 And I'm going to publish that. 100:26 But now the problem is, okay, you know, like, you want things to be predictable. 100:30 So you don't really want, like, everything to just fall apart because, like, you change one little thing. 100:36 So you kind of want to be, like, intentional about, like, do you want to, like, override something. 100:42 And so, I'm not going to like fork all the way to the top. 100:45 Instead, I'm going to use something slightly different. 100:48 So, I have this like stack feature here. 100:51 Which is kind of like a global resolution mechanism. 100:54 Which has like first, you know, you go through whatever the component author specifies. 100:59 And then you can fall back on like my versions of components if some are missing. 101:04 But I can actually drag that up and say, whoa. 101:06 Oh, wait. 101:08 I— okay. 101:10 That was not intentional. 101:12 But we can pretend that this didn't happen. 101:14 So, you can, you know, you can say that I want to prefer this version that I, you know, of any component. 101:23 And so, when I drag this thing above, it means that it will prefer my versions of a component throughout the whole tree. 101:30 So, this is why everyone is a page. 101:32 D now. Dan Abramov 101:34 Great. Speaker B 101:42 Okay. 101:42 We're going to run out of time soon. 101:45 I just want to see why this broke because I kind of wanted to show this. 101:50 So connection, resolve type connection. 102:01 So is it called— did I not save it? 102:07 Oh, it has a different NSID. 102:08 I created it from a different user. 102:13 OK, I'll just publish it from— yeah, I did not anticipate this. 102:20 One second, let me delete this. 102:25 This is published by— it's not easy to be two different users at the same time. 102:34 Let me just delete this as if it didn't exist. 102:37 And I'm gonna— I'm just gonna create this again from my real user because that's what I'm already hardcoding somewhere else. 102:46 So this is my connection component. 102:49 Okay, cool. 102:50 And the— yeah, so the other thing I wanted I wanted to show here is— so feeds, right? 102:58 Like in feeds, we— like feeds are another area where there's like some providers of like the actual like feed content. 103:08 But the format of the feed itself is determined by the app. 103:11 And you can't really experiment with like what goes into a feed if you're not an app author. 103:17 So something I wanted to show here is that Actually, like, if you look at the post list component where I'm— that is responsible for showing, you know, this list of posts, if you look at its source, which is here, like profile posts, for example. 103:39 So, if you look at its source, the way it works is that it hits some JIT with a query. 103:47 Right? 103:47 I'm calling this like get profile post page. 103:51 And I have this, you know, in my valletown, I have— like I have a service running that is— wait. 104:01 Then this is not the one. 104:03 This one. 104:06 So, this is the thing that generates the profile page. 104:10 The profile post. 104:11 And you can see that it hits the Booska API. 104:13 And then it just returns UI components. 104:16 Right? 104:16 So this is how we see, you know, like this stuff is coming from here. 104:23 And similarly, the media tab where we see a grid of those images, like it's not like hardcoded. 104:31 It's also like it's just a component hidden, a list of get profile media page. 104:36 And here it's like a bunch of blobs that are getting clipped as squares. 104:41 Or like get telefilm place. Dan Abramov 104:43 On— Speaker B 104:44 well, again, Paul doesn't listen to music, but if you go to my profile, here you can— it's like everything is a little browser. 104:58 Yeah, if you go to my profile and look at plays, you see, like, it's— this is Teal FM plays. 105:04 And it just, you know, this is how it works. 105:06 It just fetches the collection and renders an array of Teal play components. 105:10 Sense. 105:13 But, you know, what if you want to experiment with the content of those feeds themselves? 105:18 And so actually each of these, you know, like I provide these endpoints here. 105:23 But these are also dynamically bound. 105:26 So the way it actually works is that in my PGSLS, there's an endpoint collection that says to get, you know, get profile posts page gets resolved to a service running here, which is, you know, this code. 105:44 And so this is how it renders an array of posts. 105:47 But what my other user does— so my other user has— also has an endpoint record for the same endpoint. 105:58 And it says, actually, let's hit this other— you know, let's hit this other service. 106:02 And this other service is— Here it is. 106:08 So this is a different implementation of the get profile posts page. 106:12 And here it fetches the posts. 106:14 But it also fetches the you and me connections. 106:18 And, you know, and the element is just like a connection— the connection component that I created earlier. 106:26 And it kind of just interleaves them. 106:28 And so this is— this is when, you know, when I priorize prioritize— sorry, in here, when I prioritize my other stuff in the stack, then this is why it's gonna just— yeah, like it's just gonna show them inline. 106:43 So this is something that you can also experiment with. 106:50 Yeah, and you know, this is just a prototype. 106:54 Like, I don't know if it's— I made, like, I've coded like a SwiftUI client for it. 106:59 So, the— I said there are 3 types of components. 107:03 There's template components that are— the UI lives in the record. 107:07 There's external components, which are, you know, the ones that are ejected, which hit like a service or like a Val or your own server or whatever. 107:17 And the third type is built in. 107:18 And so, the— you know, when you looked at the— you can see these are the red ones. 107:24 Are overwritten from the stack. 107:28 So it's like I want to do something different here. 107:31 So you can see that here, like, these are the built-ins. 107:37 So they don't have any implementation on the protocol. 107:40 This is something that, like, the design system implements. 107:44 And I, you know, I have my own design system that is like what I'm using here. 107:48 All this, like, row, caption, avatar, all this stuff you've seen. 107:51 But in principle, you could make, you know, you could fork my— I just open sourced Inlay, so it's on Tangled. 107:59 Or is it Tangled Inlay? 108:03 Yeah, there it is. 108:05 So the app is also open source. 108:08 So, you know, you can fork it, you can make your own version. 108:10 You can decide to have a different set of primitives and to, like, I made these primitives to be like cross-platform. 108:19 So, you could make like a SwiftUI client for them or something else. 108:22 But you could make them like closer to HTML if you want. 108:24 And yeah. 108:26 This is just an idea I'm kind of throwing out. 108:27 Like I'm probably not going to like maintain this forever. 108:31 But it's on the protocol. 108:32 So, in some sense, it is maintained forever. 108:34 So, thank you. 108:40 Oh, I forgot. 108:41 Yeah. 108:42 It's called inlay. 108:43 It's like inlay.at. 108:45 Yeah, this is how you find it. 108:48 OK, sorry. 108:49 Bye.