1 00:00:18,560 --> 00:00:22,620 welcome to svelte radio hey 2 00:00:22,620 --> 00:00:26,420 welcome everybody we're back it's svelte radio are you excited 3 00:00:27,540 --> 00:00:27,700 Yes, 4 00:00:28,000 --> 00:00:28,460 of course. 5 00:00:28,840 --> 00:00:35,660 Yeah, everyone's excited. Who isn't? I'm here with my beautiful co-host Brittany. And today 6 00:00:35,660 --> 00:00:36,500 I have an 7 00:00:36,500 --> 00:00:40,800 announcement. Jeppe, from a couple of episodes ago, I think, 8 00:00:40,860 --> 00:00:41,920 is joining 9 00:00:41,920 --> 00:00:44,480 us as a host on Svelte Radio. Welcome, Jeppe. 10 00:00:44,540 --> 00:00:49,220 Amazing. I love being here, so I'm super happy to now be here on a permanent basis. 11 00:00:49,300 --> 00:00:49,720 From 12 00:00:49,720 --> 00:00:52,120 guest to host in No Flux. 13 00:00:54,820 --> 00:00:55,600 We're happy 14 00:00:55,600 --> 00:00:57,920 to have more people rotating. 15 00:00:58,140 --> 00:00:58,420 Yes, 16 00:00:58,650 --> 00:00:58,840 yes. 17 00:00:59,750 --> 00:01:01,260 And we also have a guest. 18 00:01:01,440 --> 00:01:02,780 There's so many new people here today. 19 00:01:03,240 --> 00:01:03,660 It's crazy. 20 00:01:05,379 --> 00:01:06,100 Paolo, welcome. 21 00:01:06,660 --> 00:01:06,860 Yeah, 22 00:01:07,260 --> 00:01:07,480 hi. 23 00:01:08,760 --> 00:01:10,920 And Paolo, you're a Svelte maintainer. 24 00:01:11,979 --> 00:01:15,000 People can find you everywhere in the Svelte world, I think. 25 00:01:15,440 --> 00:01:18,680 Yeah, I used to joke that if it has the word Svelte on it, 26 00:01:18,900 --> 00:01:20,400 I'm probably involved in some way. 27 00:01:21,250 --> 00:01:21,400 Yeah. 28 00:01:21,670 --> 00:01:21,800 Yeah. 29 00:01:22,580 --> 00:01:22,900 All right. 30 00:01:22,990 --> 00:01:28,520 So today we are going to talk about Svelte custom renderers. 31 00:01:28,840 --> 00:01:30,080 Is that what you call them? 32 00:01:30,480 --> 00:01:30,720 Yes. 33 00:01:31,140 --> 00:01:31,320 Yeah. 34 00:01:31,430 --> 00:01:31,540 Yeah. 35 00:01:31,690 --> 00:01:39,540 So basically, Paolo, you've made like a proof of concept of a custom renderer and stuff. 36 00:01:39,610 --> 00:01:42,380 So there's all sorts of fun things to talk about here. 37 00:01:42,560 --> 00:01:47,160 But maybe before we start, why don't you tell us a bit about yourself? 38 00:01:48,140 --> 00:01:52,220 And how you got into Svelte? 39 00:01:53,650 --> 00:01:54,640 I think we've 40 00:01:54,640 --> 00:01:57,500 done this once before for Svelte Lab way, way back. 41 00:01:57,800 --> 00:02:00,000 But let's hear a refresher. 42 00:02:00,400 --> 00:02:00,760 To refresh. 43 00:02:01,010 --> 00:02:02,120 So I am Paolo Ricciotti. 44 00:02:02,820 --> 00:02:05,940 I come from Campo Basso, Italy, which is a very small city, 45 00:02:06,150 --> 00:02:07,800 very small and cold city in Italy. 46 00:02:11,160 --> 00:02:14,360 I am, yeah, as you said, I'm a Svelte maintainer. 47 00:02:14,540 --> 00:02:17,040 So I was previously a Svelte ambassador. 48 00:02:17,500 --> 00:02:19,420 I'm still a Svelte ambassador in the heart. 49 00:02:19,680 --> 00:02:22,400 So I will continue to say that I'm a Svelte ambassador. 50 00:02:23,160 --> 00:02:25,300 But I've also joined the core team, I think, 51 00:02:25,420 --> 00:02:27,660 like it's been six, seven months now. 52 00:02:29,900 --> 00:02:34,320 And I work for Main Matter, which is a consultancy. 53 00:02:34,780 --> 00:02:37,440 We specialize in Svelte and also Rust 54 00:02:37,800 --> 00:02:40,000 and like all this difficult stuff. 55 00:02:41,160 --> 00:02:43,280 How is being a core maintainer? 56 00:02:43,300 --> 00:02:44,160 What have you worked on? 57 00:02:45,360 --> 00:02:53,080 Yeah, I mean, I did a bunch of small bug fixes overall. 58 00:02:54,080 --> 00:02:58,100 I also worked, like, I have a PR open to the onChange, 59 00:02:58,380 --> 00:03:00,780 like, you can add an onChange prop to state. 60 00:03:01,880 --> 00:03:03,200 It's been stale for a while, 61 00:03:03,300 --> 00:03:06,560 so, like, I don't know if we will ever get to merge, but... 62 00:03:06,800 --> 00:03:07,440 So what 63 00:03:07,440 --> 00:03:08,660 does that actually mean? 64 00:03:09,040 --> 00:03:10,140 Like, onChange states? 65 00:03:10,900 --> 00:03:14,460 Basically a way to, like, when you declare your state, 66 00:03:14,660 --> 00:03:18,980 you can add an unchanged property as the second. 67 00:03:19,180 --> 00:03:21,340 Okay, so just like an event, basically. 68 00:03:21,900 --> 00:03:23,060 Yeah, it's basically a callback. 69 00:03:23,500 --> 00:03:26,040 But basically it's a bit different from an effect 70 00:03:26,280 --> 00:03:29,440 from the fact that, well, first thing first is sync. 71 00:03:29,660 --> 00:03:32,340 So like it's not delayed after a microtask. 72 00:03:33,180 --> 00:03:35,880 And also in general, like it's a bit less, 73 00:03:36,900 --> 00:03:40,700 it doesn't rerun whenever some dependency inside reruns. 74 00:03:40,720 --> 00:03:42,540 So like it's a bit more constrained, 75 00:03:43,220 --> 00:03:47,060 but it could be very well used to do stuff like 76 00:03:47,380 --> 00:03:49,540 synchronize with local storage or stuff like that 77 00:03:49,950 --> 00:03:50,120 without 78 00:03:50,120 --> 00:03:50,800 using one 79 00:03:50,800 --> 00:03:51,080 effect. 80 00:03:52,180 --> 00:03:52,720 Okay, nice. 81 00:03:53,040 --> 00:03:53,500 That 82 00:03:53,500 --> 00:03:55,360 probably is my biggest PR. 83 00:03:55,670 --> 00:03:58,640 I also did some other nice feature. 84 00:03:58,880 --> 00:04:03,260 I think I've implemented the from action utility. 85 00:04:05,560 --> 00:04:06,900 And I've also added, 86 00:04:09,150 --> 00:04:12,059 like one of my achievement on lock was 87 00:04:12,160 --> 00:04:15,480 I've added a compiler option, which we will talk about for a second. 88 00:04:17,220 --> 00:04:17,600 All right. 89 00:04:17,799 --> 00:04:22,320 But we're not here to talk about all your other PRs, right? 90 00:04:22,420 --> 00:04:23,340 We're here to talk about 91 00:04:23,340 --> 00:04:24,880 maybe 92 00:04:24,880 --> 00:04:25,820 an upcoming one. 93 00:04:27,440 --> 00:04:31,320 So let's dive into custom renderers. 94 00:04:31,440 --> 00:04:32,700 Well, why should we care? 95 00:04:33,460 --> 00:04:33,940 Yeah, okay. 96 00:04:34,000 --> 00:04:42,400 So a custom renderer is basically, it's a way to render Svelte to something that is not the DOM. 97 00:04:43,400 --> 00:04:47,500 I think initially, I'm pretty sure that React was the first one. 98 00:04:47,700 --> 00:04:54,860 I mean, the concept of React is based on custom renderers, basically, 99 00:04:55,200 --> 00:05:01,480 because I hope that you don't have to know, but unfortunately, I know that when you start a React project, 100 00:05:03,180 --> 00:05:05,680 you install bot React and React DOM. 101 00:05:06,440 --> 00:05:07,040 And the reason for 102 00:05:07,040 --> 00:05:09,080 that is because you are basically, 103 00:05:09,180 --> 00:05:12,980 like React doesn't concern itself with DOM at all. 104 00:05:13,200 --> 00:05:15,440 So like the only thing that React does, 105 00:05:15,580 --> 00:05:17,180 React is basically a diffing library. 106 00:05:17,400 --> 00:05:18,620 So like it's just saying, okay, 107 00:05:19,040 --> 00:05:21,240 I have this huge tree of objects, 108 00:05:22,080 --> 00:05:23,300 which is the virtual DOM. 109 00:05:24,420 --> 00:05:27,380 And then I just say, okay, I need to change this thing. 110 00:05:27,400 --> 00:05:30,320 So I invoke the custom renderer to say, 111 00:05:30,660 --> 00:05:31,700 please update the text, 112 00:05:32,040 --> 00:05:35,740 or please insert this element as a children of this element. 113 00:05:37,280 --> 00:05:39,580 And so React is the defig library, 114 00:05:39,960 --> 00:05:41,780 and then when you install React DOM, 115 00:05:42,440 --> 00:05:44,380 is what is actually writing to the DOM. 116 00:05:45,180 --> 00:05:48,480 And the power that this gave to React 117 00:05:48,620 --> 00:05:50,240 was the fact that if you want, 118 00:05:50,260 --> 00:05:53,080 you can technically write your own custom renderer 119 00:05:53,540 --> 00:05:55,580 to use the syntax of React 120 00:05:55,880 --> 00:05:57,720 and the reactivity model of React 121 00:05:58,520 --> 00:06:01,440 to basically render to the terminal. 122 00:06:01,720 --> 00:06:04,680 For example, there is Inc, which is a popular library 123 00:06:05,270 --> 00:06:08,660 that allows you to write terminal application with React. 124 00:06:09,240 --> 00:06:11,820 Or, for example, there is React Native, 125 00:06:12,110 --> 00:06:12,460 which I 126 00:06:12,460 --> 00:06:16,800 think is probably the biggest rendering 127 00:06:16,800 --> 00:06:17,260 React 128 00:06:17,740 --> 00:06:20,720 to a native application, so either Swift 129 00:06:20,720 --> 00:06:22,140 or Android. 130 00:06:23,160 --> 00:06:26,240 It's quite interesting in general, like custom renders. 131 00:06:26,860 --> 00:06:28,700 You mentioned a terminal. 132 00:06:29,380 --> 00:06:32,840 You wouldn't really think about, oh, should I use React for a terminal? 133 00:06:33,340 --> 00:06:34,760 And then there's also other stuff. 134 00:06:35,480 --> 00:06:40,980 I used to look with Envy on this thing called Remotion, 135 00:06:41,780 --> 00:06:42,080 which is 136 00:06:42,080 --> 00:06:45,340 basically React rendering to video, which is very cool. 137 00:06:46,080 --> 00:06:49,060 So you could programmatically create 138 00:06:49,060 --> 00:06:49,360 videos. 139 00:06:50,080 --> 00:06:54,380 There's also a dog X renderer for Word docs and for PDFs, I think. 140 00:06:54,380 --> 00:06:55,100 So that's pretty cool. 141 00:06:55,100 --> 00:06:55,180 Yeah, 142 00:06:55,340 --> 00:06:55,500 exactly. 143 00:06:55,800 --> 00:06:59,880 Basically, the point is you are using the library, 144 00:07:00,140 --> 00:07:01,960 the framework, the UI framework, 145 00:07:02,780 --> 00:07:05,360 as a bit of a templating language 146 00:07:05,650 --> 00:07:08,360 because, for example, a PDF is not reactive at all. 147 00:07:08,700 --> 00:07:12,460 You are literally just using the templating language, 148 00:07:13,160 --> 00:07:14,900 but it is the templating language 149 00:07:15,190 --> 00:07:17,100 that you are familiar with, as well. 150 00:07:18,580 --> 00:07:21,460 Or in case you can actually introduce 151 00:07:21,550 --> 00:07:23,400 a bit of reactivity like in the terminal, 152 00:07:24,180 --> 00:07:26,600 you might listen for input, for example. 153 00:07:26,700 --> 00:07:28,660 So like when the user types something 154 00:07:29,320 --> 00:07:31,680 and you want to re-render a part of the application 155 00:07:32,480 --> 00:07:34,820 and the terminal is actually quite flexible 156 00:07:35,240 --> 00:07:36,080 if you think about it 157 00:07:36,260 --> 00:07:39,800 because like you can do some very crazy things. 158 00:07:39,880 --> 00:07:44,840 Like we've seen now with like the advent of agents 159 00:07:45,420 --> 00:07:46,260 and like, for example, 160 00:07:46,380 --> 00:07:48,500 I think cloud code initially was, 161 00:07:48,540 --> 00:07:49,700 I don't know if it's already, 162 00:07:49,920 --> 00:07:53,800 but some of these are actually built with React Inc. 163 00:07:55,200 --> 00:07:57,720 because obviously you can build this nice UI 164 00:07:58,090 --> 00:08:00,260 with input that is actually a box 165 00:08:00,560 --> 00:08:00,900 and not 166 00:08:00,900 --> 00:08:02,220 just something 167 00:08:02,220 --> 00:08:03,000 in your terminal. 168 00:08:03,620 --> 00:08:05,760 Because, again, with ANSI code, 169 00:08:05,960 --> 00:08:08,340 which is the things that you are using, 170 00:08:09,040 --> 00:08:10,680 you can basically log some strings 171 00:08:10,900 --> 00:08:13,740 that renders an UI inside your terminal. 172 00:08:13,960 --> 00:08:14,980 So that's pretty nice. 173 00:08:16,460 --> 00:08:19,980 Yeah, some examples of that are like HTOP on Linux, 174 00:08:20,640 --> 00:08:21,440 so you can see 175 00:08:21,440 --> 00:08:22,700 a bunch of stuff. 176 00:08:24,700 --> 00:08:25,900 and so yeah basically 177 00:08:26,660 --> 00:08:28,200 that is the concept of a custom 178 00:08:28,580 --> 00:08:30,080 renderer and 179 00:08:31,160 --> 00:08:32,360 Svelte at this 180 00:08:32,460 --> 00:08:34,380 moment unfortunately does not have one 181 00:08:34,580 --> 00:08:36,240 like does not have the capability 182 00:08:36,640 --> 00:08:36,900 at all 183 00:08:37,960 --> 00:08:40,320 because like there are 184 00:08:40,560 --> 00:08:42,360 multiple reasons why there's 185 00:08:42,580 --> 00:08:44,080 no like there's 186 00:08:44,760 --> 00:08:45,780 there is no this capability 187 00:08:47,020 --> 00:08:48,020 one of these 188 00:08:48,300 --> 00:08:50,300 reasons is that especially with Svelte 5 189 00:08:51,300 --> 00:08:52,700 this is like I think it's a 190 00:08:52,720 --> 00:08:59,860 like interject like a very nice like side quest but and this by the way is the PR that we already 191 00:09:00,000 --> 00:09:09,560 merged into Svelte so up until a certain version which I'm gonna search but basically Svelte 5 192 00:09:10,740 --> 00:09:18,940 uses a very clever trick in my opinion to render your component so I don't know if you ever like 193 00:09:19,060 --> 00:09:23,260 sneaked into the output of a Svelte component, 194 00:09:24,120 --> 00:09:27,200 like the actual JavaScript that is compiled 195 00:09:27,690 --> 00:09:28,540 when you run a JavaScript. 196 00:09:29,639 --> 00:09:31,560 But if you have done it, 197 00:09:31,770 --> 00:09:35,680 you would notice that there is like a JavaScript file 198 00:09:35,860 --> 00:09:39,100 and then there is a call at the top level of the module, 199 00:09:39,720 --> 00:09:42,300 which is something like $.template. 200 00:09:42,660 --> 00:09:44,340 Now it's $.fromString. 201 00:09:44,560 --> 00:09:46,900 But the point is inside this template, 202 00:09:46,960 --> 00:09:48,940 there is a string which is basically 203 00:09:49,220 --> 00:09:51,000 all the static part of your component. 204 00:09:51,260 --> 00:09:55,220 So like if you have button with some variable, 205 00:09:56,020 --> 00:09:57,800 then an h1 and stuff like that, 206 00:09:57,980 --> 00:10:01,340 all these things are all part of this string, basically, 207 00:10:01,720 --> 00:10:03,500 that is passed to this template function. 208 00:10:05,680 --> 00:10:08,560 And obviously, like the reason why we need something like that 209 00:10:08,610 --> 00:10:11,900 is because when you mount your component to the DOM, 210 00:10:12,400 --> 00:10:14,860 you need to create all of this element, right? 211 00:10:14,960 --> 00:10:15,900 So if 212 00:10:15,900 --> 00:10:29,520 you would do something like that in vanilla JavaScript, for example, you would do something like documents.createElement, h1, and then documents.createElement, p, and then p 213 00:10:29,520 --> 00:10:30,700 .textContent 214 00:10:30,700 --> 00:10:35,340 is equal to hello world, and then h1.append p, and stuff like that. 215 00:10:35,440 --> 00:10:39,540 So like it's a very, but an easier way to do it 216 00:10:39,540 --> 00:10:43,560 and also faster way to do it is using the template element. 217 00:10:44,060 --> 00:10:44,280 The 218 00:10:44,280 --> 00:10:49,040 template element is part of the web component API. 219 00:10:50,030 --> 00:10:51,460 And so in the template element, 220 00:10:51,570 --> 00:10:53,820 what you can do is that you can write some HTML 221 00:10:54,260 --> 00:10:56,340 directly into your HTML if you want. 222 00:10:58,000 --> 00:11:00,220 And it will not render to the DOM. 223 00:11:01,080 --> 00:11:04,100 It will just basically be a container that you can fetch 224 00:11:04,540 --> 00:11:06,300 and then you can clone the input 225 00:11:06,680 --> 00:11:09,620 and everything inside it's already created for you 226 00:11:10,140 --> 00:11:12,360 by the HTML parser of the browser. 227 00:11:12,420 --> 00:11:13,260 So it's very fast. 228 00:11:13,900 --> 00:11:14,280 And so what 229 00:11:14,280 --> 00:11:15,640 Svelte is doing under the hood 230 00:11:15,800 --> 00:11:19,700 is that when you have, like, it builds this string, 231 00:11:20,640 --> 00:11:24,300 it then basically creates a template tag in memory, 232 00:11:24,940 --> 00:11:26,160 it's set inner HTML, 233 00:11:26,660 --> 00:11:29,300 and then it returns the content of the template. 234 00:11:29,980 --> 00:11:31,920 And so basically this is an easy way 235 00:11:32,160 --> 00:11:33,380 for you to convert from a 236 00:11:33,380 --> 00:11:34,080 string 237 00:11:34,340 --> 00:11:37,020 to an actual bunch of elements 238 00:11:37,380 --> 00:11:39,320 that actually you can put into the DOM. 239 00:11:39,900 --> 00:11:42,080 So the template element never shows up in the DOM? 240 00:11:43,040 --> 00:11:45,520 The template element doesn't show up in the 241 00:11:45,520 --> 00:11:45,820 DOM, 242 00:11:46,720 --> 00:11:48,340 regardless, but in this case, 243 00:11:48,520 --> 00:11:52,220 it is never even close to the DOM. 244 00:11:52,440 --> 00:11:53,500 It's literally a template 245 00:11:53,500 --> 00:11:54,920 element in memory 246 00:11:55,120 --> 00:11:55,520 that then 247 00:11:55,520 --> 00:11:56,160 you set the 248 00:11:56,160 --> 00:11:56,580 inner HTML, 249 00:11:56,710 --> 00:11:58,980 and then we just use that element 250 00:11:59,400 --> 00:12:01,740 to extract all the elements inside. 251 00:12:02,400 --> 00:12:02,440 Now, 252 00:12:02,920 --> 00:12:04,400 this is very, like, it's nice. 253 00:12:04,560 --> 00:12:05,360 It's a nice trick. 254 00:12:05,640 --> 00:12:07,440 It's fast and it's better. 255 00:12:08,320 --> 00:12:09,540 He had a couple of problems. 256 00:12:10,320 --> 00:12:13,580 The problem, number one, is that there are some CSP policies 257 00:12:14,160 --> 00:12:17,400 that don't allow you to use inner HTML at all. 258 00:12:17,680 --> 00:12:20,420 So, like, we had some issue actually open 259 00:12:20,920 --> 00:12:24,620 because, like, there were people that will not be able to use Svelte 5 260 00:12:24,940 --> 00:12:26,860 because Svelte 5 is using inner HTML. 261 00:12:27,220 --> 00:12:31,560 So even if nobody in their code was using inner HTML, 262 00:12:31,980 --> 00:12:34,300 Svelte was doing it and the CSP policy was saying, 263 00:12:34,480 --> 00:12:35,520 you can do that. 264 00:12:36,460 --> 00:12:38,700 I wonder what the reason is for that. 265 00:12:39,780 --> 00:12:43,460 Well, because inner HTML is very prone to XSS attack, right? 266 00:12:43,680 --> 00:12:44,360 That's why you 267 00:12:44,360 --> 00:12:47,060 get the dangerously used HTML. 268 00:12:47,820 --> 00:12:49,080 Yeah, fair enough. 269 00:12:49,700 --> 00:12:51,780 This is not a problem for Svelte, obviously, 270 00:12:51,900 --> 00:12:55,060 because the string that is passed to inner HTML 271 00:12:55,300 --> 00:12:56,640 is something that we built. 272 00:12:56,700 --> 00:12:57,120 So it 273 00:12:57,120 --> 00:12:58,880 does 274 00:12:58,880 --> 00:13:00,560 not have any user input at all. 275 00:13:00,780 --> 00:13:02,080 So it is fine to do, 276 00:13:02,720 --> 00:13:06,140 but obviously some CSP policy are very strict about it. 277 00:13:06,440 --> 00:13:08,680 And so this was a problem for some people, 278 00:13:09,140 --> 00:13:12,360 but most importantly for just Svelte custom renderer stuff, 279 00:13:12,900 --> 00:13:16,140 it was a problem because in the terminal, 280 00:13:16,600 --> 00:13:18,000 there's no template element. 281 00:13:18,180 --> 00:13:22,420 So there's no way to create an element that when created 282 00:13:22,640 --> 00:13:24,180 and when you set the inner HTML, 283 00:13:24,840 --> 00:13:26,260 it would be very complex. 284 00:13:26,320 --> 00:13:27,980 For example, Svelte native, 285 00:13:28,220 --> 00:13:30,740 which is another way to build a native application 286 00:13:30,760 --> 00:13:35,260 with Svelte, it is monkey patching document.createelement, basically. 287 00:13:35,700 --> 00:13:35,820 Right. 288 00:13:36,440 --> 00:13:38,300 But that doesn't work anymore in Svelte 5. 289 00:13:39,220 --> 00:13:41,880 So the first step that we did, so first thing first, 290 00:13:43,160 --> 00:13:47,200 I should say why the first thing that we did was because at MindMatter, 291 00:13:47,560 --> 00:13:50,360 we love to give back to open source in general. 292 00:13:51,220 --> 00:13:54,920 And we especially do that for technologies that we use. 293 00:13:55,240 --> 00:13:59,900 So with Svelte, we use Svelte, we want to give back to the Svelte ecosystem. 294 00:14:01,220 --> 00:14:07,260 And so when we stopped to think and we said, okay, what can we do for this Velt ecosystem? 295 00:14:08,720 --> 00:14:12,800 We started to think about the things that we were talking with our clients, for example. 296 00:14:12,940 --> 00:14:19,160 And some of our clients was actually saying, okay, but I want to use Velt, but what if I need an app, for example? 297 00:14:20,240 --> 00:14:24,360 And so there was this issue laying around. 298 00:14:25,060 --> 00:14:28,260 And so a few months ago at this point, 299 00:14:28,820 --> 00:14:30,560 there was a new framework that showed up, 300 00:14:30,620 --> 00:14:31,720 which is called Lynx.js. 301 00:14:33,120 --> 00:14:35,120 And Lynx.js is basically the, 302 00:14:35,720 --> 00:14:37,320 I think it's from ByteDance, 303 00:14:37,320 --> 00:14:39,220 which is the company behind TikTok. 304 00:14:40,140 --> 00:14:43,640 And they market it as like the alternative 305 00:14:43,900 --> 00:14:46,460 to React Native, but framework agnostic. 306 00:14:46,720 --> 00:14:49,580 So obviously everybody got really excited about this 307 00:14:50,140 --> 00:14:52,720 just to realize that for Svelte, 308 00:14:52,720 --> 00:14:54,080 we couldn't actually use it 309 00:14:53,940 --> 00:14:58,400 because it kind of requires a custom renderer API of some sort. 310 00:14:59,340 --> 00:15:00,620 And so when we were talking, 311 00:15:00,800 --> 00:15:02,620 what can we do for the Svelte ecosystem? 312 00:15:02,840 --> 00:15:05,780 We actually stumbled across this opportunity 313 00:15:05,960 --> 00:15:07,080 and we say, okay, let's do it. 314 00:15:07,300 --> 00:15:10,540 And so for a couple of months, I think three months actually, 315 00:15:11,680 --> 00:15:14,220 I actually worked full-time on Svelte, 316 00:15:14,730 --> 00:15:15,640 on Svelte custom renderer. 317 00:15:15,640 --> 00:15:15,860 Oh, nice. 318 00:15:17,040 --> 00:15:19,240 I was able to work with it 319 00:15:19,260 --> 00:15:25,060 and I was actually able to get a pretty good POC of that. 320 00:15:25,060 --> 00:15:29,300 So we spent a lot of the time also talking with the other maintainers 321 00:15:30,260 --> 00:15:34,160 to figuring out the actual 322 00:15:34,160 --> 00:15:36,920 API for it. 323 00:15:37,920 --> 00:15:41,860 So in terms of, maybe I'm jumping ahead here, 324 00:15:42,160 --> 00:15:46,660 but the problem is we have to separate the renderer 325 00:15:49,200 --> 00:15:49,680 from 326 00:15:49,680 --> 00:15:50,520 Svelte's diffing 327 00:15:50,520 --> 00:15:52,980 functionality, 328 00:15:53,280 --> 00:15:53,360 right? 329 00:15:54,020 --> 00:15:58,820 So then does that mean that instead of using... 330 00:15:58,820 --> 00:16:02,000 So I don't remember who I was talking to about this, 331 00:16:02,140 --> 00:16:03,260 but there's... 332 00:16:05,680 --> 00:16:06,720 Oh, it was Elliot. 333 00:16:07,340 --> 00:16:10,180 So we did a stream, I think last week, 334 00:16:10,360 --> 00:16:11,920 about the Hydrate 335 00:16:11,920 --> 00:16:13,100 functionality. 336 00:16:13,960 --> 00:16:16,540 And he mentioned, I think, if I remember correctly, 337 00:16:16,640 --> 00:16:18,840 that Svelte used to be just 338 00:16:18,840 --> 00:16:21,660 a string thing, but... 339 00:16:21,660 --> 00:16:24,520 He was talking about the server side, though, 340 00:16:24,670 --> 00:16:25,360 which is a bit different. 341 00:16:25,600 --> 00:16:26,200 Right, right. 342 00:16:26,510 --> 00:16:26,640 Oh, 343 00:16:26,650 --> 00:16:27,160 I see, I see. 344 00:16:27,160 --> 00:16:27,620 On the server, 345 00:16:27,820 --> 00:16:29,520 Svelte basically do that. 346 00:16:29,710 --> 00:16:29,820 Like, 347 00:16:29,920 --> 00:16:30,800 it's all your 348 00:16:30,800 --> 00:16:31,260 component. 349 00:16:32,980 --> 00:16:34,440 Before the async stuff, 350 00:16:34,490 --> 00:16:35,140 it was just 351 00:16:35,140 --> 00:16:37,040 literally concatenating a big string 352 00:16:37,190 --> 00:16:37,960 and returning this. 353 00:16:38,680 --> 00:16:41,500 But I was going to say, 354 00:16:42,800 --> 00:16:44,640 now there's an AST involved, right? 355 00:16:45,400 --> 00:16:48,000 I think, no, probably, 356 00:16:48,560 --> 00:16:51,660 like, there's always an AST involved with the Svelte compiler, 357 00:16:51,790 --> 00:16:52,820 because, like, it's 358 00:16:52,820 --> 00:16:55,200 an AST and then converted into 359 00:16:55,200 --> 00:16:55,600 JavaScript. 360 00:16:56,020 --> 00:16:59,800 But the server side, I don't think it's using the AST. 361 00:16:59,800 --> 00:17:03,720 I think the only thing that Elliot had to do to make Async SSR work 362 00:17:04,520 --> 00:17:08,880 is that it needs to be a bit more involved than just concatenating strings, 363 00:17:09,140 --> 00:17:10,060 because there's 364 00:17:10,060 --> 00:17:10,500 something 365 00:17:10,500 --> 00:17:14,220 that you are waiting for and something that you are going through. 366 00:17:14,540 --> 00:17:18,220 And then obviously you don't want to await for every single thing. 367 00:17:18,339 --> 00:17:21,839 You only await, like if you have two components that are parallel, 368 00:17:22,050 --> 00:17:23,920 you want to start the patch at the same time. 369 00:17:24,480 --> 00:17:28,380 So that's why it's a bit more involved than just a string concatenation on the server. 370 00:17:30,040 --> 00:17:33,220 But yeah, like it's obviously like right now on the server side, 371 00:17:33,400 --> 00:17:34,180 it's a bit more complex. 372 00:17:35,380 --> 00:17:38,480 On the client side, right now, like by default, 373 00:17:38,860 --> 00:17:43,100 Svelte will still use the template tricks that I was talking, 374 00:17:43,340 --> 00:17:45,540 because that's just faster and much more convenient. 375 00:17:47,120 --> 00:17:49,640 But one of the first things that we did once we, okay, 376 00:17:50,220 --> 00:17:52,920 we settled on some sort of API. 377 00:17:53,600 --> 00:17:58,240 So we talked a bit with Reach and with the other 378 00:17:59,320 --> 00:18:01,840 to say, okay, what kind of API do we want 379 00:18:01,940 --> 00:18:03,180 for the custom renderer API? 380 00:18:03,860 --> 00:18:05,900 Once we settled on a sort of API, 381 00:18:06,740 --> 00:18:08,940 we said, okay, there is one problem now 382 00:18:09,120 --> 00:18:11,620 that all our templates are literally just string, 383 00:18:11,840 --> 00:18:13,460 like the static part of the template, 384 00:18:14,000 --> 00:18:15,840 it's a string that we pass to template. 385 00:18:16,080 --> 00:18:18,660 We can't do that because we need to basically, 386 00:18:20,140 --> 00:18:22,760 I don't want to say to invoke document.h, 387 00:18:23,020 --> 00:18:23,700 create element, 388 00:18:24,080 --> 00:18:27,520 but we need a point where we can create an element 389 00:18:27,780 --> 00:18:30,280 and then set the text and then stuff like that. 390 00:18:30,530 --> 00:18:34,900 And so what we did is that the first thing 391 00:18:35,340 --> 00:18:38,000 that also fixed the bug about the CSP 392 00:18:38,000 --> 00:18:42,860 was the compiler option that I contributed to the Svelte compiler. 393 00:18:43,120 --> 00:18:45,060 And because basically right now, 394 00:18:45,380 --> 00:18:48,280 what you can do is that you can pass a compiler option. 395 00:18:49,000 --> 00:18:51,480 And instead of creating this long string 396 00:18:51,860 --> 00:18:53,320 that then is passed into the template, 397 00:18:54,020 --> 00:18:56,480 it's actually creating an object, 398 00:18:57,220 --> 00:19:00,480 which is kind of similar to the React object, 399 00:19:00,780 --> 00:19:03,280 but we don't have a virtual DOM anyway, don't worry. 400 00:19:04,620 --> 00:19:06,780 But basically, it's creating this structure 401 00:19:07,040 --> 00:19:10,220 that then under the hood actually creates a bunch of, 402 00:19:10,230 --> 00:19:12,560 like does a bunch of document.createElement, 403 00:19:13,240 --> 00:19:14,820 document.setText, 404 00:19:15,020 --> 00:19:15,440 document. 405 00:19:16,720 --> 00:19:17,280 And stuff like that. 406 00:19:17,390 --> 00:19:20,520 So it's doing all of this programmatically. 407 00:19:21,160 --> 00:19:24,220 And this means that for the CSP problem, 408 00:19:24,860 --> 00:19:26,600 you are not accessing your HTML anymore. 409 00:19:27,200 --> 00:19:28,660 For the custom renderer problem, 410 00:19:29,360 --> 00:19:33,080 we now have a place where we can put our call 411 00:19:33,490 --> 00:19:34,260 into your code, 412 00:19:34,540 --> 00:19:34,660 because 413 00:19:34,660 --> 00:19:35,800 that's kind 414 00:19:35,800 --> 00:19:36,680 of an issue, right? 415 00:19:36,780 --> 00:19:47,000 Like the custom renderer is something that you, the user, would have to define and you would have to provide like your way to render as well. 416 00:19:47,040 --> 00:19:47,240 Yeah. 417 00:19:48,240 --> 00:19:58,260 And to do so, it means that we need a place where the framework can call your custom renderer so that it creates your element, basically. 418 00:19:59,080 --> 00:19:59,260 Yeah. 419 00:19:59,280 --> 00:20:07,020 You mentioned, I don't know, maybe you didn't mention it while we were recording, but you made a proof of concept, right? 420 00:20:07,080 --> 00:20:07,540 So 421 00:20:07,540 --> 00:20:15,100 after we basically merged this PR, I started actually working on the implementation itself. 422 00:20:16,300 --> 00:20:23,160 And so what we ended up with is something that basically you as a user can pass a compiler option. 423 00:20:23,760 --> 00:20:26,040 Obviously, like the API can still change until... 424 00:20:26,060 --> 00:20:26,400 Of course. 425 00:20:26,820 --> 00:20:28,180 If we actually get to... 426 00:20:29,300 --> 00:20:30,960 Just put it in experimental. 427 00:20:31,460 --> 00:20:31,760 Yeah, yeah. 428 00:20:31,760 --> 00:20:31,960 That's fine. 429 00:20:34,860 --> 00:20:36,220 The API can actually change, obviously. 430 00:20:36,400 --> 00:20:42,700 But the idea is that you will define a module, and from that module, you will export your renderer. 431 00:20:43,400 --> 00:20:52,000 And so once you export your renderer, you define your renderer by defining an object that contains a bunch of operations. 432 00:20:52,240 --> 00:21:02,000 So you will need to define how to create a fragment, a document fragment in your system, how to create an element in your system, 433 00:21:02,620 --> 00:21:03,820 how to 434 00:21:03,820 --> 00:21:13,740 set the text, how to set an attribute, how to add a child, how to get the parent, how to get the next sibling and stuff like that. 435 00:21:13,800 --> 00:21:14,600 And 436 00:21:14,600 --> 00:21:16,920 once we have that under the hood, 437 00:21:17,400 --> 00:21:20,980 we just basically invoke your function 438 00:21:21,300 --> 00:21:23,180 instead of doing document.createElement. 439 00:21:23,480 --> 00:21:24,580 So basically 440 00:21:24,580 --> 00:21:26,380 when you define a custom renderer 441 00:21:26,480 --> 00:21:29,120 and the definition will probably be something 442 00:21:29,320 --> 00:21:32,500 like you just define the module where we can import it. 443 00:21:32,820 --> 00:21:34,660 And so when you do that, 444 00:21:36,420 --> 00:21:39,300 so that can be a module in your application. 445 00:21:39,820 --> 00:21:45,200 So like technical, you could even like define your own custom renderer in line. 446 00:21:46,080 --> 00:21:55,380 But more often than not, very likely what you would do is just, I don't know, install a custom renderer from a package and then you literally have the package as the custom renderer. 447 00:21:55,800 --> 00:22:06,700 And so when you do that, by default, Svelte will basically change the runtime because there's also another issue with Svelte runtime, which is the Svelte runtime. 448 00:22:06,760 --> 00:22:10,320 obviously it's hyper-optimized for the DOM. 449 00:22:10,400 --> 00:22:12,460 So there are a lot of places 450 00:22:12,840 --> 00:22:14,220 where we actually use some trick 451 00:22:14,480 --> 00:22:18,080 because the DOM is hella weird. 452 00:22:18,260 --> 00:22:21,940 So it is silly, but for example, 453 00:22:22,580 --> 00:22:25,120 if you want to completely remove every element 454 00:22:25,620 --> 00:22:27,360 from an element, right? 455 00:22:28,640 --> 00:22:31,840 You can do document.remove, document.remove, 456 00:22:32,000 --> 00:22:32,180 document 457 00:22:32,180 --> 00:22:32,820 .remove, 458 00:22:32,920 --> 00:22:33,720 document.remove. 459 00:22:34,080 --> 00:22:35,160 Sounds like a lot of work. 460 00:22:35,340 --> 00:22:38,080 document.textcontent is equal to empty string 461 00:22:38,530 --> 00:22:39,080 and that's it. 462 00:22:39,470 --> 00:22:39,600 So 463 00:22:39,600 --> 00:22:40,680 if 464 00:22:40,680 --> 00:22:41,760 you do something like this, 465 00:22:41,930 --> 00:22:42,980 it would be much faster, 466 00:22:43,310 --> 00:22:44,740 like even computationally. 467 00:22:46,120 --> 00:22:49,340 And so the normal runtime of Velt, 468 00:22:49,820 --> 00:22:51,680 I think it's only fair that it stays 469 00:22:52,240 --> 00:22:52,940 as performant as 470 00:22:52,940 --> 00:22:53,760 it is. 471 00:22:54,740 --> 00:22:56,280 But this means that there are some, 472 00:22:57,460 --> 00:22:59,260 like some other stuff that basically 473 00:23:00,050 --> 00:23:01,940 cannot happen outside of the DOM. 474 00:23:02,260 --> 00:23:02,320 Right. 475 00:23:02,600 --> 00:23:05,460 And so something that we settled pretty early on 476 00:23:05,640 --> 00:23:07,960 was that we will basically rebuild 477 00:23:08,180 --> 00:23:09,960 a small version of the runtime 478 00:23:10,320 --> 00:23:12,380 because there's also another interesting bit 479 00:23:12,460 --> 00:23:15,600 is that if you are using a custom renderer, 480 00:23:15,940 --> 00:23:17,340 you probably don't need hydration 481 00:23:17,960 --> 00:23:18,100 because 482 00:23:18,100 --> 00:23:19,020 with 483 00:23:19,020 --> 00:23:20,100 a custom renderer, 484 00:23:20,160 --> 00:23:22,640 there's no concept of server-side rendering 485 00:23:23,140 --> 00:23:28,440 for the terminal or for a native stuff. 486 00:23:29,120 --> 00:23:30,820 And so since you don't need hydration, 487 00:23:31,100 --> 00:23:34,000 we can basically like wipe off all the hydration code 488 00:23:34,400 --> 00:23:36,180 from the custom runtime. 489 00:23:37,360 --> 00:23:39,660 And so make stuff 490 00:23:39,660 --> 00:23:40,440 a little lighter 491 00:23:40,640 --> 00:23:42,640 and easier to maintain on the other side. 492 00:23:42,640 --> 00:23:46,620 And so the work that I started doing it is basically, 493 00:23:46,690 --> 00:23:49,780 okay, let me start to rewrite the runtime 494 00:23:50,460 --> 00:23:52,200 so that it's entangled, 495 00:23:52,380 --> 00:23:54,300 like it's completely detached from the DOM. 496 00:23:57,100 --> 00:23:58,640 And we can actually start using it. 497 00:23:58,720 --> 00:24:01,700 And so I wrote a couple of, 498 00:24:02,860 --> 00:24:04,140 like basically I rewrote, 499 00:24:04,650 --> 00:24:05,660 I think the each block, 500 00:24:05,900 --> 00:24:06,480 the if block, 501 00:24:06,800 --> 00:24:07,600 the key block, 502 00:24:07,860 --> 00:24:08,800 all these blocks. 503 00:24:09,060 --> 00:24:10,040 I've rewrote it already. 504 00:24:10,600 --> 00:24:13,280 I also rewrote part of the element runtime, 505 00:24:13,550 --> 00:24:13,680 basically. 506 00:24:13,980 --> 00:24:15,700 So the things that actually creates the element. 507 00:24:17,120 --> 00:24:18,720 And once I've done that, 508 00:24:19,050 --> 00:24:20,360 I was actually able to, 509 00:24:21,060 --> 00:24:23,140 like I started the POC 510 00:24:23,170 --> 00:24:27,120 and I actually got a links application working. 511 00:24:27,740 --> 00:24:30,200 It was a bit more involved on the links side. 512 00:24:31,100 --> 00:24:32,880 Because in links, you basically have this, 513 00:24:33,680 --> 00:24:35,480 they are called the element PPI, 514 00:24:36,580 --> 00:24:39,860 that you can basically call to create a links element. 515 00:24:40,300 --> 00:24:42,940 And it's kind of similar to the DOM. 516 00:24:43,220 --> 00:24:46,480 You can literally do underscore, underscore, create element, 517 00:24:47,010 --> 00:24:47,640 and you pass. 518 00:24:48,300 --> 00:24:48,660 You have 519 00:24:48,660 --> 00:24:50,680 a list of elements that you can create in links. 520 00:24:51,060 --> 00:24:52,120 So you can create text. 521 00:24:52,370 --> 00:24:55,900 You can create, I think, view. 522 00:24:56,260 --> 00:24:57,300 Text and view are the ones 523 00:24:57,300 --> 00:24:57,920 that 524 00:24:57,920 --> 00:25:00,400 are very useful. 525 00:25:00,660 --> 00:25:02,880 And then it will create an element in links. 526 00:25:02,980 --> 00:25:05,500 And so I've built a small to-do app in links, 527 00:25:05,600 --> 00:25:06,560 and it actually worked. 528 00:25:09,600 --> 00:25:11,860 After that, so unfortunately, 529 00:25:12,820 --> 00:25:15,020 after three months of working on it, 530 00:25:16,320 --> 00:25:18,800 we kind of ran out of funds for doing it. 531 00:25:18,900 --> 00:25:21,420 We had a set budget to do it. 532 00:25:22,500 --> 00:25:24,100 So actually, right now, 533 00:25:24,360 --> 00:25:26,320 we are looking for funding for that. 534 00:25:26,640 --> 00:25:28,680 So if you are interested, by the way, 535 00:25:28,780 --> 00:25:31,120 like if you or any of your companies 536 00:25:31,340 --> 00:25:33,560 are interested in building a native app 537 00:25:33,800 --> 00:25:35,920 or even just like, I don't know, for example, 538 00:25:36,080 --> 00:25:37,460 we have been talking with people 539 00:25:37,660 --> 00:25:40,620 that maybe they have a custom WebGL runtime 540 00:25:40,810 --> 00:25:43,200 and they would love to use Svelte as a templating language. 541 00:25:43,940 --> 00:25:44,660 And so like they are 542 00:25:44,660 --> 00:25:45,620 interested in, 543 00:25:45,880 --> 00:25:47,640 we actually got a bit of, 544 00:25:48,620 --> 00:25:50,420 we got our first sponsor recently. 545 00:25:50,810 --> 00:25:52,780 So, but if you are interested, 546 00:25:53,000 --> 00:25:56,140 you can go to sveltecustomrenderers.com to learn more. 547 00:25:56,640 --> 00:25:59,540 And you can contact us and we can 548 00:25:59,540 --> 00:26:01,720 bring this to the finish line together. 549 00:26:02,100 --> 00:26:03,320 How far are you? 550 00:26:04,140 --> 00:26:06,460 Do you need three more months or a year? 551 00:26:06,920 --> 00:26:07,260 We 552 00:26:07,260 --> 00:26:10,400 kind of estimated it around four or five months. 553 00:26:10,660 --> 00:26:17,500 So it's not super far because I think already the POC was enough to be. 554 00:26:18,240 --> 00:26:20,899 But obviously there is a lot more to do 555 00:26:22,340 --> 00:26:23,580 because first thing first, 556 00:26:24,720 --> 00:26:27,940 I need to bring the branch up to date with today's belt. 557 00:26:28,160 --> 00:26:30,120 That will be a challenge a bit 558 00:26:30,300 --> 00:26:32,900 because obviously there is the async stuff. 559 00:26:33,800 --> 00:26:36,180 There's also a new system to manage branches. 560 00:26:36,880 --> 00:26:39,040 There's also a new system to manage each blocks 561 00:26:39,090 --> 00:26:39,720 and stuff like that. 562 00:26:39,820 --> 00:26:45,020 So a lot of changes since I last worked on this. 563 00:26:46,230 --> 00:26:48,840 So I need to bring it up to date. 564 00:26:49,620 --> 00:26:53,020 There is also a bit more, which is right now, 565 00:26:54,150 --> 00:26:55,680 like the client runtime, 566 00:26:56,050 --> 00:26:58,040 which is what we are really interested in. 567 00:26:58,040 --> 00:27:01,540 So like the reason why you might want to use like Svelte 568 00:27:01,550 --> 00:27:03,080 to build a terminal application 569 00:27:03,210 --> 00:27:06,400 is because you want the Svelte signal runtime 570 00:27:06,720 --> 00:27:08,940 to power the changes inside, 571 00:27:09,260 --> 00:27:11,180 behind your terminal. 572 00:27:12,200 --> 00:27:18,320 Now the client runtime is kind of baked in like physically, 573 00:27:18,580 --> 00:27:20,840 like the files that contains the client's runtime 574 00:27:21,540 --> 00:27:24,540 are all inside the client folder, basically, 575 00:27:25,420 --> 00:27:29,820 which means that there is a bunch of circular imports 576 00:27:30,500 --> 00:27:34,240 and some of these circular inputs go back to some module 577 00:27:34,600 --> 00:27:36,240 that access the document 578 00:27:36,240 --> 00:27:38,200 .mediaquery, 579 00:27:38,200 --> 00:27:38,700 for example, 580 00:27:39,040 --> 00:27:39,740 at the top level. 581 00:27:39,800 --> 00:27:46,800 So when I tried to build the links custom renderer, 582 00:27:47,220 --> 00:27:51,560 I basically had to like surgically remove every import that was leading 583 00:27:51,560 --> 00:27:52,080 back to 584 00:27:52,080 --> 00:27:52,360 that. 585 00:27:52,900 --> 00:27:54,940 But obviously that will not be maintainable. 586 00:27:55,000 --> 00:28:09,640 So like some other work that I will need to do once we were able to work a bit more on this is that I need to take the runtime and move it in its own shared module so that it's detached from any document API. 587 00:28:10,420 --> 00:28:10,980 That would 588 00:28:10,980 --> 00:28:11,400 work too. 589 00:28:11,420 --> 00:28:14,880 I was going to say you need some kind of alias system or something that would 590 00:28:14,880 --> 00:28:15,960 change the 591 00:28:15,960 --> 00:28:16,460 imports. 592 00:28:17,120 --> 00:28:19,780 Yeah, but I mean, it's much better to like, 593 00:28:20,120 --> 00:28:23,900 even for future, like for free to prove the code base, 594 00:28:24,120 --> 00:28:27,180 like we want the runtime to be completely 595 00:28:27,420 --> 00:28:28,400 like in its own module 596 00:28:28,720 --> 00:28:31,360 so that we can actually access it from both runtime. 597 00:28:32,200 --> 00:28:32,960 So I'm wondering, 598 00:28:33,040 --> 00:28:35,100 what does the authoring experience look like? 599 00:28:35,200 --> 00:28:37,500 Let's say you build this custom vendor with links 600 00:28:37,560 --> 00:28:38,980 and you have like iOS and Android. 601 00:28:40,440 --> 00:28:42,060 I mean, in React DOM and in Svelte, 602 00:28:42,060 --> 00:28:45,880 you use div and P and whatever HTML elements. 603 00:28:46,480 --> 00:28:48,680 in React Native, you use view and text. 604 00:28:49,100 --> 00:28:51,560 What would you use in Svelte links? 605 00:28:52,360 --> 00:28:54,520 This, I think, is one of the nicest parts 606 00:28:54,520 --> 00:28:55,940 of the custom renderer API, 607 00:28:56,160 --> 00:28:59,080 is that you kind of get to choose what you want to do. 608 00:28:59,350 --> 00:29:03,240 So, like, the custom renderer that I've built for links, 609 00:29:04,440 --> 00:29:07,020 I actually use the same API that I have 610 00:29:08,180 --> 00:29:10,560 for the links react, react links. 611 00:29:11,480 --> 00:29:11,560 And 612 00:29:11,560 --> 00:29:15,520 so, in React links and in my custom renderer, 613 00:29:15,880 --> 00:29:18,620 you would need to do view, text, and stuff like that. 614 00:29:18,760 --> 00:29:21,420 So it's kind of similar to React Native, 615 00:29:22,320 --> 00:29:23,800 except that those are actually elements. 616 00:29:24,100 --> 00:29:26,480 In React Native, you need to import the component 617 00:29:27,160 --> 00:29:28,980 and use the component and stuff like that, 618 00:29:29,280 --> 00:29:32,600 while with links, with SvelteLinks, 619 00:29:32,740 --> 00:29:34,580 my SvelteLinks thing, 620 00:29:36,280 --> 00:29:40,440 I actually did it so that you can just use, 621 00:29:40,560 --> 00:29:45,580 just like you would do div, you would do view. 622 00:29:45,920 --> 00:29:46,500 and stuff like that. 623 00:29:46,660 --> 00:29:50,920 How does the IDE and or the types handle that at all? 624 00:29:51,540 --> 00:29:56,800 I mean, in terms of like the IDE sees it as just 625 00:29:56,800 --> 00:29:57,660 like... 626 00:29:57,660 --> 00:29:59,300 Just a named div, right? 627 00:29:59,860 --> 00:30:00,380 Yeah, it's just 628 00:30:00,380 --> 00:30:00,940 like... 629 00:30:01,000 --> 00:30:01,400 I see. 630 00:30:01,460 --> 00:30:01,980 It's technically 631 00:30:01,980 --> 00:30:03,020 a custom element 632 00:30:03,020 --> 00:30:03,680 because... 633 00:30:03,680 --> 00:30:04,420 Oh 634 00:30:04,420 --> 00:30:04,920 yeah, of course. 635 00:30:05,180 --> 00:30:07,800 Everything, like if you're in the DOM, 636 00:30:08,060 --> 00:30:10,780 if you do slash view, it's a custom element. 637 00:30:11,080 --> 00:30:11,180 It's 638 00:30:11,180 --> 00:30:11,660 not a web 639 00:30:11,660 --> 00:30:13,400 component, but it is a custom element. 640 00:30:14,680 --> 00:30:16,680 So that's how you see it. 641 00:30:17,280 --> 00:30:21,740 Obviously, we could also think about some more deep integration. 642 00:30:22,520 --> 00:30:25,720 I think probably, I actually haven't tried this yet, 643 00:30:26,180 --> 00:30:28,340 but I think that you can actually do, 644 00:30:29,340 --> 00:30:33,800 we can probably do interface merging with a.d.ts. 645 00:30:33,880 --> 00:30:34,220 So you 646 00:30:34,220 --> 00:30:36,360 can just reference a.d.ts 647 00:30:37,000 --> 00:30:42,440 that then augment the types that Svelte already provides 648 00:30:42,440 --> 00:30:44,120 for the 649 00:30:44,120 --> 00:30:44,380 DOM. 650 00:30:44,600 --> 00:30:47,060 and so you should be able to also get some auto-completion 651 00:30:47,090 --> 00:30:47,680 if you want. 652 00:30:48,680 --> 00:30:50,940 Obviously, that will be related 653 00:30:51,810 --> 00:30:53,900 to the custom renderer creator. 654 00:30:54,300 --> 00:30:55,060 That's the, like, 655 00:30:55,540 --> 00:30:57,860 but the nice part is that you can actually come up 656 00:30:57,940 --> 00:31:00,260 with your own way to name stuff. 657 00:31:00,660 --> 00:31:01,280 That's the nice thing. 658 00:31:01,860 --> 00:31:03,840 Like, technically, and for example, 659 00:31:05,000 --> 00:31:06,140 in the view integrate, like, 660 00:31:06,580 --> 00:31:07,640 when links came out, 661 00:31:07,990 --> 00:31:11,000 a lot of frameworks tried to build an integration with it 662 00:31:11,220 --> 00:31:14,380 and there are some PR that I actually use as a reference 663 00:31:14,400 --> 00:31:16,540 for solid and view, for example. 664 00:31:17,140 --> 00:31:18,300 And for example, in view, 665 00:31:19,200 --> 00:31:23,260 what they did is that they related some element 666 00:31:23,700 --> 00:31:27,160 in the HTML world into some links element. 667 00:31:27,280 --> 00:31:30,240 So like what you could do is that if you see div, 668 00:31:30,520 --> 00:31:32,460 you assume that div is a view. 669 00:31:32,840 --> 00:31:36,520 If you see text, like if you see span, 670 00:31:36,560 --> 00:31:38,980 you assume that span is a text. 671 00:31:39,500 --> 00:31:41,220 And again, the nice thing is that 672 00:31:41,620 --> 00:31:44,860 since you are the one responsible to create the element, 673 00:31:45,190 --> 00:31:46,820 you can do pretty much whatever you want. 674 00:31:46,950 --> 00:31:47,100 So 675 00:31:47,100 --> 00:31:48,400 you can come 676 00:31:48,400 --> 00:31:49,580 up with your own symbols. 677 00:31:50,180 --> 00:31:51,800 In the meantime, I can already tell you that 678 00:31:52,280 --> 00:31:56,000 obviously this will probably depend on the recipient 679 00:31:56,250 --> 00:31:57,340 of the custom renderer. 680 00:31:57,340 --> 00:32:02,100 So for example, links can actually render your thing 681 00:32:02,760 --> 00:32:05,460 to Android, iOS. 682 00:32:06,040 --> 00:32:06,460 Yeah, yeah, yeah. 683 00:32:06,900 --> 00:32:10,000 So basically writing to one, 684 00:32:10,380 --> 00:32:12,560 writing one template is very nice, right? 685 00:32:12,980 --> 00:32:15,840 Because you get to write once 686 00:32:16,040 --> 00:32:17,480 instead of three times, right? 687 00:32:18,460 --> 00:32:21,020 Or two times for links and HTML, right? 688 00:32:22,000 --> 00:32:24,020 Is there some thoughts about like 689 00:32:24,440 --> 00:32:27,000 letting the user write multiple things 690 00:32:27,060 --> 00:32:27,660 at the same time? 691 00:32:27,720 --> 00:32:29,640 So let's say you have a project 692 00:32:29,880 --> 00:32:33,720 and you want to create both a DOM target, 693 00:32:34,180 --> 00:32:34,660 if you will, 694 00:32:35,120 --> 00:32:36,240 and then also a links target. 695 00:32:36,980 --> 00:32:37,620 so a build 696 00:32:37,620 --> 00:32:38,100 but you kind of want 697 00:32:39,200 --> 00:32:39,960 yeah yeah yeah 698 00:32:40,100 --> 00:32:40,820 and you want to share 699 00:32:41,080 --> 00:32:41,200 maybe 700 00:32:41,920 --> 00:32:43,020 the reactivity of it 701 00:32:43,440 --> 00:32:43,740 but 702 00:32:44,680 --> 00:32:45,540 the templating 703 00:32:45,760 --> 00:32:46,100 you might 704 00:32:46,360 --> 00:32:46,720 so 705 00:32:47,100 --> 00:32:47,880 I think 706 00:32:48,380 --> 00:32:48,480 that 707 00:32:48,760 --> 00:32:48,920 I 708 00:32:49,580 --> 00:32:50,600 I would need to 709 00:32:50,720 --> 00:32:51,240 think a bit 710 00:32:51,320 --> 00:32:52,340 about this 711 00:32:52,620 --> 00:32:52,760 but 712 00:32:53,180 --> 00:32:54,140 I think 713 00:32:54,260 --> 00:32:55,120 depending on how 714 00:32:55,180 --> 00:32:56,120 you structure it 715 00:32:57,120 --> 00:32:57,660 it can 716 00:32:57,660 --> 00:32:58,020 probably 717 00:32:58,540 --> 00:32:58,660 work 718 00:32:59,020 --> 00:32:59,980 in both ways 719 00:33:00,480 --> 00:33:00,640 so 720 00:33:01,800 --> 00:33:02,480 I guess 721 00:33:02,540 --> 00:33:03,480 the problem is really 722 00:33:03,540 --> 00:33:04,500 that it depends on 723 00:33:04,580 --> 00:33:05,400 the kind of custom 724 00:33:05,800 --> 00:33:06,300 renderer that you 725 00:33:06,320 --> 00:33:12,160 build like at that point is more on your side than on the side see there 726 00:33:12,160 --> 00:33:13,300 being a compiler 727 00:33:13,840 --> 00:33:18,640 with compiler options that you can feed your options to and then it compiling it just like 728 00:33:18,640 --> 00:33:21,040 we do with spell like we have compiler options 729 00:33:21,040 --> 00:33:22,000 we 730 00:33:22,000 --> 00:33:24,780 can build the package you could do this with that 731 00:33:24,910 --> 00:33:29,040 too it could build a package for the dom and build a package for native 732 00:33:29,040 --> 00:33:32,620 yeah yeah so what i'm asking 733 00:33:32,640 --> 00:33:39,780 is so like I know there's a project called LiveView Native in like the Elixir world and 734 00:33:40,660 --> 00:33:45,680 they went the route of so Elixir is a framework built on 735 00:33:45,680 --> 00:33:47,300 sorry 736 00:33:47,300 --> 00:33:49,840 Phoenix LiveView is a framework 737 00:33:49,880 --> 00:33:57,400 built on Elixir and LiveView Native is built on top of Phoenix and or rather LiveView and they 738 00:33:57,300 --> 00:34:05,860 let you write templates depending on what you want to target and then it kind of reuses the 739 00:34:06,020 --> 00:34:11,360 same logic it's it's not really i i suppose it could be a custom renderer in a sense 740 00:34:12,970 --> 00:34:19,919 but i i'm kind of asking like i i want to bring multiple templates into the same space kind of 741 00:34:19,919 --> 00:34:26,740 and reuse the script tag for example like obviously like you can put you can extract 742 00:34:26,760 --> 00:34:31,379 your logic into like state classes and stuff and put them in a separate module and then import them 743 00:34:31,520 --> 00:34:33,120 but I don't know. 744 00:34:33,610 --> 00:34:38,620 Yeah okay so we actually so I was talking with Grisha which is the creator of 745 00:34:38,720 --> 00:34:41,399 Threlt which obviously like for example 746 00:34:41,399 --> 00:34:43,679 would be nice with a custom renderer there. 747 00:34:44,100 --> 00:34:44,679 Yeah react 748 00:34:45,540 --> 00:34:52,179 react 3-fiber which is what like is the 3.js version of react is actually using a react 749 00:34:52,200 --> 00:34:53,320 renderer under the hood. 750 00:34:54,290 --> 00:34:57,260 And so I was talking with Grisha 751 00:34:57,460 --> 00:34:59,280 because obviously I asked him for feedback 752 00:34:59,580 --> 00:35:02,380 on this feature because it could be interesting for him. 753 00:35:03,679 --> 00:35:06,200 And he actually says something like that. 754 00:35:06,200 --> 00:35:07,440 So like right now, basically, 755 00:35:08,340 --> 00:35:14,000 you have to kind of compile one custom renderer, 756 00:35:14,100 --> 00:35:16,740 like one component, at least one component. 757 00:35:18,320 --> 00:35:20,260 It needs to know that he wants, 758 00:35:20,900 --> 00:35:23,280 that you want to compile with custom renderers. 759 00:35:24,100 --> 00:35:26,760 You cannot do it at runtime, as I was saying, 760 00:35:27,220 --> 00:35:27,320 because 761 00:35:27,320 --> 00:35:27,920 the condition 762 00:35:27,920 --> 00:35:29,260 is literally different 763 00:35:29,700 --> 00:35:29,780 from 764 00:35:29,780 --> 00:35:30,580 one 765 00:35:30,580 --> 00:35:31,080 to the other, 766 00:35:31,200 --> 00:35:33,460 because it needs to import the different runtime, 767 00:35:33,740 --> 00:35:36,860 it needs to import your custom renderer, 768 00:35:36,860 --> 00:35:39,180 it needs to store your custom renderer somewhere, 769 00:35:39,460 --> 00:35:41,400 because it needs to reuse that 770 00:35:41,620 --> 00:35:44,160 when you trigger an effect, for example. 771 00:35:44,380 --> 00:35:44,440 So 772 00:35:44,440 --> 00:35:45,320 before 773 00:35:45,320 --> 00:35:46,420 triggering an effect, 774 00:35:46,480 --> 00:35:48,480 we need to reset the custom renderer 775 00:35:48,540 --> 00:35:49,560 and then adding it again. 776 00:35:50,420 --> 00:35:57,040 So because of this, it means that you can't really have 777 00:35:57,200 --> 00:36:01,520 in the same component two different custom renderers, right? 778 00:36:02,339 --> 00:36:05,460 So the solution would be to move that code 779 00:36:05,640 --> 00:36:07,020 into a separate component and 780 00:36:07,020 --> 00:36:08,240 run that component 781 00:36:08,820 --> 00:36:11,120 with a different custom renderer that could work. 782 00:36:12,040 --> 00:36:14,140 Obviously it depends on the kind of renderer 783 00:36:14,200 --> 00:36:15,140 that we are talking about. 784 00:36:15,250 --> 00:36:15,840 Like if the 785 00:36:15,840 --> 00:36:16,640 final 786 00:36:16,640 --> 00:36:18,360 target is still the DOM, 787 00:36:18,520 --> 00:36:20,020 like with Trelt, for example, 788 00:36:20,840 --> 00:36:23,300 you would still render to a canvas 789 00:36:23,760 --> 00:36:26,880 or to, like, it's still in the DOM environment. 790 00:36:27,180 --> 00:36:27,960 So probably 791 00:36:27,960 --> 00:36:30,380 one can work with 792 00:36:30,380 --> 00:36:31,080 the other. 793 00:36:31,720 --> 00:36:35,000 If your custom renderer is accessing the links PPI, 794 00:36:35,380 --> 00:36:39,480 obviously cannot in any way or form mix with DOM. 795 00:36:39,650 --> 00:36:40,960 So like that will, like, 796 00:36:41,140 --> 00:36:44,700 it's mostly on the custom renderer side again. 797 00:36:45,940 --> 00:37:00,680 But the fact that you will, like, this is what actually one of the input from Grisha is that he wanted a way to seamless move from one custom renderer to the other without having to create a separate component, without having to 798 00:37:00,680 --> 00:37:02,640 do that. 799 00:37:02,960 --> 00:37:05,380 We actually thought a bit about that. 800 00:37:05,680 --> 00:37:08,420 We didn't actually settle that part. 801 00:37:08,680 --> 00:37:11,880 So, like, that's something that we were working on. 802 00:37:13,520 --> 00:37:15,740 We are thinking if there is a way to do it. 803 00:37:16,180 --> 00:37:16,620 That's the point. 804 00:37:16,750 --> 00:37:21,060 Because I think if you have a clear mark inside your component, it could work. 805 00:37:21,880 --> 00:37:23,120 But we'll need to see. 806 00:37:23,520 --> 00:37:25,800 That brought up another question that I had. 807 00:37:25,860 --> 00:37:31,920 Are you looking for financial support just for you and MainMatter to work on this project? 808 00:37:32,260 --> 00:37:34,820 Or is this for, like, spelled maintainers? 809 00:37:34,890 --> 00:37:38,620 Or is it open to, like, everyone to be able to help and contribute to it? 810 00:37:39,100 --> 00:37:42,700 Obviously, like, everybody can help to, like, and contribute. 811 00:37:43,500 --> 00:37:51,380 we are looking specifically for funding because I honestly I tried to work on this on my free time 812 00:37:52,340 --> 00:37:55,060 but it is a it is a big project like and 813 00:37:55,060 --> 00:37:55,520 it's 814 00:37:55,520 --> 00:37:59,100 very difficult to do I don't have much free time 815 00:37:59,680 --> 00:38:06,580 and and it's also like it's a very big change and so like I like the reason why we are looking for 816 00:38:06,800 --> 00:38:11,640 funding is because I need to be able to work on it full time like even when I was working on it 817 00:38:11,520 --> 00:38:13,600 full-time. We were 818 00:38:13,650 --> 00:38:15,480 doing progress and we actually did a lot of 819 00:38:15,700 --> 00:38:17,620 progress because obviously we were able to 820 00:38:17,980 --> 00:38:19,540 merge the first PR and 821 00:38:19,620 --> 00:38:21,480 then to building the POC 822 00:38:21,660 --> 00:38:23,720 and stuff like that, but it was still 823 00:38:24,100 --> 00:38:25,220 like, it would 824 00:38:25,600 --> 00:38:27,500 probably also take a lot of time to 825 00:38:27,840 --> 00:38:29,200 complete. That makes sense. 826 00:38:29,680 --> 00:38:31,020 Yeah, I'm 827 00:38:31,020 --> 00:38:31,540 out of questions. 828 00:38:32,480 --> 00:38:33,180 Jeppe, Brittany? 829 00:38:33,680 --> 00:38:35,620 No, it's super awesome. I want to see 830 00:38:35,620 --> 00:38:36,600 this tomorrow, so 831 00:38:36,600 --> 00:38:37,580 whenever 832 00:38:37,580 --> 00:38:38,180 you 833 00:38:38,180 --> 00:38:38,880 release this. 834 00:38:39,520 --> 00:38:50,900 Yeah. I mean, again, like if like something that could help, like, obviously I know that like not everybody works for a company that is building a native app, for example, 835 00:38:51,040 --> 00:38:51,700 and not everybody 836 00:38:51,700 --> 00:38:53,340 is building terminal application. 837 00:38:53,980 --> 00:39:05,460 But if you know of any companies that might be interested in this, we tried to reach out to some company and we are actually talking with some company and we actually got our first sponsor. 838 00:39:05,780 --> 00:39:09,820 So like we luckily got the first sponsor. 839 00:39:09,890 --> 00:39:13,740 So actually a bit of work is actually happening right now. 840 00:39:15,020 --> 00:39:19,120 What I was trying to, what I was trying, 841 00:39:19,150 --> 00:39:24,640 like what will happen in the immediate future 842 00:39:24,940 --> 00:39:29,440 is that probably I will try to bring the branch up to date 843 00:39:30,080 --> 00:39:31,700 with the funding that we got. 844 00:39:32,500 --> 00:39:42,100 And once I got that, I should, no promise, but I should be able to at least keep it up to date. 845 00:39:42,380 --> 00:39:48,520 Because at MainMatter, we also have like basically 20% of our time, we can do it, we can do open source. 846 00:39:48,980 --> 00:39:59,840 And so if I can do open source in my 20% time, I might be able, once I build this, like I bring the branch up to date. 847 00:40:00,600 --> 00:40:06,800 And then after I do that, I can try to keep it on par 848 00:40:07,300 --> 00:40:08,920 so that when we get new funding, 849 00:40:09,220 --> 00:40:13,620 we can actually immediately jump into it and start 850 00:40:13,620 --> 00:40:14,420 working on it. 851 00:40:14,820 --> 00:40:15,720 Make progress quickly. 852 00:40:16,480 --> 00:40:17,100 And so what 853 00:40:17,100 --> 00:40:20,880 I was saying is that if you have any company 854 00:40:21,020 --> 00:40:22,060 that might be interested, 855 00:40:23,799 --> 00:40:27,400 please send them to SvelteCustomRenderers.com. 856 00:40:29,060 --> 00:40:30,400 I'll put it in the show notes. 857 00:40:30,970 --> 00:40:32,680 So in summary, basically, 858 00:40:33,440 --> 00:40:35,620 the first work that needs to happen is, 859 00:40:36,100 --> 00:40:38,320 well, bring the branch up to date, 860 00:40:38,350 --> 00:40:43,560 but then it's not so much about writing customer renderers yet, right? 861 00:40:43,740 --> 00:40:46,040 It's more about making it ready 862 00:40:46,040 --> 00:40:47,700 for anyone 863 00:40:47,700 --> 00:40:49,080 to write a custom renderer. 864 00:40:49,130 --> 00:40:49,700 Yeah, exactly. 865 00:40:49,810 --> 00:40:50,860 So the 866 00:40:50,860 --> 00:40:53,700 main goal of this initiative 867 00:40:54,160 --> 00:40:57,780 is basically bring the custom renderer API to Svelte 868 00:40:57,780 --> 00:40:58,140 itself. 869 00:40:58,620 --> 00:41:01,840 The moment we have something insveled, 870 00:41:02,600 --> 00:41:04,780 then we can, like, literally everybody 871 00:41:05,140 --> 00:41:06,480 can write a custom renderer. 872 00:41:07,180 --> 00:41:07,580 And I have 873 00:41:07,580 --> 00:41:08,320 to say, by the way, 874 00:41:08,410 --> 00:41:10,820 like, maybe it is because I am, 875 00:41:11,360 --> 00:41:14,140 like, I wrote the actual code underlying that, 876 00:41:14,740 --> 00:41:15,840 but I have to say that 877 00:41:17,440 --> 00:41:19,840 they are decently easy to build. 878 00:41:20,320 --> 00:41:20,480 Like, 879 00:41:20,560 --> 00:41:21,120 at 880 00:41:21,120 --> 00:41:21,660 the end of the day, 881 00:41:22,180 --> 00:41:24,699 it didn't took me much time to build 882 00:41:25,140 --> 00:41:31,080 the terminal renderer and the links. 883 00:41:31,160 --> 00:41:31,280 Yeah, 884 00:41:31,420 --> 00:41:31,960 yeah. 885 00:41:32,880 --> 00:41:36,060 I mean, you would just have to handle, 886 00:41:36,460 --> 00:41:38,560 so in the example of links, 887 00:41:38,760 --> 00:41:40,480 you're kind of offloading the complexity 888 00:41:40,740 --> 00:41:42,600 of creating native apps 889 00:41:42,600 --> 00:41:43,400 to 890 00:41:43,400 --> 00:41:44,040 links, right? 891 00:41:44,140 --> 00:41:45,700 So you don't have to think about like, 892 00:41:45,800 --> 00:41:48,540 oh, how do you do this in iOS, right? 893 00:41:48,680 --> 00:41:50,080 Because links will handle that for you. 894 00:41:50,220 --> 00:41:50,900 But like theoretically, 895 00:41:51,180 --> 00:41:54,820 you could write an iOS renderer or something. 896 00:41:54,940 --> 00:41:55,380 Yeah, please. 897 00:41:55,700 --> 00:41:56,280 That would output... 898 00:41:56,280 --> 00:41:58,000 You could technically write an iOS renderer 899 00:41:58,000 --> 00:42:01,680 that just renders into Swift elements, for example. 900 00:42:01,920 --> 00:42:02,600 Yeah, yeah, exactly. 901 00:42:02,780 --> 00:42:05,000 But then you would need to do work around that 902 00:42:05,240 --> 00:42:07,300 to actually make it into an application. 903 00:42:07,600 --> 00:42:07,720 Something 904 00:42:07,720 --> 00:42:09,120 very nice about Lynx 905 00:42:09,220 --> 00:42:11,820 is that they have a very good CSS support. 906 00:42:12,220 --> 00:42:16,260 So when you build a custom renderer for Lynx, 907 00:42:16,420 --> 00:42:18,939 I was able to use Flex, Agreed, even... 908 00:42:19,480 --> 00:42:19,900 Oh, wow. 909 00:42:20,280 --> 00:42:22,360 You can run Tailwind inside. 910 00:42:23,100 --> 00:42:23,880 Oh, nice. 911 00:42:25,560 --> 00:42:26,360 I'm sold. 912 00:42:28,140 --> 00:42:29,840 I didn't write anything of that. 913 00:42:30,040 --> 00:42:31,760 Like, links did all the job. 914 00:42:32,320 --> 00:42:32,420 So 915 00:42:32,420 --> 00:42:33,600 the only thing that I did is 916 00:42:33,600 --> 00:42:34,620 write the code 917 00:42:34,700 --> 00:42:38,340 so that when you, I don't know, write a style tag, 918 00:42:38,480 --> 00:42:41,540 you actually get the CSS for that. 919 00:42:41,780 --> 00:42:43,200 And links handle all of that. 920 00:42:43,540 --> 00:42:44,420 That's awesome. 921 00:42:46,020 --> 00:42:46,980 I want 922 00:42:46,980 --> 00:42:50,200 to also shout out our first fan, 923 00:42:50,260 --> 00:42:51,480 because it's like 924 00:42:51,480 --> 00:42:52,520 a sub 925 00:42:52,520 --> 00:42:54,440 code that actually came in 926 00:42:54,740 --> 00:42:58,640 and gave us a bit of funding for working on this. 927 00:42:58,700 --> 00:43:00,040 And so like with this funding, 928 00:43:00,060 --> 00:43:02,680 we can actually start working a bit on like bringing 929 00:43:02,820 --> 00:43:04,020 in the branch update and so. 930 00:43:04,800 --> 00:43:08,280 - So this brings me to another question. 931 00:43:08,820 --> 00:43:09,160 Why does 932 00:43:09,160 --> 00:43:11,800 a supplement company need a custom renderer? 933 00:43:12,100 --> 00:43:14,800 - I get, they are using Svelte and probably they, 934 00:43:15,520 --> 00:43:17,320 I mean, I don't know if they are using Svelte, 935 00:43:17,400 --> 00:43:18,700 but they want to 936 00:43:18,700 --> 00:43:19,200 use Svelte. 937 00:43:19,220 --> 00:43:19,620 to use Svelte. 938 00:43:19,940 --> 00:43:20,040 Okay. 939 00:43:20,260 --> 00:43:20,400 Yeah. 940 00:43:22,280 --> 00:43:23,000 Maybe you can 941 00:43:23,660 --> 00:43:24,860 create a renderer 942 00:43:24,980 --> 00:43:25,540 that creates 943 00:43:25,800 --> 00:43:26,080 supplements. 944 00:43:26,620 --> 00:43:26,780 Yeah, 945 00:43:26,860 --> 00:43:27,160 you can probably. 946 00:43:27,320 --> 00:43:27,660 So you can 947 00:43:27,760 --> 00:43:28,440 declaratively 948 00:43:28,440 --> 00:43:28,960 define 949 00:43:30,380 --> 00:43:30,560 I 950 00:43:30,560 --> 00:43:31,160 want to call 951 00:43:31,180 --> 00:43:32,100 a 3D printer 952 00:43:32,300 --> 00:43:32,720 with Svelte. 953 00:43:33,200 --> 00:43:34,060 A couple of 954 00:43:34,380 --> 00:43:34,980 companies that I 955 00:43:35,020 --> 00:43:35,600 worked for 956 00:43:35,860 --> 00:43:36,240 would have 957 00:43:36,460 --> 00:43:36,560 like 958 00:43:38,000 --> 00:43:38,800 chosen Svelte 959 00:43:38,980 --> 00:43:39,360 long term 960 00:43:39,700 --> 00:43:40,400 if they had 961 00:43:40,520 --> 00:43:40,800 had that 962 00:43:41,060 --> 00:43:41,200 as an 963 00:43:41,200 --> 00:43:41,480 option. 964 00:43:41,560 --> 00:43:42,020 That has 965 00:43:42,020 --> 00:43:42,220 been 966 00:43:42,220 --> 00:43:42,840 a deterrent 967 00:43:42,860 --> 00:43:43,340 of keeping 968 00:43:43,580 --> 00:43:44,300 Svelte around. 969 00:43:45,240 --> 00:43:46,040 That's also 970 00:43:46,260 --> 00:43:46,900 why we started 971 00:43:47,120 --> 00:43:47,600 working on this 972 00:43:47,700 --> 00:43:48,060 because like 973 00:43:48,120 --> 00:43:49,180 we have seen 974 00:43:49,620 --> 00:43:52,320 clients asking, yeah, how, like, 975 00:43:52,640 --> 00:43:54,380 but does Velt have a solution for, 976 00:43:55,920 --> 00:43:56,400 granted, 977 00:43:56,980 --> 00:43:58,420 sorry, I just want to say this 978 00:43:58,480 --> 00:44:00,160 because I'm very keen on this. 979 00:44:00,720 --> 00:44:03,300 Like, if I have to build an app for myself 980 00:44:03,720 --> 00:44:07,060 or for developers, I will 100% go with PWA. 981 00:44:07,800 --> 00:44:09,560 I was going to say the same thing. 982 00:44:09,700 --> 00:44:12,080 I'm just going to say that I would just build a web app, 983 00:44:12,400 --> 00:44:14,440 like, over native period. 984 00:44:15,600 --> 00:44:16,080 I 985 00:44:16,080 --> 00:44:19,020 think we talked about this with, was it with Ilya? 986 00:44:19,060 --> 00:44:20,280 a couple of weeks ago 987 00:44:21,200 --> 00:44:22,660 when we talked about 988 00:44:23,260 --> 00:44:25,360 I mentioned Stanislav 989 00:44:25,540 --> 00:44:26,340 he showed 990 00:44:27,280 --> 00:44:29,160 like a proof of concept thing 991 00:44:29,420 --> 00:44:30,540 with like 992 00:44:31,440 --> 00:44:33,080 animations and stuff like a stack 993 00:44:33,500 --> 00:44:33,720 thing 994 00:44:35,340 --> 00:44:37,300 with like a progressive web app 995 00:44:37,600 --> 00:44:39,260 basically like a Twitter clone 996 00:44:39,580 --> 00:44:40,380 and it 997 00:44:40,380 --> 00:44:40,580 like 998 00:44:41,020 --> 00:44:43,180 he showed it on his phone and it 999 00:44:43,380 --> 00:44:45,020 feels like native 1000 00:44:45,340 --> 00:44:46,460 it feels like yeah 1001 00:44:46,980 --> 00:44:48,320 it's really really cool 1002 00:44:48,280 --> 00:44:51,880 I guess you know what PWA can do today, 1003 00:44:53,180 --> 00:44:54,260 but it's true. 1004 00:44:54,920 --> 00:44:57,080 Nowadays, the web is very powerful 1005 00:44:57,190 --> 00:44:58,600 and you can do a lot of stuff. 1006 00:44:59,720 --> 00:45:01,280 The only issue, in my opinion, 1007 00:45:01,520 --> 00:45:03,820 for PWA is to really have adoption 1008 00:45:04,120 --> 00:45:05,920 is the fact that you cannot install them 1009 00:45:06,140 --> 00:45:06,740 from the App Store. 1010 00:45:07,140 --> 00:45:08,400 Yeah, it's a distribution part. 1011 00:45:08,480 --> 00:45:09,540 You need to get in there. 1012 00:45:10,070 --> 00:45:10,180 Yeah, 1013 00:45:10,920 --> 00:45:11,660 it's just discovering 1014 00:45:11,860 --> 00:45:15,540 and also the fact that they feel more fishy 1015 00:45:15,800 --> 00:45:16,840 to the main user. 1016 00:45:17,960 --> 00:45:18,720 For developers, 1017 00:45:19,020 --> 00:45:19,820 it's absolutely fine. 1018 00:45:19,980 --> 00:45:21,200 I will never build. 1019 00:45:21,380 --> 00:45:23,320 If I'm building a product for developers, 1020 00:45:23,910 --> 00:45:25,300 I will never build an app. 1021 00:45:25,820 --> 00:45:28,760 But if I'm building a product for my mother, 1022 00:45:29,220 --> 00:45:31,100 my mother will never install a PWA. 1023 00:45:31,360 --> 00:45:31,760 What do you mean? 1024 00:45:31,790 --> 00:45:33,480 You don't want to open the share menu, 1025 00:45:34,160 --> 00:45:34,800 scroll to 1026 00:45:34,800 --> 00:45:37,500 bookmark to home screen 1027 00:45:37,920 --> 00:45:39,260 or whatever the option is? 1028 00:45:40,020 --> 00:45:40,100 No. 1029 00:45:40,540 --> 00:45:41,720 But I also, I 1030 00:45:41,720 --> 00:45:41,740 mean, 1031 00:45:41,740 --> 00:45:43,920 I think there's an important piece of the puzzle here 1032 00:45:43,920 --> 00:45:46,040 is that I don't think people want to build 1033 00:45:46,050 --> 00:45:47,100 their own custom renderer. 1034 00:45:47,420 --> 00:45:48,100 They probably don't 1035 00:45:48,100 --> 00:45:48,620 care even. 1036 00:45:49,200 --> 00:45:51,540 What they want is to be able to write native apps in 1037 00:45:51,540 --> 00:45:51,940 Svelte. 1038 00:45:52,050 --> 00:45:52,180 And 1039 00:45:52,180 --> 00:45:56,340 whatever gets them there is what we'll be happy about 1040 00:45:56,430 --> 00:45:58,160 and everyone in the ecosystem, right? 1041 00:45:58,260 --> 00:45:58,380 As 1042 00:45:58,380 --> 00:46:01,940 I was saying, most likely people will actually 1043 00:46:02,500 --> 00:46:05,480 just install a custom renderer and use that custom renderer. 1044 00:46:05,960 --> 00:46:09,240 But it is very nice that you can actually build your own pretty simple 1045 00:46:09,370 --> 00:46:13,580 because maybe you have some custom solution that you need. 1046 00:46:14,040 --> 00:46:17,480 I was talking before with this theme 1047 00:46:17,660 --> 00:46:21,920 that they have already a WebGL renderer 1048 00:46:21,920 --> 00:46:22,600 that they are using, 1049 00:46:23,400 --> 00:46:25,920 and basically they've built their own DSL 1050 00:46:25,940 --> 00:46:27,900 to interact with it, and they hate it. 1051 00:46:28,260 --> 00:46:30,960 And they would love to be able to write 1052 00:46:31,660 --> 00:46:33,940 a Svelte component that then render 1053 00:46:33,980 --> 00:46:35,740 to their WebGL renderer, 1054 00:46:36,220 --> 00:46:38,120 and that will unlock them to do it. 1055 00:46:38,760 --> 00:46:40,100 Yeah, very exciting. 1056 00:46:40,780 --> 00:46:46,120 I feel like this should probably be a higher priority. 1057 00:46:47,359 --> 00:46:48,880 From an outside perspective, 1058 00:46:49,180 --> 00:46:50,920 in looking at the Svelte, 1059 00:46:52,260 --> 00:46:55,160 whatever people are doing inside of the Svelte project, 1060 00:46:55,960 --> 00:47:00,020 this is one of the key issues for adoption for Svelte. 1061 00:47:00,140 --> 00:47:02,740 Even if, because it's like Brittany said, 1062 00:47:04,280 --> 00:47:04,440 oh, 1063 00:47:04,880 --> 00:47:05,840 long term, maybe 1064 00:47:05,840 --> 00:47:06,900 we want an application. 1065 00:47:07,560 --> 00:47:09,220 How are we going to, oh, no, we can't. 1066 00:47:09,280 --> 00:47:11,120 oh, we'll pick React, right? 1067 00:47:11,720 --> 00:47:13,120 That's how it goes. 1068 00:47:13,400 --> 00:47:17,540 So I think, I wish it was high priority. 1069 00:47:17,810 --> 00:47:19,720 Like, personally, I would just spend 1070 00:47:19,790 --> 00:47:22,440 some of the open collective money on this, but... 1071 00:47:22,480 --> 00:47:24,700 Yeah, I mean, there's also talking about that, 1072 00:47:24,880 --> 00:47:24,980 obviously. 1073 00:47:25,070 --> 00:47:25,600 Yeah, yeah. 1074 00:47:26,580 --> 00:47:28,760 Because we do have an open collective 1075 00:47:29,060 --> 00:47:32,340 and there are a bit of money on it. 1076 00:47:32,500 --> 00:47:33,640 So we will probably 1077 00:47:33,640 --> 00:47:35,220 also use 1078 00:47:35,220 --> 00:47:35,860 part of that. 1079 00:47:36,200 --> 00:47:38,640 It's better to use the money than not use it, right? 1080 00:47:38,940 --> 00:47:42,500 Because now it's just sitting there and earning interest for open collective. 1081 00:47:44,040 --> 00:47:50,660 But I mean, it's also true that like, like the pros and cons needs to be good for, because 1082 00:47:51,260 --> 00:47:52,380 you can own 1083 00:47:52,380 --> 00:47:55,140 for, to the people that actually donate, but I 1084 00:47:55,140 --> 00:47:55,320 agree. 1085 00:47:55,460 --> 00:47:55,520 Yeah. 1086 00:47:55,920 --> 00:47:58,100 It's, it's like a, it's an opportunity cost as well. 1087 00:47:58,200 --> 00:48:02,820 Like if you spend money on, on the custom render stuff, you can't spend money on something 1088 00:48:02,910 --> 00:48:03,020 else. 1089 00:48:03,620 --> 00:48:08,000 So anyway, let's, let's talk unpopular opinions. 1090 00:48:08,840 --> 00:48:14,860 do you guys have one Anthony is not here he usually has one but uh we will have to do without 1091 00:48:15,440 --> 00:48:16,520 um so 1092 00:48:16,520 --> 00:48:23,720 I I mean I don't know I finally bit the bullet and switched from Android to Apple and I 1093 00:48:23,860 --> 00:48:33,139 have an iPhone now and I guess I don't know there are things I cannot stand about Apple and iPhones 1094 00:48:33,760 --> 00:48:40,400 and it drives me absolutely crazy that the ipad keyboard that i have has this ability to 1095 00:48:41,140 --> 00:48:45,900 hold a key and then you swipe up or down like you're scrolling on it and you 1096 00:48:45,900 --> 00:48:46,560 get like 1097 00:48:46,560 --> 00:48:46,760 your 1098 00:48:46,940 --> 00:48:51,140 special characters you get your numbers like whatever you're on you get whatever's on the 1099 00:48:51,150 --> 00:48:55,620 upper part of it that doesn't exist on iphone and the keyboard 1100 00:48:55,620 --> 00:48:56,220 is 1101 00:48:56,220 --> 00:48:58,619 like the worst keyboard ever 1102 00:48:59,120 --> 00:49:00,440 ever and like 1103 00:49:00,440 --> 00:49:07,140 i installed gboard which is like what i was using on google android and it doesn't 1104 00:49:07,140 --> 00:49:13,080 have any of my savings type it doesn't know that i'm vulgar so i typed in shit and it autocorrected 1105 00:49:13,220 --> 00:49:20,520 shoot like all the stupid things and it's driving me crazy i need a keyboard that functions for apple 1106 00:49:20,560 --> 00:49:25,220 Yeah. So what made you switch to Apple? 1107 00:49:25,680 --> 00:49:25,980 So I 1108 00:49:25,980 --> 00:49:27,480 switched because 1109 00:49:27,480 --> 00:49:29,080 family permissions. 1110 00:49:29,760 --> 00:49:32,600 So we're actually giving our kids phones for Christmas. 1111 00:49:33,700 --> 00:49:35,320 Verizon, one of the companies here 1112 00:49:35,320 --> 00:49:36,660 in the U.S., had free phones. 1113 00:49:36,960 --> 00:49:39,520 So we got our new service that has all of us on it. 1114 00:49:39,520 --> 00:49:40,420 We're getting them phones. 1115 00:49:40,660 --> 00:49:45,080 And family permissions, it's always been a hassle because my husband will have to approve it 1116 00:49:45,080 --> 00:49:47,060 or I'll have to get my iPad to approve it. 1117 00:49:48,060 --> 00:49:50,960 it's just it's it's been annoying 1118 00:49:50,960 --> 00:49:55,860 i think in the u.s is very like iphone is basically almost a 1119 00:49:56,020 --> 00:49:57,580 necessity right it 1120 00:49:57,580 --> 00:50:00,600 it is like 90 something percent i 1121 00:50:00,600 --> 00:50:01,760 think of the ecosystem 1122 00:50:01,760 --> 00:50:03,720 but i have been a die-hard 1123 00:50:03,900 --> 00:50:09,720 samsung user since like the note 3 like i love i had a samsung 24 or ultra and 1124 00:50:09,720 --> 00:50:11,540 so your so your 1125 00:50:11,440 --> 00:50:15,040 unpopular opinion is iphone sucks basically no it's 1126 00:50:15,040 --> 00:50:16,040 that iphone keyboards 1127 00:50:16,040 --> 00:50:18,040 iphone keyboards suck 1128 00:50:18,160 --> 00:50:23,760 i actually like i like a lot of things about the apple phone much better like all these extra 1129 00:50:23,940 --> 00:50:28,400 buttons it has now it has one to open the camera and i can double click for wallet and then i have 1130 00:50:28,480 --> 00:50:31,400 one that turns my flashlight on without me doing anything 1131 00:50:31,400 --> 00:50:32,040 like i 1132 00:50:32,040 --> 00:50:32,760 just push a button 1133 00:50:32,760 --> 00:50:33,940 that's nice 1134 00:50:34,760 --> 00:50:34,800 but 1135 00:50:34,800 --> 00:50:37,520 there are is that a thing mine 1136 00:50:37,520 --> 00:50:41,440 has it i have the new phone though i have the 17 max pro 1137 00:50:42,540 --> 00:50:46,560 but there's an action button that you can set for the flashlight there's a new button that opens the 1138 00:50:46,710 --> 00:50:46,840 camera 1139 00:50:46,840 --> 00:50:48,360 yeah yeah 1140 00:50:48,360 --> 00:50:51,760 i like a lot of things it's the keyboard is 1141 00:50:51,760 --> 00:50:52,500 freaking 1142 00:50:52,500 --> 00:50:52,880 terrible 1143 00:50:52,880 --> 00:50:54,480 it's interesting you 1144 00:50:54,700 --> 00:51:00,919 say this because i i was actually thinking about completely getting rid of all my apple stuff 1145 00:51:01,160 --> 00:51:01,560 just going 1146 00:51:01,560 --> 00:51:02,280 Android and 1147 00:51:02,280 --> 00:51:02,540 Linux. 1148 00:51:03,380 --> 00:51:06,900 But I realize as I've been thinking about it, 1149 00:51:06,960 --> 00:51:08,460 it's just like, no, 1150 00:51:08,680 --> 00:51:10,380 it's going to be too much work. 1151 00:51:10,640 --> 00:51:14,700 I would have never bet to ever hear this sentence from you. 1152 00:51:15,180 --> 00:51:15,860 It was 1153 00:51:15,860 --> 00:51:18,080 much easier for me to switch 1154 00:51:18,160 --> 00:51:19,380 than I thought it was going to be. 1155 00:51:19,380 --> 00:51:21,820 I thought the transition out of the ecosystem 1156 00:51:22,460 --> 00:51:23,680 was going to be the worst. 1157 00:51:23,920 --> 00:51:24,900 But Google transfers. 1158 00:51:25,320 --> 00:51:25,520 So 1159 00:51:25,520 --> 00:51:26,600 Gmail, 1160 00:51:27,140 --> 00:51:29,180 like Calendar, all of that's on my iPhone. 1161 00:51:29,440 --> 00:51:30,600 I didn't have to do that. 1162 00:51:30,980 --> 00:51:32,360 So the 1163 00:51:32,360 --> 00:51:32,660 thing I 1164 00:51:32,660 --> 00:51:33,140 had to do was 1165 00:51:33,140 --> 00:51:34,320 cancel Google One. 1166 00:51:34,660 --> 00:51:34,960 That's it. 1167 00:51:35,320 --> 00:51:36,080 Talking of switches, 1168 00:51:36,280 --> 00:51:38,520 I tried to switch from VS Code to Zed. 1169 00:51:40,620 --> 00:51:44,620 And I was not like, I think it's nice. 1170 00:51:44,810 --> 00:51:47,120 Like, it is very nice and it's fast and it's, 1171 00:51:47,740 --> 00:51:52,440 but there are some, a few things that I like really enjoy about VS Code 1172 00:51:52,580 --> 00:51:55,720 and that are really part of my workflow. 1173 00:51:56,380 --> 00:51:58,320 I can never get rid of them. 1174 00:51:58,380 --> 00:51:58,720 and so 1175 00:51:59,740 --> 00:52:00,260 nice 1176 00:52:00,260 --> 00:52:00,620 wish back 1177 00:52:03,200 --> 00:52:03,840 all right 1178 00:52:06,040 --> 00:52:06,820 unpopular opinions 1179 00:52:07,190 --> 00:52:07,380 anyone 1180 00:52:08,750 --> 00:52:09,540 I think I have one 1181 00:52:10,340 --> 00:52:11,480 that might be unpopular 1182 00:52:11,780 --> 00:52:12,560 maybe it's popular 1183 00:52:12,690 --> 00:52:14,300 I think it sounds unpopular 1184 00:52:14,580 --> 00:52:15,940 but I actually like writing 1185 00:52:16,570 --> 00:52:18,080 my thoughts down in Notion 1186 00:52:18,640 --> 00:52:20,560 I know you're not allowed to say that out loud 1187 00:52:20,980 --> 00:52:21,060 you 1188 00:52:21,060 --> 00:52:22,060 have to write in Markdown 1189 00:52:22,060 --> 00:52:22,500 files 1190 00:52:22,630 --> 00:52:23,900 or Obsidian or whatever 1191 00:52:24,030 --> 00:52:24,900 but I like Notion 1192 00:52:26,780 --> 00:52:27,140 and 1193 00:52:28,920 --> 00:52:30,340 when you get it under your skin 1194 00:52:30,690 --> 00:52:32,820 it stops getting in the way of you 1195 00:52:32,850 --> 00:52:34,040 and it just helps you continue 1196 00:52:35,000 --> 00:52:36,560 Notion is also one of the few apps 1197 00:52:37,100 --> 00:52:38,180 well not one of the few but 1198 00:52:39,200 --> 00:52:40,740 it doesn't yet also complete 1199 00:52:40,740 --> 00:52:42,860 with some AI suggestions so it doesn't 1200 00:52:43,120 --> 00:52:44,320 take me out of the flow it 1201 00:52:44,320 --> 00:52:44,580 just 1202 00:52:44,710 --> 00:52:45,360 looks me right 1203 00:52:46,880 --> 00:52:47,920 and that whole 1204 00:52:47,920 --> 00:52:48,560 formatting 1205 00:52:49,120 --> 00:52:50,500 thing like it just works for me 1206 00:52:51,100 --> 00:52:52,940 but I also get like if you don't understand 1207 00:52:53,300 --> 00:52:54,880 the keyboard shortcuts if you don't understand 1208 00:52:54,900 --> 00:52:57,980 and the whole code blocks versus headings, 1209 00:52:58,820 --> 00:52:59,940 then it's super annoying. 1210 00:53:00,440 --> 00:53:03,620 Do you do it on the web, or have you used the app? 1211 00:53:03,680 --> 00:53:04,200 No, it's the app. 1212 00:53:05,300 --> 00:53:06,300 I just don't know if there's a difference. 1213 00:53:07,140 --> 00:53:10,260 I was going to agree with you that the web version is fine, 1214 00:53:10,500 --> 00:53:14,740 but then as soon as I used the app, it would jump around on me. 1215 00:53:14,920 --> 00:53:16,000 I would try to select 1216 00:53:16,000 --> 00:53:16,400 something, 1217 00:53:16,680 --> 00:53:19,700 and maybe it was because it was the Android version of the app. 1218 00:53:19,800 --> 00:53:20,220 Maybe I 1219 00:53:20,220 --> 00:53:21,420 need to try the Android version. 1220 00:53:21,820 --> 00:53:23,600 The Android app is meh. 1221 00:53:24,460 --> 00:53:25,840 Okay, so maybe that was 1222 00:53:25,840 --> 00:53:26,360 the reason. 1223 00:53:26,660 --> 00:53:28,020 Maybe I should try the app version. 1224 00:53:28,980 --> 00:53:31,120 No, but I did like it on the web. 1225 00:53:32,160 --> 00:53:32,400 Yeah, 1226 00:53:32,520 --> 00:53:33,040 I see. 1227 00:53:34,080 --> 00:53:36,100 Okay, I don't know if this is an unpopular opinion, 1228 00:53:36,460 --> 00:53:39,060 but I really don't like autosave. 1229 00:53:40,360 --> 00:53:41,240 Oh, interesting. 1230 00:53:42,680 --> 00:53:43,360 Well, it depends 1231 00:53:43,360 --> 00:53:45,860 on what you mean by 1232 00:53:45,860 --> 00:53:46,540 autosave. 1233 00:53:46,780 --> 00:53:48,560 Autosave or save on format unsave? 1234 00:53:48,820 --> 00:53:49,080 Format 1235 00:53:49,080 --> 00:53:50,480 unsave, I love it. 1236 00:53:50,900 --> 00:53:52,140 But autosave, 1237 00:53:52,480 --> 00:53:52,620 no. 1238 00:53:52,920 --> 00:53:53,180 I will 1239 00:53:53,180 --> 00:53:56,020 never autosave. 1240 00:53:56,320 --> 00:53:57,580 I don't do autosave either. 1241 00:53:58,340 --> 00:53:59,140 When would you 1242 00:53:59,140 --> 00:53:59,700 autosave? 1243 00:53:59,900 --> 00:54:01,240 What does autosave mean for you? 1244 00:54:01,800 --> 00:54:02,300 Save on blur. 1245 00:54:02,800 --> 00:54:03,200 When 1246 00:54:03,200 --> 00:54:03,600 you 1247 00:54:03,600 --> 00:54:05,280 blur the... 1248 00:54:06,100 --> 00:54:08,820 Autosave, so as soon as you stop writing, it saves you. 1249 00:54:09,260 --> 00:54:09,660 Oh, I see. 1250 00:54:09,720 --> 00:54:10,280 Oh, wow. 1251 00:54:10,880 --> 00:54:11,800 Yeah, that does mean it. 1252 00:54:12,520 --> 00:54:12,600 Yeah. 1253 00:54:13,440 --> 00:54:19,900 And I actually got this because I had to write a tiny bit of Rust. 1254 00:54:20,560 --> 00:54:21,760 I don't know Rust, right? 1255 00:54:21,920 --> 00:54:25,680 but I was surprised by the fact that in Rust, 1256 00:54:26,560 --> 00:54:28,440 you don't get errors in the editor 1257 00:54:28,780 --> 00:54:30,080 until you save the file. 1258 00:54:31,520 --> 00:54:32,680 Which to me, 1259 00:54:32,980 --> 00:54:33,900 it's wild. 1260 00:54:34,140 --> 00:54:37,660 Like I was there and I was seeing like squiggly lines 1261 00:54:37,800 --> 00:54:39,920 on part of the code that was not there 1262 00:54:40,000 --> 00:54:41,180 because I just changed it. 1263 00:54:41,180 --> 00:54:43,760 And I talked with a colleague that obviously, 1264 00:54:44,060 --> 00:54:45,520 we also specialize in Rust. 1265 00:54:45,680 --> 00:54:47,800 So like he's a Rust developer. 1266 00:54:48,000 --> 00:54:54,720 I said, like, do you really not, like, get, like, errors and warnings and stuff until you save? 1267 00:54:55,240 --> 00:54:59,060 And he said, yeah, but, I mean, I have auto save on, so, like, I always get it. 1268 00:55:00,160 --> 00:55:01,060 That's the solution. 1269 00:55:01,160 --> 00:55:02,420 Maybe we need it if 1270 00:55:02,420 --> 00:55:04,100 they have that, then. 1271 00:55:04,700 --> 00:55:04,860 Yeah. 1272 00:55:06,119 --> 00:55:06,640 That's weird. 1273 00:55:06,740 --> 00:55:07,140 Oh, wow. 1274 00:55:07,700 --> 00:55:08,280 Save on idle? 1275 00:55:08,520 --> 00:55:09,180 I've never heard of that. 1276 00:55:09,360 --> 00:55:12,740 Like, that sounds super annoying, but I would definitely always buy save on blur. 1277 00:55:13,480 --> 00:55:15,820 So save on blur is when you switch away from the tab? 1278 00:55:15,920 --> 00:55:16,600 When you switch 1279 00:55:16,600 --> 00:55:18,180 to the browser, then it saves. 1280 00:55:18,360 --> 00:55:20,260 Or when you switch tab, then it saves, right? 1281 00:55:20,490 --> 00:55:20,620 Yeah. 1282 00:55:20,790 --> 00:55:20,920 Okay. 1283 00:55:22,060 --> 00:55:22,180 We 1284 00:55:22,180 --> 00:55:23,060 had a setup 1285 00:55:23,060 --> 00:55:27,060 where we had, like, lint on save. 1286 00:55:28,220 --> 00:55:31,340 And then the linter was, oh, there's an unused variable here. 1287 00:55:32,000 --> 00:55:32,680 I'm going to delete 1288 00:55:32,680 --> 00:55:32,980 that. 1289 00:55:33,600 --> 00:55:36,680 And so if you wrote the variable but didn't use it yet 1290 00:55:36,830 --> 00:55:37,280 because you 1291 00:55:37,280 --> 00:55:40,220 had to read documentation, that was really good. 1292 00:55:40,220 --> 00:55:40,500 Another issue is 1293 00:55:40,500 --> 00:55:42,740 that, like, I think, at this point, 1294 00:55:42,890 --> 00:55:45,300 I suspect it's my fault, to be fair. 1295 00:55:45,660 --> 00:55:49,400 Because I contribute a lot on open source, right? 1296 00:55:49,580 --> 00:55:51,480 So like, obviously I work a lot on Svelte, 1297 00:55:51,480 --> 00:55:53,740 but I also contribute a lot on open source. 1298 00:55:54,340 --> 00:55:58,220 And every single time I work on an open source project, 1299 00:55:59,320 --> 00:56:00,740 like the moment I save, 1300 00:56:01,500 --> 00:56:05,400 like it's almost like their Precure config is not like a thing. 1301 00:56:05,660 --> 00:56:07,040 Like either they misconfigured it 1302 00:56:07,240 --> 00:56:09,480 or I have something in my editor set up wrongly. 1303 00:56:10,020 --> 00:56:14,160 And I always change so much of the editor. 1304 00:56:14,460 --> 00:56:16,480 So like the moment I do 1305 00:56:16,480 --> 00:56:16,860 that 1306 00:56:16,860 --> 00:56:17,080 too, 1307 00:56:17,900 --> 00:56:20,400 the moment I have to contribute to some other open source project, 1308 00:56:21,070 --> 00:56:22,100 I always do like, 1309 00:56:22,110 --> 00:56:25,260 I do my changes and then I format save without format 1310 00:56:25,260 --> 00:56:26,620 and without formatting. 1311 00:56:26,840 --> 00:56:30,040 I do that when I have to touch other people's files because we even have a 1312 00:56:30,280 --> 00:56:32,040 prettier config set up, but the other, 1313 00:56:32,760 --> 00:56:35,860 I don't think the other developer that works on the project 1314 00:56:35,860 --> 00:56:37,000 runs format 1315 00:56:37,000 --> 00:56:37,540 or 1316 00:56:37,700 --> 00:56:38,820 went or anything ever. 1317 00:56:39,440 --> 00:56:40,200 And so I 1318 00:56:40,200 --> 00:56:44,240 go in there and it will have like the entire page is changed. 1319 00:56:44,360 --> 00:56:45,640 and you're like oh 1320 00:56:45,640 --> 00:56:51,640 yeah yeah that's a that's not fun 1321 00:56:51,640 --> 00:56:52,520 we 1322 00:56:52,520 --> 00:56:55,760 need a ci that like just auto formats 1323 00:56:56,260 --> 00:57:00,160 and lints everything but it would have to be ran once through everything i mean 1324 00:57:00,160 --> 00:57:01,180 there is right 1325 00:57:01,440 --> 00:57:06,660 there's uh there's like a bunch of the stuff that you can do like a husky oh yeah is 1326 00:57:06,660 --> 00:57:07,640 yeah husky 1327 00:57:07,740 --> 00:57:08,520 It's not CI, 1328 00:57:08,710 --> 00:57:08,820 though. 1329 00:57:09,290 --> 00:57:10,040 I mean, you could... 1330 00:57:10,080 --> 00:57:11,200 Husky is pre-gommetook. 1331 00:57:11,400 --> 00:57:11,980 Husky did. 1332 00:57:11,980 --> 00:57:12,240 Yeah, exactly. 1333 00:57:13,460 --> 00:57:15,840 I don't think you should have pre-gommetook. 1334 00:57:16,320 --> 00:57:17,120 I don't know if it's unpopular. 1335 00:57:17,640 --> 00:57:17,760 Yeah. 1336 00:57:18,380 --> 00:57:18,700 I don't know. 1337 00:57:19,660 --> 00:57:19,960 All right. 1338 00:57:21,040 --> 00:57:21,700 Unpopular opinions. 1339 00:57:22,720 --> 00:57:23,640 Now it's picks. 1340 00:57:24,140 --> 00:57:24,700 I have a pick. 1341 00:57:26,000 --> 00:57:28,900 So I am going to pick Screen Studio. 1342 00:57:29,280 --> 00:57:29,900 Found it today. 1343 00:57:30,740 --> 00:57:32,760 I needed to record Advent of Svelte day four. 1344 00:57:33,660 --> 00:57:34,860 And I was in a hurry. 1345 00:57:35,150 --> 00:57:36,140 And I found Screen Studio. 1346 00:57:36,520 --> 00:57:38,580 And it's a really nice application. 1347 00:57:39,580 --> 00:57:44,440 Basically, it lets you record your screen and your cameras and everything. 1348 00:57:44,520 --> 00:57:46,440 And then it lets you edit afterwards. 1349 00:57:46,640 --> 00:57:49,320 And it has these really nice Zoom animations. 1350 00:57:49,480 --> 00:57:49,680 I 1351 00:57:49,680 --> 00:57:50,660 think Paolo 1352 00:57:50,660 --> 00:57:51,180 loves them. 1353 00:57:53,420 --> 00:57:55,680 I think they are very nice. 1354 00:57:56,160 --> 00:57:58,340 I just think that I'm popular opinion. 1355 00:58:00,320 --> 00:58:05,360 No, because I think a lot of people on the web uses this. 1356 00:58:06,180 --> 00:58:09,120 and like some people really go bonkers 1357 00:58:09,380 --> 00:58:10,640 with Zoom animations. 1358 00:58:11,680 --> 00:58:13,260 So like they move them around 1359 00:58:13,540 --> 00:58:15,360 and like the whole application shifts 1360 00:58:15,360 --> 00:58:16,280 left and right. 1361 00:58:16,340 --> 00:58:17,180 And it's 1362 00:58:17,180 --> 00:58:18,000 very annoying. 1363 00:58:18,880 --> 00:58:20,440 I've been using Screen Studio for years. 1364 00:58:20,760 --> 00:58:21,380 I love it. 1365 00:58:21,600 --> 00:58:23,020 But also the first action I do 1366 00:58:23,160 --> 00:58:24,680 whenever I open a new recording 1367 00:58:24,740 --> 00:58:26,760 is to disable those Zoom things. 1368 00:58:27,500 --> 00:58:27,620 Yeah. 1369 00:58:28,220 --> 00:58:31,780 So you don't like the advent of Svelte day four either then? 1370 00:58:32,320 --> 00:58:32,600 I 1371 00:58:32,600 --> 00:58:33,980 mostly looked at your face. 1372 00:58:34,900 --> 00:58:36,060 To not get disoriented. 1373 00:58:38,480 --> 00:58:38,580 No. 1374 00:58:39,460 --> 00:58:42,420 So a few weeks ago, I had to record a video of myself, 1375 00:58:42,760 --> 00:58:44,120 like without, not the screen at all. 1376 00:58:44,400 --> 00:58:46,260 And I chose to record that with Screen Studio 1377 00:58:46,720 --> 00:58:47,960 just because I wanted the editing features. 1378 00:58:49,340 --> 00:58:50,020 Ah, right. 1379 00:58:50,880 --> 00:58:51,000 Yeah, 1380 00:58:51,420 --> 00:58:51,660 that's good. 1381 00:58:52,300 --> 00:58:53,120 All right, that's my pick. 1382 00:58:56,100 --> 00:58:56,280 Anyone? 1383 00:58:56,900 --> 00:58:57,160 No picks? 1384 00:58:59,580 --> 00:58:59,960 I'm trying 1385 00:58:59,960 --> 00:59:00,440 to think 1386 00:59:00,440 --> 00:59:00,960 of something. 1387 00:59:02,900 --> 00:59:04,360 Not a lot of good in the world this week. 1388 00:59:04,700 --> 00:59:13,780 You said my microphone is terrible, so I was maybe going to pick these headphones, but these are the Beats Studio Pro headphones for, like, noise cancelling and sound quality. 1389 00:59:14,080 --> 00:59:14,560 They're amazing. 1390 00:59:15,380 --> 00:59:17,280 But apparently the microphone is so-so. 1391 00:59:18,740 --> 00:59:19,620 I mean, it's good enough. 1392 00:59:20,360 --> 00:59:21,060 It's good enough. 1393 00:59:22,760 --> 00:59:24,900 It's not a studio microphone, but I would be 1394 00:59:24,900 --> 00:59:26,000 surprised if it was. 1395 00:59:26,400 --> 00:59:27,380 Advent of Svelte. 1396 00:59:28,280 --> 00:59:28,840 That's a good pick. 1397 00:59:29,370 --> 00:59:30,240 That is a very good pick. 1398 00:59:30,540 --> 00:59:30,700 Nice. 1399 00:59:31,360 --> 00:59:31,560 Yeah. 1400 00:59:32,800 --> 00:59:34,080 Advent of Svelte. 1401 00:59:34,700 --> 00:59:34,800 yeah 1402 00:59:35,320 --> 00:59:36,040 do you have one? 1403 00:59:36,270 --> 00:59:36,860 I mean if we're doing 1404 00:59:37,020 --> 00:59:37,500 insider picks 1405 00:59:37,920 --> 00:59:38,920 I would choose 1406 00:59:39,480 --> 00:59:39,920 TMCP 1407 00:59:40,640 --> 00:59:41,080 because 1408 00:59:42,480 --> 00:59:43,720 I'm working a lot 1409 00:59:43,840 --> 00:59:44,600 on a storybook 1410 00:59:44,720 --> 00:59:45,340 MCP at the moment 1411 00:59:45,380 --> 00:59:46,320 I've been for a month 1412 00:59:46,520 --> 00:59:47,960 and it's based on TMCP 1413 00:59:48,070 --> 00:59:48,700 which is this framework 1414 00:59:48,770 --> 00:59:49,820 that Paolo is building 1415 00:59:50,560 --> 00:59:51,620 and that is just 1416 00:59:52,200 --> 00:59:53,360 a billion times better 1417 00:59:53,480 --> 00:59:53,980 than the original 1418 00:59:54,400 --> 00:59:55,680 official MCP SDK 1419 00:59:56,580 --> 00:59:56,880 so 1420 00:59:57,980 --> 00:59:59,180 it's a joy to work with 1421 00:59:59,400 --> 01:00:00,680 it also helps of course 1422 01:00:00,760 --> 01:00:01,140 that I can just 1423 01:00:01,500 --> 01:00:01,920 ping Paolo 1424 01:00:02,060 --> 01:00:02,879 and it'll fix stuff 1425 01:00:04,380 --> 01:00:05,140 but it's like 1426 01:00:05,690 --> 01:00:06,640 the API is better 1427 01:00:06,890 --> 01:00:07,720 the docs are better 1428 01:00:08,640 --> 01:00:10,260 if you're doing MCP stuff 1429 01:00:10,560 --> 01:00:11,100 use TMCP 1430 01:00:11,720 --> 01:00:12,960 even if you don't use Svelte 1431 01:00:13,780 --> 01:00:16,520 I'll slide like the 20 euro 1432 01:00:21,160 --> 01:00:21,760 nice 1433 01:00:22,859 --> 01:00:23,600 all right 1434 01:00:24,370 --> 01:00:26,260 I think that's everything for today 1435 01:00:26,610 --> 01:00:28,040 thank you Paolo for joining us 1436 01:00:28,320 --> 01:00:28,520 and 1437 01:00:30,240 --> 01:00:32,220 again welcome Jeppe as a new 1438 01:00:32,220 --> 01:00:32,860 host 1439 01:00:32,940 --> 01:00:33,600 Brittany, hello. 1440 01:00:35,280 --> 01:00:36,400 I am by. 1441 01:00:37,860 --> 01:00:38,720 Sorry, what? 1442 01:00:39,440 --> 01:00:40,480 I am by, like 1443 01:00:40,480 --> 01:00:41,380 we're saying goodbye. 1444 01:00:42,420 --> 01:00:48,060 Yeah. Definitely go find Paolo and 1445 01:00:48,440 --> 01:00:51,760 fund this custom render stuff because I also want custom renders. 1446 01:00:52,480 --> 01:00:53,120 With 1447 01:00:53,120 --> 01:00:54,680 that said, goodbye everyone. 1448 01:00:55,560 --> 01:00:55,960 Thank you. 1449 01:00:56,020 --> 01:00:56,340 See you. 1450 01:00:56,940 --> 01:00:57,020 Bye.