1 01:00:00,000 --> 01:00:01,166 Hey everyone, welcome back 2 01:00:01,166 --> 01:00:02,583 to the Laravel Creator Series. 3 01:00:03,083 --> 01:00:05,875 With me today is Patricio from Portugal, 4 01:00:06,166 --> 01:00:07,500 who is the creator of 5 01:00:07,500 --> 01:00:09,500 Mingel.js, Boxpop sites, 6 01:00:11,333 --> 01:00:12,458 a live streamer, he's 7 01:00:12,458 --> 01:00:13,541 just big into the community. 8 01:00:14,083 --> 01:00:16,166 So Patricio, did I get all that right? 9 01:00:16,625 --> 01:00:17,833 And if I miss anything, 10 01:00:17,833 --> 01:00:19,166 let me know right now. 11 01:00:20,916 --> 01:00:22,250 - Hello Eric, hello everyone. 12 01:00:22,750 --> 01:00:24,125 So you got it all right? 13 01:00:25,458 --> 01:00:26,375 Yeah, so that's me. 14 01:00:27,208 --> 01:00:30,708 And I guess, I guess 15 01:00:30,708 --> 01:00:31,958 not, I can't add anything. 16 01:00:32,416 --> 01:00:33,666 You did just perfect, yeah. 17 01:00:34,000 --> 01:00:35,583 - Excellent, excellent, all right. 18 01:00:36,000 --> 01:00:37,625 So to jump in first, the 19 01:00:37,625 --> 01:00:40,375 thing that you built that sort of, 20 01:00:40,375 --> 01:00:41,666 I heard sort of a lot of 21 01:00:41,666 --> 01:00:43,000 buzz about is Mingel.js. 22 01:00:44,500 --> 01:00:46,000 Can you sort of give me the highlights 23 01:00:46,208 --> 01:00:47,458 of what is Mingel.js? 24 01:00:49,000 --> 01:00:50,375 - Okay, so I'll start 25 01:00:50,375 --> 01:00:51,375 with the short version. 26 01:00:51,916 --> 01:00:53,333 (laughs) 27 01:00:53,833 --> 01:00:55,916 So Mingel.js is the 28 01:00:55,916 --> 01:00:59,791 opportunity that fills the gap 29 01:01:00,458 --> 01:01:03,000 to bring complex JavaScript components 30 01:01:03,208 --> 01:01:04,875 inside Livewire applications. 31 01:01:06,416 --> 01:01:09,750 So I do love Livewire and Alpine. 32 01:01:11,166 --> 01:01:12,666 Also I do love JavaScript. 33 01:01:14,333 --> 01:01:16,000 But in the end of the day, the more, 34 01:01:16,458 --> 01:01:18,750 the nearest I am to the server, 35 01:01:20,250 --> 01:01:21,333 the more productive and 36 01:01:21,333 --> 01:01:23,791 quick and I don't know, 37 01:01:24,125 --> 01:01:27,541 I just feel moving faster, right? 38 01:01:28,166 --> 01:01:30,000 And that's my kind of thing, 39 01:01:30,333 --> 01:01:32,875 the one-man army or two people projects. 40 01:01:33,458 --> 01:01:35,375 So I can speak only for that, 41 01:01:35,375 --> 01:01:38,750 not for 500 people project through 42 01:01:38,750 --> 01:01:40,250 several teams and so on. 43 01:01:41,166 --> 01:01:45,041 So yeah, I love Livewire and Alpine, 44 01:01:45,916 --> 01:01:49,291 but there's a point when it 45 01:01:49,291 --> 01:01:50,958 reaches some kind of complexity 46 01:01:51,250 --> 01:01:54,166 or maybe it didn't click all for me, 47 01:01:54,708 --> 01:01:56,791 but there are some, there 48 01:01:56,791 --> 01:01:58,375 is some scope, some extent 49 01:01:58,875 --> 01:02:01,833 where we can't just live on the server 50 01:02:02,000 --> 01:02:03,041 and having these 51 01:02:03,041 --> 01:02:06,625 small, how do you say them? 52 01:02:08,416 --> 01:02:10,541 The sprinkles of JavaScript, right? 53 01:02:10,541 --> 01:02:11,541 We have to go all in. 54 01:02:12,208 --> 01:02:15,166 So I didn't want to go inertia or SPA 55 01:02:15,666 --> 01:02:19,083 or any other thing I 56 01:02:19,083 --> 01:02:20,583 wanted to keep next to Livewire. 57 01:02:21,500 --> 01:02:23,458 So yeah, coming, I could 58 01:02:23,458 --> 01:02:25,166 come from other scenarios. 59 01:02:25,166 --> 01:02:26,625 This all started with 60 01:02:26,625 --> 01:02:28,375 scoped slots in Vue, 61 01:02:28,916 --> 01:02:30,375 the Adam Wadden's 62 01:02:30,375 --> 01:02:32,000 advanced Vue components course 63 01:02:32,583 --> 01:02:33,791 back in the day, 2018 64 01:02:33,791 --> 01:02:34,916 or something like so. 65 01:02:36,000 --> 01:02:38,166 So I started putting Vue 66 01:02:38,166 --> 01:02:40,625 with runtime compiler on Blade. 67 01:02:41,333 --> 01:02:43,250 So the JavaScript 68 01:02:43,250 --> 01:02:45,291 functions would be in JavaScript 69 01:02:45,625 --> 01:02:47,708 and server side would give the template 70 01:02:47,708 --> 01:02:50,000 for that JavaScript. 71 01:02:51,166 --> 01:02:52,916 But then Livewire 72 01:02:52,916 --> 01:02:54,458 started to make sense to me. 73 01:02:55,125 --> 01:02:56,833 I started using and I said, huh, 74 01:02:57,250 --> 01:02:58,000 let's bring them 75 01:02:58,000 --> 01:02:59,958 together, JavaScript and, 76 01:03:00,250 --> 01:03:01,625 I mean the heavy side of 77 01:03:01,625 --> 01:03:02,791 JavaScript and Livewire. 78 01:03:03,500 --> 01:03:04,166 So there we go. 79 01:03:04,833 --> 01:03:05,541 - That's awesome. 80 01:03:05,541 --> 01:03:08,375 So you can actually use like React or Vue 81 01:03:08,375 --> 01:03:11,541 or sort of anything, any existing code. 82 01:03:12,000 --> 01:03:12,916 Like I'm trying to 83 01:03:12,916 --> 01:03:14,208 think of like an example 84 01:03:14,208 --> 01:03:14,833 off the top of my head, 85 01:03:15,125 --> 01:03:17,500 if I go and find a React component 86 01:03:17,750 --> 01:03:19,166 that does everything I want, 87 01:03:19,166 --> 01:03:19,958 I can just pull that 88 01:03:19,958 --> 01:03:21,750 in and it just works. 89 01:03:22,958 --> 01:03:24,166 - That's it, that's the promise. 90 01:03:24,833 --> 01:03:25,625 - That's awesome. 91 01:03:25,625 --> 01:03:27,875 - And it seems it's delivering, yeah. 92 01:03:28,375 --> 01:03:31,541 - So like I was, I keep coming back to, 93 01:03:32,000 --> 01:03:32,375 cause you mentioned 94 01:03:32,375 --> 01:03:34,000 Adam, they have that project, 95 01:03:34,583 --> 01:03:36,541 I think it's Catalyst maybe, 96 01:03:36,875 --> 01:03:38,541 that's a lot of React components. 97 01:03:39,000 --> 01:03:40,666 So I could basically go and buy that 98 01:03:40,833 --> 01:03:42,458 and then just kind of hook it right in. 99 01:03:42,833 --> 01:03:44,000 Man, yeah, that's pretty sweet. 100 01:03:45,000 --> 01:03:48,416 You, for let's say, okay, 101 01:03:48,833 --> 01:03:50,208 a stack of blocks, like three 102 01:03:50,208 --> 01:03:51,500 sections on the website, right? 103 01:03:52,166 --> 01:03:53,791 And you wanna do Catalyst, 104 01:03:54,166 --> 01:03:56,041 so you just, you can for example, 105 01:03:56,375 --> 01:03:57,458 do three Livewire 106 01:03:57,458 --> 01:03:59,750 components, one for each section. 107 01:04:00,625 --> 01:04:01,541 And there you go, each 108 01:04:01,541 --> 01:04:02,541 one is a React component 109 01:04:02,916 --> 01:04:05,541 and they blend in just fine 110 01:04:05,541 --> 01:04:07,708 and you have Livewire, Event Bus, 111 01:04:08,166 --> 01:04:09,875 React, Events, you 112 01:04:09,875 --> 01:04:11,333 have all that in it, yeah. 113 01:04:11,666 --> 01:04:12,166 That's it. 114 01:04:12,166 --> 01:04:13,333 - That's awesome, yes. 115 01:04:13,500 --> 01:04:15,541 Well, how's the sort of, how's the 116 01:04:15,541 --> 01:04:16,875 community been so far 117 01:04:16,875 --> 01:04:17,458 as far as like 118 01:04:17,458 --> 01:04:19,458 embracing this and trying it out 119 01:04:19,458 --> 01:04:22,541 and all that, are they, is it getting a, 120 01:04:23,000 --> 01:04:24,583 I guess, heavy usage so far or? 121 01:04:26,333 --> 01:04:27,500 - Well, for me, it's heavy 122 01:04:28,000 --> 01:04:30,500 because it's my first package I'm 123 01:04:30,500 --> 01:04:31,833 actively maintaining 124 01:04:32,000 --> 01:04:33,208 and out there in the world. 125 01:04:33,833 --> 01:04:36,333 I'm going to the sheet sheet 126 01:04:36,333 --> 01:04:40,291 and going to say how many issues I've got 127 01:04:40,416 --> 01:04:43,583 because I don't know how much is heavy, 128 01:04:44,375 --> 01:04:50,916 but we have 13 issues and all fixed 129 01:04:51,541 --> 01:04:53,666 in a matter of, I don't know, few months. 130 01:04:54,000 --> 01:04:56,416 And yeah, people are using, they are 131 01:04:56,416 --> 01:04:57,750 finding some issues, 132 01:04:57,750 --> 01:04:58,666 we're solving them, 133 01:04:58,666 --> 01:04:59,875 people are solving them. 134 01:05:00,250 --> 01:05:02,166 So yeah, I'm feeling the 135 01:05:02,166 --> 01:05:04,416 other end of the community. 136 01:05:04,416 --> 01:05:07,250 I've been all, I don't know, 137 01:05:07,458 --> 01:05:09,000 over 10 years on the other end, 138 01:05:09,125 --> 01:05:10,083 like just consuming 139 01:05:10,083 --> 01:05:11,958 and producing, it's nice, 140 01:05:12,166 --> 01:05:12,833 it's very nice, 141 01:05:12,833 --> 01:05:14,083 creating is awesome, yeah. 142 01:05:14,583 --> 01:05:15,750 - That is awesome, yes. 143 01:05:16,625 --> 01:05:20,333 So I guess what sort of, I 144 01:05:20,333 --> 01:05:21,416 guess what gave you the idea 145 01:05:21,416 --> 01:05:23,916 to even start this or be like, 146 01:05:23,916 --> 01:05:27,666 hey, this is something that people need? 147 01:05:29,125 --> 01:05:29,916 - Right. 148 01:05:31,250 --> 01:05:36,083 So I have like four main things I 149 01:05:36,083 --> 01:05:36,166 consider to communicate it, 150 01:05:36,375 --> 01:05:41,333 but my first, my favorite two are that 151 01:05:42,458 --> 01:05:46,375 when the UI gets to be so much complex, 152 01:05:46,666 --> 01:05:48,541 I could show you an example 153 01:05:48,541 --> 01:05:51,666 that I'll try to articulate by words, 154 01:05:51,666 --> 01:05:54,625 but let's say a very complex data table 155 01:05:54,625 --> 01:05:58,041 with which goes to three tables, 156 01:05:58,041 --> 01:05:59,916 it's an example I can remind. 157 01:06:00,541 --> 01:06:03,666 So each row gets data 158 01:06:03,666 --> 01:06:04,666 from three rows, right? 159 01:06:04,666 --> 01:06:05,708 To assemble, to assemble, three rows, right, to 160 01:06:05,708 --> 01:06:08,583 assemble data in this table, 161 01:06:09,833 --> 01:06:11,208 in this HTML table, right? 162 01:06:12,125 --> 01:06:14,208 So I've done that in LiveWire 163 01:06:14,500 --> 01:06:16,666 and I've done that in JavaScript 164 01:06:17,500 --> 01:06:22,500 and my wiring, maybe my brain feels, 165 01:06:23,541 --> 01:06:25,000 it should go to JavaScript 166 01:06:25,000 --> 01:06:27,291 because it's so much intensive, 167 01:06:27,291 --> 01:06:28,625 but also I'm learning 168 01:06:28,625 --> 01:06:30,041 LiveWire still today. 169 01:06:31,375 --> 01:06:34,125 So maybe I didn't do it the best way, 170 01:06:35,166 --> 01:06:37,416 but I find that when 171 01:06:37,416 --> 01:06:38,833 the things get so complex, 172 01:06:40,666 --> 01:06:41,416 I don't know, I'll try to 173 01:06:41,416 --> 01:06:43,333 think of a better example, 174 01:06:43,333 --> 01:06:47,041 maybe a text editor like Notion 175 01:06:47,041 --> 01:06:49,625 or something like very dense, right? 176 01:06:51,250 --> 01:06:52,625 I think there's not one 177 01:06:52,625 --> 01:06:54,083 tool for all jobs, right? 178 01:06:54,541 --> 01:06:56,083 And I think here 179 01:06:56,083 --> 01:06:57,583 JavaScript is better suited 180 01:06:57,750 --> 01:06:59,250 in very, very complex cases, 181 01:06:59,750 --> 01:07:00,791 but maybe it's only me. 182 01:07:01,125 --> 01:07:03,791 So this was my main motivation. 183 01:07:04,291 --> 01:07:05,583 There's a point in time 184 01:07:05,583 --> 01:07:08,291 where from this DOM element down, 185 01:07:08,833 --> 01:07:11,500 I wanna just work it in different files, 186 01:07:11,500 --> 01:07:14,750 I love view with options 187 01:07:14,750 --> 01:07:16,041 API, that's my favorite. 188 01:07:17,916 --> 01:07:19,541 So I can just make separate 189 01:07:19,541 --> 01:07:21,250 files with template all in, 190 01:07:21,666 --> 01:07:24,791 not in, it just doesn't 191 01:07:24,791 --> 01:07:26,083 click for me the same way, 192 01:07:26,583 --> 01:07:29,500 doing Alpine in a bundle, right? 193 01:07:29,833 --> 01:07:33,583 It's in the template is in blade, right? 194 01:07:33,916 --> 01:07:36,125 But then you wanna make complex stuff. 195 01:07:36,416 --> 01:07:38,541 I don't feel it belongs in blade file. 196 01:07:38,541 --> 01:07:39,625 So I bring it to a 197 01:07:39,625 --> 01:07:41,458 JavaScript file and that's, 198 01:07:41,666 --> 01:07:43,041 I would say that's what I draw the limit 199 01:07:43,041 --> 01:07:45,625 and I would want to go JavaScript more. 200 01:07:47,000 --> 01:07:49,416 So this is first and second one 201 01:07:49,416 --> 01:07:50,708 is the third party 202 01:07:50,708 --> 01:07:53,083 plugins out there, right? 203 01:07:54,083 --> 01:07:56,250 I have one just sitting and waiting. 204 01:07:56,500 --> 01:07:58,041 I have some tweets about it. 205 01:07:58,750 --> 01:07:59,833 Do you like whiteboards? 206 01:08:01,500 --> 01:08:02,708 - Whiteboards, is that 207 01:08:02,708 --> 01:08:06,583 like physical whiteboards 208 01:08:06,583 --> 01:08:07,666 that you write on or? 209 01:08:08,041 --> 01:08:09,583 - Okay, so a virtual one. 210 01:08:10,166 --> 01:08:11,333 - Virtual whiteboard 211 01:08:11,333 --> 01:08:12,166 that you write on or? 212 01:08:13,333 --> 01:08:16,291 - So yeah, so for example, ExcaliDraw, 213 01:08:16,291 --> 01:08:18,541 do you know this app or middle or? 214 01:08:18,958 --> 01:08:19,000 - I do not. 215 01:08:19,000 --> 01:08:20,000 - You do not, okay. 216 01:08:20,458 --> 01:08:22,541 So it's basically where you sketch you, 217 01:08:22,541 --> 01:08:23,958 you get a rectangle and 218 01:08:23,958 --> 01:08:26,125 you type a word in there 219 01:08:26,458 --> 01:08:27,916 and you make a narrow 220 01:08:27,916 --> 01:08:30,500 and you draw some diagrams 221 01:08:30,875 --> 01:08:32,666 or some kind of stuff, but 222 01:08:32,666 --> 01:08:34,833 in a sense of a free hand. 223 01:08:35,291 --> 01:08:39,083 So not like a specific app for diagrams, 224 01:08:39,291 --> 01:08:41,625 but just whiteboarding like you would 225 01:08:41,625 --> 01:08:42,875 on the physical one, right? 226 01:08:43,458 --> 01:08:46,833 So thanks to this, I can 227 01:08:46,833 --> 01:08:48,291 have this kind of component 228 01:08:48,458 --> 01:08:50,083 because I'm very visual and 229 01:08:50,083 --> 01:08:51,333 I wanted to make something 230 01:08:51,333 --> 01:08:52,958 like this, but I just 231 01:08:52,958 --> 01:08:54,125 don't want to tie it together 232 01:08:54,333 --> 01:08:56,250 and launch a package because 233 01:08:56,250 --> 01:08:59,125 it doesn't make sense for me. 234 01:08:59,125 --> 01:09:00,791 I want to make some special functions. 235 01:09:01,416 --> 01:09:02,333 So we could have like 236 01:09:02,333 --> 01:09:05,166 libraries and whiteboarding 237 01:09:05,375 --> 01:09:09,250 with pieces, what can I say? 238 01:09:09,708 --> 01:09:12,125 So like small components, pieces of an, 239 01:09:12,583 --> 01:09:15,041 so think Figma, but lightweight, a 240 01:09:15,041 --> 01:09:16,291 lightweight Figma, right? 241 01:09:16,625 --> 01:09:18,500 So we could have community plugins. 242 01:09:18,500 --> 01:09:20,208 We would bring them all together. 243 01:09:20,208 --> 01:09:20,750 And because 244 01:09:20,750 --> 01:09:22,458 everything is on the database, 245 01:09:22,958 --> 01:09:24,458 a lot of our end point 246 01:09:24,458 --> 01:09:26,916 could stitch together 247 01:09:27,875 --> 01:09:29,041 a collection of components. 248 01:09:29,375 --> 01:09:30,166 And then you could do 249 01:09:30,166 --> 01:09:31,083 it in this whiteboard 250 01:09:31,083 --> 01:09:33,375 on your application, not somewhere else. 251 01:09:33,833 --> 01:09:34,708 - Oh, that's pretty sweet. 252 01:09:35,208 --> 01:09:35,416 Yes. 253 01:09:36,125 --> 01:09:38,458 Well, so when you were 254 01:09:38,458 --> 01:09:39,750 building this Mingle JS, 255 01:09:40,083 --> 01:09:42,291 what was the hardest 256 01:09:42,291 --> 01:09:44,375 part for you to figure out 257 01:09:45,250 --> 01:09:46,333 before you could publish it? 258 01:09:48,000 --> 01:09:52,625 - Okay, so I guess it was hard, 259 01:09:52,666 --> 01:09:53,666 but then the solution 260 01:09:53,666 --> 01:09:55,041 was very, very easy, 261 01:09:55,291 --> 01:09:56,500 which was to keep it 262 01:09:56,500 --> 01:09:58,208 working with wire navigate. 263 01:10:00,125 --> 01:10:02,916 So the SPA mode in LiveWire, 264 01:10:04,625 --> 01:10:05,291 there was someone 265 01:10:05,291 --> 01:10:06,833 complaining about it and, 266 01:10:07,666 --> 01:10:09,583 huh, how am I going to fix this? 267 01:10:10,708 --> 01:10:14,708 Because joining JavaScript in Blade, 268 01:10:15,041 --> 01:10:17,333 I was doing that for a long time, 269 01:10:17,333 --> 01:10:19,500 just not in the Mingle way, right? 270 01:10:19,791 --> 01:10:21,500 Not inside the LiveWire component, 271 01:10:21,500 --> 01:10:22,500 getting all that stuff. 272 01:10:24,041 --> 01:10:25,500 So it actually ended 273 01:10:25,500 --> 01:10:26,916 up being really easy, 274 01:10:26,916 --> 01:10:29,208 but I didn't have the 275 01:10:29,208 --> 01:10:31,875 minimal clue on how to do that. 276 01:10:32,458 --> 01:10:34,041 But in the end, it 277 01:10:34,041 --> 01:10:37,291 clicked that I could PR 278 01:10:37,416 --> 01:10:39,708 something into LiveWire, so I could 279 01:10:39,708 --> 01:10:40,833 listen to some event, 280 01:10:41,125 --> 01:10:42,458 but then I thought something. 281 01:10:42,875 --> 01:10:45,000 And it may seem like a Frankenstein 282 01:10:45,291 --> 01:10:46,875 if you go to the source code, 283 01:10:47,125 --> 01:10:50,500 because I'm booting up Alpine 284 01:10:50,750 --> 01:10:53,458 to then start the JavaScript component. 285 01:10:53,666 --> 01:10:54,958 And that's because if I 286 01:10:54,958 --> 01:10:57,250 adhere to the Alpine protocol, 287 01:10:57,875 --> 01:10:59,375 then I am good to go 288 01:10:59,375 --> 01:11:01,000 with LiveWire, right? 289 01:11:01,791 --> 01:11:03,666 So it's, in fact, 290 01:11:03,875 --> 01:11:05,083 it's an Alpine component 291 01:11:05,333 --> 01:11:07,666 that boots the JavaScript component. 292 01:11:08,458 --> 01:11:08,875 - Nice. 293 01:11:08,875 --> 01:11:09,958 - So yeah, I would say 294 01:11:09,958 --> 01:11:10,875 that that was the most-- 295 01:11:10,875 --> 01:11:11,250 - That was the 296 01:11:11,250 --> 01:11:13,791 hardest, was that one of those 297 01:11:14,166 --> 01:11:14,916 you were just laying in bed 298 01:11:14,916 --> 01:11:15,583 one night and you're like, 299 01:11:15,666 --> 01:11:16,750 "Ah, this is simple. 300 01:11:17,041 --> 01:11:18,791 Now I understand what the problem is." 301 01:11:19,166 --> 01:11:20,375 Or did it just sort of hit you? 302 01:11:21,375 --> 01:11:22,541 - I actually don't remember. 303 01:11:23,291 --> 01:11:24,875 So it wasn't that 304 01:11:24,875 --> 01:11:26,333 Eureka moment, I'm sorry. 305 01:11:27,625 --> 01:11:30,458 - But those weren't the best, right? 306 01:11:30,458 --> 01:11:31,666 When you're fighting 307 01:11:31,666 --> 01:11:33,583 some sort of bug for a week 308 01:11:33,583 --> 01:11:34,416 and you're like, "I just 309 01:11:34,416 --> 01:11:35,250 can't figure this out." 310 01:11:35,250 --> 01:11:35,708 And then all of a 311 01:11:35,708 --> 01:11:37,583 sudden, midnight, you're like, 312 01:11:37,583 --> 01:11:39,916 "Oh, this is all I had to do. 313 01:11:39,916 --> 01:11:40,750 What was I thinking?" 314 01:11:41,625 --> 01:11:44,250 - Right, we have so many of those. 315 01:11:45,666 --> 01:11:47,000 - Well, anything you 316 01:11:47,000 --> 01:11:48,291 wanna tell us about Mingo.js 317 01:11:48,291 --> 01:11:49,583 that maybe I've missed 318 01:11:49,583 --> 01:11:51,125 asking questions about or? 319 01:11:53,458 --> 01:11:59,166 - Well, I kind of built 320 01:11:59,166 --> 01:12:01,375 it, not wanting to make it... 321 01:12:04,375 --> 01:12:07,875 So I wanted to make it as 322 01:12:07,875 --> 01:12:10,958 a small connector, right? 323 01:12:11,875 --> 01:12:14,750 But how could I say? 324 01:12:14,916 --> 01:12:17,000 I would be willing to take it further 325 01:12:17,500 --> 01:12:19,833 if more people was using it as well. 326 01:12:20,125 --> 01:12:22,291 But for example, I'm thinking, 327 01:12:22,708 --> 01:12:24,666 or let me materialize something. 328 01:12:26,541 --> 01:12:27,958 You have this component, right? 329 01:12:29,416 --> 01:12:32,875 Or this DOM node where typically would be 330 01:12:32,916 --> 01:12:36,250 the first live wire element then. 331 01:12:36,750 --> 01:12:38,416 And then inside it's 332 01:12:38,416 --> 01:12:40,958 wire ignored and X ignored. 333 01:12:41,583 --> 01:12:43,875 And inside there's a client side 334 01:12:43,875 --> 01:12:45,291 rendering with it all, right? 335 01:12:46,541 --> 01:12:47,916 So we can see the 336 01:12:47,916 --> 01:12:49,875 component like some folk, 337 01:12:49,875 --> 01:12:51,208 it's called like the flash 338 01:12:51,208 --> 01:12:53,375 of unstyled content and so on. 339 01:12:53,541 --> 01:12:54,541 So you see the page 340 01:12:54,541 --> 01:12:57,250 flickering on an initial render, 341 01:12:57,250 --> 01:12:58,000 it can happen. 342 01:12:58,875 --> 01:13:00,875 So things like having a 343 01:13:00,875 --> 01:13:02,250 skeleton, like a loader, 344 01:13:02,250 --> 01:13:03,875 while it doesn't come the real thing 345 01:13:04,166 --> 01:13:07,708 and change it for the actual content. 346 01:13:09,041 --> 01:13:11,625 So mechanisms like this, 347 01:13:12,083 --> 01:13:15,000 or making like examples on 348 01:13:15,000 --> 01:13:18,500 how to use more fully on... 349 01:13:19,000 --> 01:13:21,291 So instead of sprinkling one component, 350 01:13:21,708 --> 01:13:24,625 how to mix and match several, right? 351 01:13:25,916 --> 01:13:27,833 I would want to go into these things. 352 01:13:28,708 --> 01:13:31,458 I just don't know if I should, maybe it 353 01:13:31,458 --> 01:13:32,541 will come with time. 354 01:13:32,833 --> 01:13:35,250 So I don't know if you can help me, 355 01:13:39,833 --> 01:13:42,208 deciding what should I 356 01:13:42,208 --> 01:13:43,416 just do it and that's it? 357 01:13:44,083 --> 01:13:46,041 Or should I just wait? 358 01:13:46,333 --> 01:13:48,333 Because I don't have a 359 01:13:48,333 --> 01:13:49,375 clue on how to do that. 360 01:13:50,000 --> 01:13:51,291 On how to decide, I'm sorry. 361 01:13:52,625 --> 01:13:54,208 - Yeah, that's sort of the 362 01:13:54,208 --> 01:13:56,708 crux of open source, right? 363 01:13:56,708 --> 01:14:01,375 It's trying to make decisions that the 364 01:14:01,375 --> 01:14:02,250 community will like, 365 01:14:02,250 --> 01:14:03,500 but then also that you 366 01:14:03,500 --> 01:14:04,791 want to put in and... 367 01:14:04,833 --> 01:14:09,000 Sort of do it that way, 368 01:14:09,000 --> 01:14:09,666 I guess is the right... 369 01:14:11,500 --> 01:14:14,375 I'm not articulated by questions very 370 01:14:14,375 --> 01:14:15,416 well in my statement. 371 01:14:16,208 --> 01:14:17,458 But yeah, it's sort of like, 372 01:14:17,708 --> 01:14:19,000 you want to do a certain thing 373 01:14:19,000 --> 01:14:20,208 and you think this is the right way, 374 01:14:20,208 --> 01:14:20,750 but then the community 375 01:14:20,750 --> 01:14:21,916 might have a different opinion. 376 01:14:24,083 --> 01:14:26,708 I guess as far as like you're concerned, 377 01:14:26,708 --> 01:14:27,333 like what's the best 378 01:14:27,333 --> 01:14:28,541 way to give you feedback 379 01:14:28,541 --> 01:14:29,791 and to kind of get in on 380 01:14:29,791 --> 01:14:31,875 these questions you might have 381 01:14:32,458 --> 01:14:33,166 that the community might 382 01:14:33,166 --> 01:14:34,875 want to be involved in. 383 01:14:34,875 --> 01:14:35,125 - Right. 384 01:14:36,583 --> 01:14:38,708 Yeah, I wouldn't know where to start. 385 01:14:38,708 --> 01:14:40,583 I would like to make it bigger 386 01:14:40,583 --> 01:14:43,083 than just dropping off one component. 387 01:14:43,500 --> 01:14:46,583 Like I am all in not 388 01:14:46,583 --> 01:14:51,125 making a tedious job. 389 01:14:51,333 --> 01:14:52,375 So everything that I 390 01:14:52,375 --> 01:14:54,833 could make to help people 391 01:14:55,458 --> 01:14:57,041 not having to do repetitive stuff. 392 01:14:57,375 --> 01:14:58,708 So like assembling some 393 01:14:58,708 --> 01:15:00,291 systematic things for, 394 01:15:00,333 --> 01:15:00,916 I don't know for, 395 01:15:02,625 --> 01:15:04,500 you want to do an application layout 396 01:15:04,500 --> 01:15:05,625 which has a other 397 01:15:05,625 --> 01:15:07,500 sidebar and content, right? 398 01:15:07,500 --> 01:15:09,125 So let's do all these. 399 01:15:09,375 --> 01:15:10,708 How would you do it all in 400 01:15:10,708 --> 01:15:12,166 view or all in JavaScript, 401 01:15:12,166 --> 01:15:15,083 for example, or those sorts of things. 402 01:15:15,083 --> 01:15:16,375 But I also don't want 403 01:15:16,375 --> 01:15:18,375 to shape the package 404 01:15:18,750 --> 01:15:24,000 based on some active one voice, you know, 405 01:15:24,000 --> 01:15:25,583 that, oh, everyone 406 01:15:25,583 --> 01:15:27,375 wants this, but maybe not. 407 01:15:27,375 --> 01:15:28,958 Maybe it's just one person needs. 408 01:15:30,333 --> 01:15:31,583 - Yes, for sure. 409 01:15:32,250 --> 01:15:32,916 - That's the difficult 410 01:15:32,916 --> 01:15:34,666 part, but I guess I'll, 411 01:15:38,125 --> 01:15:40,250 I'm welcoming any input on that. 412 01:15:40,708 --> 01:15:42,375 But for the time being, 413 01:15:42,375 --> 01:15:43,541 I'm just going organic, 414 01:15:44,208 --> 01:15:47,333 going as it, going with the flow. 415 01:15:47,541 --> 01:15:50,708 I'm using it for myself and that's it. 416 01:15:50,708 --> 01:15:51,500 In the end of the day, 417 01:15:51,500 --> 01:15:52,916 other people are also 418 01:15:52,916 --> 01:15:53,875 seeing value in that. 419 01:15:54,125 --> 01:15:57,125 So I'm happy with that as it is. 420 01:15:57,625 --> 01:15:58,583 - For sure, for sure. 421 01:15:59,500 --> 01:16:01,125 So you've been sort of 422 01:16:01,125 --> 01:16:02,250 tweeting about something else 423 01:16:02,250 --> 01:16:03,125 you've been working on that 424 01:16:03,125 --> 01:16:04,125 you're very excited about. 425 01:16:04,500 --> 01:16:05,041 What is that? 426 01:16:07,208 --> 01:16:08,083 - Okay, so you must be 427 01:16:08,083 --> 01:16:09,875 referring to PHP WASM? 428 01:16:10,541 --> 01:16:11,750 - Yes. - I guess. 429 01:16:13,166 --> 01:16:14,541 Okay, other than Boxbot. 430 01:16:15,208 --> 01:16:16,208 - I think that's the one you said. 431 01:16:16,625 --> 01:16:18,125 I'm going to have a secret release. 432 01:16:19,333 --> 01:16:20,000 The last tweet I seen 433 01:16:20,000 --> 01:16:21,125 was you said next Tuesday, 434 01:16:21,125 --> 01:16:22,250 but this might've been 435 01:16:22,250 --> 01:16:23,166 actually two weeks ago. 436 01:16:24,083 --> 01:16:26,000 - Oh, right, right, right, right, yeah. 437 01:16:26,958 --> 01:16:28,833 Okay, so that's, for 438 01:16:28,833 --> 01:16:30,625 me, that's uber exciting. 439 01:16:31,458 --> 01:16:34,083 Maybe it's ahead of time or 440 01:16:34,083 --> 01:16:36,083 maybe it's just not there. 441 01:16:36,083 --> 01:16:39,166 Maybe it's just me seeing 442 01:16:39,166 --> 01:16:41,916 it because it will be very, 443 01:16:43,583 --> 01:16:44,958 I don't know, I don't know how it will, 444 01:16:44,958 --> 01:16:46,541 you tell me how it sounds, okay? 445 01:16:47,000 --> 01:16:50,500 So I'll split it into two parts. 446 01:16:51,375 --> 01:16:53,750 So WebAssembly is 447 01:16:53,750 --> 01:16:55,125 running in the browser, right? 448 01:16:56,208 --> 01:16:58,416 So what, not me, but 449 01:16:58,416 --> 01:17:00,333 Sean Morris has done, 450 01:17:00,750 --> 01:17:03,500 the open source is out there 451 01:17:03,625 --> 01:17:05,750 and I've been in touch with him 452 01:17:05,750 --> 01:17:07,416 because I want to 453 01:17:07,416 --> 01:17:09,666 make something a reality, 454 01:17:09,666 --> 01:17:12,875 which is trademarks 455 01:17:12,875 --> 01:17:15,458 aside, codes and boxes, right? 456 01:17:15,458 --> 01:17:17,916 So we wanna play with PHP, right? 457 01:17:18,375 --> 01:17:20,583 But we always need a 458 01:17:20,583 --> 01:17:22,000 server somewhere, right? 459 01:17:22,958 --> 01:17:25,583 To this day, I'm 460 01:17:25,583 --> 01:17:26,666 pretty happy with solutions 461 01:17:26,833 --> 01:17:30,375 like IDX, Codespaces, but above all, 462 01:17:30,708 --> 01:17:32,916 Gitpod has been one of my favorites. 463 01:17:33,541 --> 01:17:35,666 You can see a video of that. 464 01:17:36,500 --> 01:17:38,041 I've made it for Filament, 465 01:17:38,041 --> 01:17:39,833 so in Filament's YouTube channel, 466 01:17:40,125 --> 01:17:42,416 the demo is running in Gitpod 467 01:17:42,416 --> 01:17:44,166 and you can actually run it there. 468 01:17:44,916 --> 01:17:46,375 But, and you can do 469 01:17:46,375 --> 01:17:47,833 this with more things, 470 01:17:47,833 --> 01:17:48,958 but you do need a 471 01:17:48,958 --> 01:17:50,500 server, you do need an account, 472 01:17:50,500 --> 01:17:52,333 you do need all sorts of things. 473 01:17:53,541 --> 01:17:54,166 To make it work. 474 01:17:55,166 --> 01:17:59,333 And with WebAssembly and a service worker 475 01:18:00,166 --> 01:18:02,250 can have PHP CGI 476 01:18:02,250 --> 01:18:04,791 running on a separate thread 477 01:18:04,875 --> 01:18:09,041 from the browser window instance, right? 478 01:18:10,375 --> 01:18:11,958 So this would allow us 479 01:18:11,958 --> 01:18:13,375 to bring the whole server 480 01:18:13,708 --> 01:18:16,833 to the, not will allow us, 481 01:18:16,833 --> 01:18:18,208 it's already allowing, right? 482 01:18:19,125 --> 01:18:22,958 (laughs) So the whole server gets downloaded, 483 01:18:23,208 --> 01:18:25,666 you can have it on a S, on GitHub pages 484 01:18:25,666 --> 01:18:27,000 or an S3 bucket or 485 01:18:27,000 --> 01:18:29,000 whatever, all static, right? 486 01:18:29,291 --> 01:18:30,625 But then it goes down to 487 01:18:30,625 --> 01:18:32,750 your browser, to your computer 488 01:18:32,958 --> 01:18:34,666 and boots the server right there. 489 01:18:36,625 --> 01:18:39,750 So this would allow, I have 490 01:18:39,750 --> 01:18:42,666 a passion, a touch for this, 491 01:18:42,666 --> 01:18:46,416 which is to communicate, 492 01:18:47,708 --> 01:18:48,375 I wanna give you a 493 01:18:48,375 --> 01:18:49,583 snippet of code, right? 494 01:18:50,000 --> 01:18:52,875 But then either it's just partial, 495 01:18:52,875 --> 01:18:53,500 there's missing 496 01:18:53,500 --> 01:18:55,208 context or something, right? 497 01:18:56,000 --> 01:18:57,791 So JavaScript folks have 498 01:18:57,791 --> 01:18:59,416 these since like forever, right? 499 01:18:59,416 --> 01:19:02,333 With code pens and those sorts of things, 500 01:19:02,583 --> 01:19:03,958 the problem is solved if 501 01:19:03,958 --> 01:19:06,541 it's a front end issue. 502 01:19:07,208 --> 01:19:09,125 But, and also backend 503 01:19:09,125 --> 01:19:11,583 now with the stack pleats, 504 01:19:11,583 --> 01:19:12,291 I would say, right? 505 01:19:12,458 --> 01:19:14,583 The web containers, they have node and on 506 01:19:15,250 --> 01:19:16,375 in running in the browser. 507 01:19:17,958 --> 01:19:19,916 So these would facilitate 508 01:19:19,916 --> 01:19:23,291 everyone to just switch, 509 01:19:24,083 --> 01:19:25,125 not switch, sorry, 510 01:19:26,083 --> 01:19:27,791 sharing snippets or projects 511 01:19:27,791 --> 01:19:28,791 or pieces of 512 01:19:28,791 --> 01:19:31,541 functionality just on a link, right? 513 01:19:31,708 --> 01:19:33,666 So here, look how I've done this. 514 01:19:34,166 --> 01:19:35,291 So like the past been, 515 01:19:35,708 --> 01:19:36,958 but with an entire web 516 01:19:36,958 --> 01:19:39,041 server there, PHP web server. 517 01:19:39,583 --> 01:19:41,875 So that's exciting for me. 518 01:19:42,500 --> 01:19:43,500 - I agree, yes. 519 01:19:43,666 --> 01:19:45,791 And especially, I mentioned in the intro 520 01:19:45,958 --> 01:19:46,958 that you do a lot of live streaming 521 01:19:47,500 --> 01:19:50,250 and I assume it's really good for that. 522 01:19:50,458 --> 01:19:51,583 Like once you've, like 523 01:19:51,583 --> 01:19:52,333 once you're going through 524 01:19:52,333 --> 01:19:53,833 like an explaining stuff 525 01:19:53,833 --> 01:19:55,583 through a video or through whatever 526 01:19:55,583 --> 01:19:57,333 and then you just take that code 527 01:19:57,333 --> 01:19:59,083 and upload it to something like this 528 01:19:59,083 --> 01:20:01,375 and then people can actually go there 529 01:20:01,375 --> 01:20:02,625 and sort of if they're 530 01:20:02,625 --> 01:20:04,208 rewatching the live stream, 531 01:20:04,208 --> 01:20:05,000 they can actually 532 01:20:05,000 --> 01:20:06,541 follow along as you're going, 533 01:20:06,791 --> 01:20:08,625 which that seems really handy. 534 01:20:09,625 --> 01:20:13,125 - Yeah, I think so because I mean, 535 01:20:13,541 --> 01:20:14,875 mechanisms are here, right? 536 01:20:14,958 --> 01:20:16,458 If you just share a GitHub repo, 537 01:20:16,916 --> 01:20:18,958 everyone can go and make it work, 538 01:20:19,416 --> 01:20:20,750 but that's a ton of work 539 01:20:20,833 --> 01:20:22,500 or maybe they don't 540 01:20:22,500 --> 01:20:23,625 have a local environment 541 01:20:23,833 --> 01:20:27,375 or maybe this is only Docker 542 01:20:27,583 --> 01:20:30,125 or maybe this is missing some step 543 01:20:30,125 --> 01:20:31,750 or when you have a 544 01:20:31,750 --> 01:20:33,166 link and everything works, 545 01:20:33,166 --> 01:20:35,125 it just works and it's one link. 546 01:20:35,458 --> 01:20:37,000 Have you increased the 547 01:20:37,000 --> 01:20:39,291 probability of people doing that, 548 01:20:39,291 --> 01:20:39,541 right? 549 01:20:39,541 --> 01:20:41,833 Because one click, no 550 01:20:41,833 --> 01:20:43,750 logins, no setups, no nothing. 551 01:20:44,500 --> 01:20:47,000 So that's very appealing to me. 552 01:20:47,750 --> 01:20:48,458 - Yeah, that is sweet. 553 01:20:48,958 --> 01:20:51,041 So would you be able to, I assume since 554 01:20:51,041 --> 01:20:51,833 it's a whole web server, 555 01:20:51,833 --> 01:20:53,250 you can like, you'll be able to install 556 01:20:53,250 --> 01:20:54,375 like composer packages 557 01:20:54,791 --> 01:20:56,375 and pretty much whatever the, 558 01:20:56,916 --> 01:20:57,458 whatever your sharing 559 01:20:57,458 --> 01:20:59,083 needs or are you thinking 560 01:20:59,250 --> 01:21:00,041 that might not work? 561 01:21:00,375 --> 01:21:01,166 - Actually, yes, 562 01:21:01,166 --> 01:21:02,666 still not today, I think, 563 01:21:03,416 --> 01:21:05,458 because Packages doesn't allow, 564 01:21:07,000 --> 01:21:09,583 I'm not 100% sure, but I think to today, 565 01:21:10,041 --> 01:21:11,000 they don't allow cores, 566 01:21:11,291 --> 01:21:12,666 so we cannot download 567 01:21:12,666 --> 01:21:14,416 them from inside the browser, 568 01:21:15,541 --> 01:21:16,833 meaning we could do that 569 01:21:16,833 --> 01:21:18,708 like server side with a proxy, 570 01:21:19,166 --> 01:21:20,333 like downloading or 571 01:21:20,333 --> 01:21:22,166 all the vendor operations 572 01:21:22,166 --> 01:21:24,250 could happen on the server. 573 01:21:25,125 --> 01:21:26,791 But yeah, it's totally possible 574 01:21:26,791 --> 01:21:30,500 and there are some roadblocks to, 575 01:21:32,708 --> 01:21:35,541 some hurdles to pass. 576 01:21:36,958 --> 01:21:39,250 We need to, sorry, to 577 01:21:39,250 --> 01:21:40,416 address some issues. 578 01:21:41,291 --> 01:21:42,166 - But we'll get there 579 01:21:42,166 --> 01:21:43,375 eventually, I would say. 580 01:21:44,500 --> 01:21:47,208 I'm just, you can go, sorry, 581 01:21:47,583 --> 01:21:50,500 you can go to playwithladeval.com. 582 01:21:50,791 --> 01:21:51,333 - Yeah. 583 01:21:51,541 --> 01:21:52,833 - And there's a Ladeval 584 01:21:52,833 --> 01:21:55,500 new application ready to run. 585 01:21:56,875 --> 01:21:58,791 You can see the video there, so, 586 01:22:00,166 --> 01:22:02,541 and changing stuff, changing the files 587 01:22:02,708 --> 01:22:05,375 and updating in real time, that's 588 01:22:05,375 --> 01:22:06,500 happening right now. 589 01:22:07,125 --> 01:22:08,041 Just the Composer 590 01:22:08,041 --> 01:22:10,958 Packages and NPM compilations 591 01:22:12,666 --> 01:22:16,875 are setting it apart from the typical 592 01:22:17,000 --> 01:22:19,083 local development environment. 593 01:22:20,000 --> 01:22:20,583 - Right, yeah. 594 01:22:20,916 --> 01:22:22,583 I was sort of, this was, 595 01:22:22,583 --> 01:22:23,833 that was a selfish question 596 01:22:23,833 --> 01:22:25,625 because you know, at Ladeval News, 597 01:22:25,625 --> 01:22:26,916 we wanna cover the community 598 01:22:26,916 --> 01:22:28,375 packages and stuff like that. 599 01:22:28,708 --> 01:22:29,916 And it seems like we're always, 600 01:22:30,541 --> 01:22:31,083 having a local, 601 01:22:31,875 --> 01:22:32,958 pulling them down locally, 602 01:22:33,125 --> 01:22:34,458 trying to see how they work. 603 01:22:35,166 --> 01:22:36,458 It would be nice to be able to just like, 604 01:22:36,458 --> 01:22:37,333 hey, go to this thing 605 01:22:37,333 --> 01:22:38,791 and boom, it's there 606 01:22:38,791 --> 01:22:39,333 and we could take 607 01:22:39,333 --> 01:22:40,708 screenshots and do all of our stuff. 608 01:22:41,458 --> 01:22:42,291 But sounds like maybe 609 01:22:42,291 --> 01:22:43,375 one day, you never know. 610 01:22:44,333 --> 01:22:45,666 - It's not far ahead. 611 01:22:46,041 --> 01:22:47,250 I mean, what you need 612 01:22:47,250 --> 01:22:50,291 for that right today 613 01:22:50,458 --> 01:22:52,083 is you just have the vendor 614 01:22:52,083 --> 01:22:53,833 directory inside the git repo 615 01:22:54,708 --> 01:22:56,250 and the .env file as well. 616 01:22:56,666 --> 01:22:58,583 So that's not very traditional, 617 01:22:59,791 --> 01:23:01,791 but that repo is meant to 618 01:23:01,791 --> 01:23:04,500 be public and open and all. 619 01:23:04,500 --> 01:23:08,000 So it's not the 620 01:23:08,000 --> 01:23:10,875 mainstream way of doing things, 621 01:23:10,875 --> 01:23:13,041 but if it's only for that, 622 01:23:13,041 --> 01:23:14,333 you can do that right away. 623 01:23:14,791 --> 01:23:16,791 Or Gitbot may be an 624 01:23:16,791 --> 01:23:18,541 option for you as well. 625 01:23:18,541 --> 01:23:21,208 I can show you in the end, I guess, or. 626 01:23:21,625 --> 01:23:22,541 - Yeah, yeah. 627 01:23:22,708 --> 01:23:25,375 We'll do that off the podcast. 628 01:23:26,250 --> 01:23:27,083 But yeah, that sounds cool. 629 01:23:27,875 --> 01:23:30,416 And then the other thing that you've got 630 01:23:30,916 --> 01:23:33,583 since we mentioned it is VoxPop. 631 01:23:34,375 --> 01:23:35,250 So tell us a little 632 01:23:35,250 --> 01:23:36,333 bit about what that is. 633 01:23:38,125 --> 01:23:38,500 - Sure. 634 01:23:38,833 --> 01:23:41,125 I'll get back to the PHP WASM later. 635 01:23:41,500 --> 01:23:42,333 I forgot something. 636 01:23:42,750 --> 01:23:45,083 - Oh, no, no, we'll step back. 637 01:23:45,083 --> 01:23:46,750 Let's go ahead and finish that. 638 01:23:47,375 --> 01:23:48,041 - Okay, sure. 639 01:23:48,625 --> 01:23:50,375 So this is the first part 640 01:23:50,375 --> 01:23:53,208 of the WASM interest of mine 641 01:23:54,125 --> 01:23:55,458 where I see a huge value. 642 01:23:55,458 --> 01:23:56,666 So this is the first part, 643 01:23:56,666 --> 01:23:58,583 like having the web server. 644 01:23:59,625 --> 01:24:02,958 So all in all, it's a zip file and boom, 645 01:24:03,208 --> 01:24:04,541 you get a web server 646 01:24:04,541 --> 01:24:06,000 running in the browser. 647 01:24:06,833 --> 01:24:07,750 I don't see it. 648 01:24:08,083 --> 01:24:10,708 I don't foresee it using that 649 01:24:10,791 --> 01:24:12,416 for offline first 650 01:24:12,416 --> 01:24:14,250 applications or stuff like that. 651 01:24:14,625 --> 01:24:17,041 I think much needs to be done. 652 01:24:17,500 --> 01:24:19,166 But for the near future, 653 01:24:19,541 --> 01:24:21,541 code sandboxes, I think, yes. 654 01:24:22,583 --> 01:24:23,833 But there's the second part, 655 01:24:23,916 --> 01:24:25,791 which is using only PHP 656 01:24:25,791 --> 01:24:27,875 WASM in the main thread, 657 01:24:28,333 --> 01:24:30,125 meaning you can run, 658 01:24:30,125 --> 01:24:32,583 you know, script type, 659 01:24:33,208 --> 01:24:34,416 equals text JavaScript. 660 01:24:35,583 --> 01:24:37,000 So now there is script 661 01:24:37,000 --> 01:24:40,916 type text slash PHP, you know? 662 01:24:41,208 --> 01:24:44,125 So you run PHP in, 663 01:24:44,333 --> 01:24:45,916 you put PHP in the DOM, 664 01:24:45,916 --> 01:24:47,250 PHP code in the DOM and 665 01:24:47,250 --> 01:24:48,666 you just run it, you know? 666 01:24:48,916 --> 01:24:50,500 And I think this is bonkers. 667 01:24:50,500 --> 01:24:51,375 And I don't know if 668 01:24:51,375 --> 01:24:53,500 people just don't appreciate it 669 01:24:53,500 --> 01:24:54,791 or they don't know about 670 01:24:54,791 --> 01:24:56,916 it, but for me, it's bonkers. 671 01:24:57,500 --> 01:24:58,250 And there's an 672 01:24:58,250 --> 01:25:00,333 interoperability with JavaScript. 673 01:25:01,375 --> 01:25:04,291 So I don't know, you tell me. 674 01:25:05,166 --> 01:25:08,041 - Well, going back way back in history, 675 01:25:08,250 --> 01:25:10,041 like PHP like two and three, 676 01:25:10,041 --> 01:25:11,875 they used to could do that, like the 677 01:25:11,875 --> 01:25:13,208 script type text PHP. 678 01:25:14,083 --> 01:25:14,708 But I thought they 679 01:25:14,708 --> 01:25:15,875 deprecated that at one point, 680 01:25:15,875 --> 01:25:17,625 but I guess that's not true 681 01:25:17,625 --> 01:25:20,375 or is it sort of different now, 682 01:25:20,375 --> 01:25:21,166 what you're thinking 683 01:25:21,166 --> 01:25:22,708 than the old Tommy wife? 684 01:25:23,625 --> 01:25:25,708 - I don't know the first way, 685 01:25:25,708 --> 01:25:27,458 but this one is in web assembly. 686 01:25:28,250 --> 01:25:31,291 So I would bet seriously that it's-- 687 01:25:31,333 --> 01:25:34,166 - Yeah, so the old way, you know how, 688 01:25:34,166 --> 01:25:36,666 like if you're in say like an HTML file, 689 01:25:36,666 --> 01:25:38,083 you can do open PHP and 690 01:25:38,083 --> 01:25:40,000 then whatever PHP code you want 691 01:25:40,000 --> 01:25:41,666 and then close the PHP, you 692 01:25:41,666 --> 01:25:43,208 know, with the question mark. 693 01:25:44,250 --> 01:25:45,958 - That would run server 694 01:25:45,958 --> 01:25:48,291 side, no entirely different. 695 01:25:48,541 --> 01:25:49,750 - Yes, but no, but see 696 01:25:49,750 --> 01:25:50,875 back in the old days, 697 01:25:50,875 --> 01:25:51,625 you could actually, there 698 01:25:51,625 --> 01:25:53,458 was two ways you could run PHP, 699 01:25:53,750 --> 01:25:56,041 like it's still server side, right? 700 01:25:56,250 --> 01:25:57,166 So you would open and close 701 01:25:57,166 --> 01:25:58,458 it the normal traditional way, 702 01:25:58,458 --> 01:25:59,041 but then you could also 703 01:25:59,041 --> 01:26:00,583 do script type text PHP 704 01:26:01,166 --> 01:26:02,416 and close the script tag and that would 705 01:26:02,416 --> 01:26:03,541 still run server side 706 01:26:04,250 --> 01:26:05,291 and that was just sort of a 707 01:26:05,291 --> 01:26:08,166 way you could sort of use PHP. 708 01:26:08,666 --> 01:26:09,541 This was, this is way 709 01:26:09,541 --> 01:26:11,375 back like early 2000s, 710 01:26:11,375 --> 01:26:14,958 probably like PHP for maybe like 4.3. 711 01:26:15,750 --> 01:26:17,000 - Oh, maybe for my time then. 712 01:26:17,000 --> 01:26:18,500 - That was way back, so 713 01:26:18,500 --> 01:26:20,291 there's my little PHP history lesson 714 01:26:20,291 --> 01:26:21,208 is you used to could 715 01:26:21,208 --> 01:26:24,041 actually use that in as a normal, 716 01:26:24,333 --> 01:26:26,458 like in your HTML files for, 717 01:26:26,833 --> 01:26:28,041 or in your PHP files basically. 718 01:26:29,250 --> 01:26:30,958 But anyway. - I look into that, yeah. 719 01:26:31,083 --> 01:26:31,541 - Yeah. 720 01:26:31,541 --> 01:26:32,833 - So yeah, this is different. 721 01:26:32,833 --> 01:26:33,875 This is really running 722 01:26:33,875 --> 01:26:35,916 PHP, like you click a button 723 01:26:36,125 --> 01:26:37,791 and this PHP runs on 724 01:26:37,791 --> 01:26:39,000 the click of that button. 725 01:26:39,000 --> 01:26:40,666 That's it locally, so. 726 01:26:40,833 --> 01:26:41,125 - Nice. 727 01:26:42,291 --> 01:26:43,041 That's awesome, yes. 728 01:26:44,291 --> 01:26:45,291 - It's just bonkers to 729 01:26:45,291 --> 01:26:47,375 me and I think many folks, 730 01:26:47,583 --> 01:26:49,041 maybe this number is 731 01:26:49,041 --> 01:26:51,166 reducing, but where I come from 732 01:26:51,791 --> 01:26:52,916 and I think still today, 733 01:26:53,333 --> 01:26:54,916 there are many backend developers 734 01:26:55,083 --> 01:26:57,125 that maybe are scared or 735 01:26:57,125 --> 01:26:58,291 never got into JavaScript 736 01:26:58,750 --> 01:27:00,250 or they don't want to, right? 737 01:27:01,000 --> 01:27:03,541 And I don't know if it will happen, 738 01:27:03,541 --> 01:27:04,833 but it's possible to have 739 01:27:04,833 --> 01:27:06,541 a full stack PHP, you know? 740 01:27:06,541 --> 01:27:07,416 So like you don't write 741 01:27:07,416 --> 01:27:10,041 any JavaScript in a project. 742 01:27:10,916 --> 01:27:12,708 So this is possible, so that's why. 743 01:27:14,500 --> 01:27:15,500 I'm going bonkers 744 01:27:15,500 --> 01:27:16,833 with that idea, but yeah, 745 01:27:16,833 --> 01:27:19,250 let's see what happens, yeah. 746 01:27:19,791 --> 01:27:21,458 - For sure, I'm sort 747 01:27:21,458 --> 01:27:22,166 of that way, you know, 748 01:27:22,166 --> 01:27:24,250 that's why I really came 749 01:27:24,250 --> 01:27:25,583 to Embrace Lavire from, 750 01:27:25,958 --> 01:27:26,541 you know, as soon as it 751 01:27:26,541 --> 01:27:27,541 was announced and launched, 752 01:27:27,750 --> 01:27:29,625 I was like, this just makes sense 753 01:27:29,625 --> 01:27:30,333 and I don't have to 754 01:27:30,333 --> 01:27:32,333 fight with Vue or React 755 01:27:32,583 --> 01:27:33,375 or any of these other 756 01:27:33,375 --> 01:27:35,750 things backbone, you know? 757 01:27:35,958 --> 01:27:38,083 So it's, to me, that was just 758 01:27:38,083 --> 01:27:39,000 life-changing there, 759 01:27:39,000 --> 01:27:40,625 so I can't imagine, you know, 760 01:27:40,625 --> 01:27:41,666 what the future's gonna bring. 761 01:27:41,666 --> 01:27:42,416 I think it's gonna be awesome 762 01:27:42,416 --> 01:27:44,000 seeing all these cool things 763 01:27:44,041 --> 01:27:45,666 that's sort of being worked on. 764 01:27:46,875 --> 01:27:47,916 So yeah, very exciting. 765 01:27:49,708 --> 01:27:51,333 - Let's see what the future brings. 766 01:27:52,875 --> 01:27:56,125 - Yes, all right, so now let's jump in. 767 01:27:56,166 --> 01:27:56,708 So you're building 768 01:27:56,708 --> 01:28:00,250 Voxpop, so tell us what that is. 769 01:28:01,500 --> 01:28:03,208 - Oh, sorry, okay, so 770 01:28:03,208 --> 01:28:05,500 Voxpop is a website builder 771 01:28:05,750 --> 01:28:08,541 for non-tech people, the 772 01:28:08,541 --> 01:28:11,333 audience for the platform. 773 01:28:12,458 --> 01:28:15,333 So everyone can just come in 774 01:28:15,333 --> 01:28:17,208 and like shoot some 775 01:28:17,208 --> 01:28:19,000 pre-made blocks, right? 776 01:28:19,208 --> 01:28:20,458 You change text, you change 777 01:28:20,458 --> 01:28:21,958 pictures, boom, that's it. 778 01:28:22,750 --> 01:28:24,708 And I'm co-building it with Shruti, 779 01:28:25,083 --> 01:28:26,500 you might know from the 780 01:28:26,500 --> 01:28:28,500 content creation on YouTube 781 01:28:28,833 --> 01:28:32,666 and from the community, so in the 782 01:28:32,666 --> 01:28:33,500 sentence, that's it. 783 01:28:34,375 --> 01:28:38,833 - So are you going to, I guess, 784 01:28:39,500 --> 01:28:41,083 like say I have a site already, 785 01:28:41,083 --> 01:28:42,500 I can just like kind of pull this in 786 01:28:42,500 --> 01:28:43,541 and I will automatically 787 01:28:43,541 --> 01:28:45,083 get the sort of a block, 788 01:28:46,166 --> 01:28:47,208 you know, site builder, 789 01:28:47,208 --> 01:28:48,625 block builder type thing, 790 01:28:48,625 --> 01:28:50,541 or is it more like it needs 791 01:28:50,541 --> 01:28:52,041 to like hook into existing 792 01:28:52,041 --> 01:28:53,833 like CMSs and things like that? 793 01:28:55,083 --> 01:28:56,958 - Right, so it's 794 01:28:56,958 --> 01:28:59,208 different, so everything is hosted. 795 01:29:00,833 --> 01:29:03,333 We are thinking, not thinking, 796 01:29:03,333 --> 01:29:04,250 we are going to have a 797 01:29:04,250 --> 01:29:06,708 free tier and a paid tier 798 01:29:07,791 --> 01:29:09,916 or multiple still in, 799 01:29:11,750 --> 01:29:13,291 still a work in progress, 800 01:29:13,291 --> 01:29:17,083 what goes where, but so 801 01:29:17,083 --> 01:29:18,750 everything happens in our end. 802 01:29:19,625 --> 01:29:23,958 So it's a no code, 803 01:29:25,541 --> 01:29:26,625 application, right? 804 01:29:26,666 --> 01:29:28,125 From the user standpoint, 805 01:29:29,041 --> 01:29:33,000 you don't get to make any decisions 806 01:29:33,291 --> 01:29:34,583 or you don't make any HTML, 807 01:29:34,916 --> 01:29:36,166 you don't make any queries, 808 01:29:36,166 --> 01:29:37,791 you don't make any code. 809 01:29:38,083 --> 01:29:40,333 We might think to allow to put some CSS 810 01:29:40,708 --> 01:29:42,750 for some advanced use 811 01:29:42,750 --> 01:29:45,833 cases, but that's not the goal. 812 01:29:46,041 --> 01:29:50,250 The goal is for people who are not 813 01:29:50,250 --> 01:29:51,000 technical at all, right? 814 01:29:51,583 --> 01:29:53,833 So if you can make a Instagram 815 01:29:53,833 --> 01:29:56,000 profile or some Facebook page, 816 01:29:56,333 --> 01:29:57,625 then you can make your website, 817 01:29:58,000 --> 01:30:00,000 you can bring your domain, right? 818 01:30:00,583 --> 01:30:05,250 And we will hook that thing up, right? 819 01:30:05,500 --> 01:30:06,291 And your domain 820 01:30:06,291 --> 01:30:10,958 becomes served by the website 821 01:30:10,958 --> 01:30:13,000 that you built in the 822 01:30:13,000 --> 01:30:14,375 hosted builder, yeah. 823 01:30:15,166 --> 01:30:16,833 - Ah, I got you, understand, yes, yes. 824 01:30:17,500 --> 01:30:18,875 So to me, it sort of sounds, 825 01:30:20,166 --> 01:30:22,166 ah, not really, but sort 826 01:30:22,166 --> 01:30:23,041 of kind of like a WordPress 827 01:30:23,041 --> 01:30:25,791 or a Wix or sort of one of those, 828 01:30:25,791 --> 01:30:28,541 sort of like just focus on building nice, 829 01:30:28,583 --> 01:30:31,375 beautiful websites through your sort of, 830 01:30:31,375 --> 01:30:32,791 this really cool UI thing 831 01:30:32,791 --> 01:30:34,208 you built with the blocks 832 01:30:34,208 --> 01:30:35,208 and things like that. 833 01:30:36,291 --> 01:30:40,375 - Right, not, I mean, we want to make it, 834 01:30:40,375 --> 01:30:41,541 we want to move away 835 01:30:41,541 --> 01:30:43,166 all the levers and knobs 836 01:30:43,375 --> 01:30:45,291 and every configuration, 837 01:30:45,666 --> 01:30:47,083 so it's basically just, 838 01:30:50,083 --> 01:30:54,208 just an organized, clean, how can I say, 839 01:30:54,916 --> 01:30:57,041 a sane way of handling 840 01:30:57,041 --> 01:30:59,708 with nowadays web, right? 841 01:31:00,000 --> 01:31:00,958 Because there's all 842 01:31:00,958 --> 01:31:02,833 sorts of customizations 843 01:31:03,125 --> 01:31:05,500 and responsive modes 844 01:31:05,500 --> 01:31:06,666 and all of that stuff 845 01:31:06,833 --> 01:31:09,416 that you can control and decide, right? 846 01:31:09,916 --> 01:31:11,416 And I think there's, 847 01:31:11,416 --> 01:31:12,833 we think there's a gap 848 01:31:13,750 --> 01:31:15,791 that it's not filled, 849 01:31:16,500 --> 01:31:20,333 which is the simple things and sometimes, 850 01:31:21,166 --> 01:31:23,541 and how does that saying go, 851 01:31:23,916 --> 01:31:25,833 we're doing this because we thought it 852 01:31:25,833 --> 01:31:28,708 was going to be easy, not because it is. 853 01:31:29,666 --> 01:31:30,833 There's something like that, right? 854 01:31:31,291 --> 01:31:33,333 It turns out making things simple 855 01:31:33,500 --> 01:31:36,208 is much, much harder than it seems. 856 01:31:37,333 --> 01:31:38,791 But yeah, that's the goal. 857 01:31:39,250 --> 01:31:41,208 That's to make simple things, yeah. 858 01:31:41,750 --> 01:31:43,000 - That's great, yeah, 859 01:31:43,000 --> 01:31:46,500 because from my history 860 01:31:46,500 --> 01:31:47,750 and personal experience, 861 01:31:48,041 --> 01:31:48,541 I'll get people 862 01:31:48,541 --> 01:31:49,291 coming to me all the time, 863 01:31:49,291 --> 01:31:50,958 be like, "Hey, I just, I need a website, 864 01:31:50,958 --> 01:31:51,583 "what do I do?" 865 01:31:51,583 --> 01:31:53,375 And I'm like, "I don't know." 866 01:31:53,375 --> 01:31:54,166 They're like, "Can we hire you?" 867 01:31:54,166 --> 01:31:54,666 I'm like, "I don't 868 01:31:54,666 --> 01:31:55,416 really want to do this. 869 01:31:55,625 --> 01:31:56,583 "This is not for me." 870 01:31:57,000 --> 01:31:58,083 So it would be nice to be like, 871 01:31:58,083 --> 01:31:59,541 "Hey, I have a friend who 872 01:31:59,541 --> 01:32:01,208 has this builder over here. 873 01:32:01,208 --> 01:32:02,333 "You should just go sign up for that 874 01:32:02,333 --> 01:32:04,750 "and buy you a, get the domain, do it, 875 01:32:05,166 --> 01:32:06,541 "and let them handle everything." 876 01:32:07,125 --> 01:32:07,750 And that sounds-- - 877 01:32:07,750 --> 01:32:08,333 Sounds like the place. 878 01:32:08,333 --> 01:32:10,500 - Sounds perfect for that, yes, yes. 879 01:32:10,666 --> 01:32:11,208 - Yeah, right. 880 01:32:11,333 --> 01:32:14,916 You have a friend which has 881 01:32:14,916 --> 01:32:17,750 a shop or a race next month 882 01:32:17,750 --> 01:32:19,208 and they want to put up a website, 883 01:32:19,500 --> 01:32:21,291 some pictures, some forms, and that's it. 884 01:32:21,625 --> 01:32:23,791 So, but then you will eat some 885 01:32:23,791 --> 01:32:24,625 roadblocks, of course. 886 01:32:25,166 --> 01:32:27,458 "Hey, I wanted to add this, I wanted to, 887 01:32:27,541 --> 01:32:29,416 "okay, it's not gonna do that." 888 01:32:29,625 --> 01:32:32,625 So then you need a programmer, right? 889 01:32:32,625 --> 01:32:35,166 Or some kind of other option, yeah. 890 01:32:35,583 --> 01:32:36,500 - Yes, yes. 891 01:32:36,500 --> 01:32:38,875 Which, you know, now there's, you know, 892 01:32:39,125 --> 01:32:39,916 once you get the website, 893 01:32:40,125 --> 01:32:41,416 there's so many sort of, 894 01:32:41,416 --> 01:32:42,916 like you said, no code tools. 895 01:32:43,291 --> 01:32:44,291 Like, you know, you 896 01:32:44,291 --> 01:32:45,708 could even, I don't know, 897 01:32:45,708 --> 01:32:47,625 I'm just thinking like out of the box, 898 01:32:47,625 --> 01:32:49,041 you could even do like some sort of form 899 01:32:49,458 --> 01:32:51,208 to Zapier, to email or something. 900 01:32:51,625 --> 01:32:55,083 You know, it's sort of kind of wild 901 01:32:55,083 --> 01:32:55,916 what all you can build 902 01:32:55,916 --> 01:32:57,000 with no code these days, 903 01:32:57,000 --> 01:32:59,250 which is pretty amazing in itself 904 01:32:59,250 --> 01:33:00,416 is how you can hook all 905 01:33:00,416 --> 01:33:01,208 these things up together 906 01:33:01,208 --> 01:33:04,000 and have sort of a, you know, this, 907 01:33:04,291 --> 01:33:05,625 I guess your wording was 908 01:33:05,625 --> 01:33:07,125 Frankenstein of a website 909 01:33:07,375 --> 01:33:08,500 that's kind of hooked to 910 01:33:08,500 --> 01:33:10,416 14 third-party services. 911 01:33:11,875 --> 01:33:14,541 (laughing) - Yeah, I've seen those as well. 912 01:33:15,750 --> 01:33:17,000 We've actually just put 913 01:33:17,000 --> 01:33:19,083 this morning a video online 914 01:33:19,333 --> 01:33:20,750 with the preview of 915 01:33:20,750 --> 01:33:21,833 how the builder works. 916 01:33:22,208 --> 01:33:26,083 So I can, so it's in our 917 01:33:26,083 --> 01:33:28,500 Twitter or Voxpopcites.com. 918 01:33:28,875 --> 01:33:31,458 You will be able to see how, 919 01:33:31,833 --> 01:33:33,708 how the mechanism of the builder is 920 01:33:33,791 --> 01:33:35,166 because I believe my 921 01:33:35,166 --> 01:33:36,833 words didn't make honesty 922 01:33:37,125 --> 01:33:40,041 to how simple that thing is. 923 01:33:40,583 --> 01:33:43,083 So maybe see it for yourselves and yeah. 924 01:33:43,625 --> 01:33:44,916 - Yeah, yeah, and we'll 925 01:33:44,916 --> 01:33:46,166 be sure to have all these 926 01:33:46,166 --> 01:33:48,083 in the show notes as well. 927 01:33:48,083 --> 01:33:48,500 That way you can 928 01:33:48,500 --> 01:33:50,791 easily find all this stuff. 929 01:33:51,916 --> 01:33:53,250 Basically try to put 930 01:33:53,250 --> 01:33:54,375 everything that we talk about, 931 01:33:54,375 --> 01:33:55,333 you know, sometimes I miss 932 01:33:55,333 --> 01:33:56,500 some things here and there, 933 01:33:56,500 --> 01:33:57,416 but hopefully I'll 934 01:33:57,416 --> 01:33:58,291 get all the big things. 935 01:34:00,000 --> 01:34:01,958 But I'm gonna say, I 936 01:34:01,958 --> 01:34:03,041 think that about does it. 937 01:34:03,333 --> 01:34:04,375 Anything else you wanna 938 01:34:04,375 --> 01:34:05,666 say that I may have missed 939 01:34:06,083 --> 01:34:07,041 anything you're working on 940 01:34:07,041 --> 01:34:07,750 or anything you're 941 01:34:07,750 --> 01:34:08,833 excited about right now? 942 01:34:11,000 --> 01:34:13,500 - Well, I am always about 943 01:34:13,500 --> 01:34:15,625 wanting to do so many things. 944 01:34:16,333 --> 01:34:17,833 But if I can say something 945 01:34:17,833 --> 01:34:20,833 is thank you to the community. 946 01:34:22,583 --> 01:34:25,458 I don't wanna miss anyone. 947 01:34:25,708 --> 01:34:28,000 So I'll just say to Laravel in general. 948 01:34:28,833 --> 01:34:30,750 I think from my early 949 01:34:30,750 --> 01:34:31,458 days in programming, 950 01:34:31,791 --> 01:34:35,000 I was always, I don't know, 951 01:34:35,166 --> 01:34:36,916 switching or changing tools. 952 01:34:37,458 --> 01:34:40,416 But since Laravel 4.0, I 953 01:34:40,416 --> 01:34:42,041 haven't used anything else. 954 01:34:42,375 --> 01:34:44,291 Like it's the backbone of it all. 955 01:34:44,291 --> 01:34:47,333 Maybe there's some things 956 01:34:47,333 --> 01:34:49,416 that come and go around it 957 01:34:49,416 --> 01:34:50,833 depending on the project, right? 958 01:34:51,291 --> 01:34:52,416 But Laravel has been 959 01:34:52,416 --> 01:34:56,000 there since that time 960 01:34:56,416 --> 01:34:59,416 and it made me grow as a developer 961 01:34:59,916 --> 01:35:01,916 and meeting new friends, 962 01:35:02,166 --> 01:35:04,208 knowing how to better 963 01:35:04,208 --> 01:35:06,541 solve problems and that's it. 964 01:35:06,708 --> 01:35:07,500 So I wanna say thank 965 01:35:07,500 --> 01:35:09,416 you to everyone involved 966 01:35:09,583 --> 01:35:10,833 in making Laravel happen. 967 01:35:12,666 --> 01:35:13,375 - Awesome, well, thank 968 01:35:13,375 --> 01:35:14,500 you for joining us today. 969 01:35:14,833 --> 01:35:16,125 We had a lot of fun, Patricio. 970 01:35:16,958 --> 01:35:19,791 - Thank you, Eric, it was fun indeed.