WEBVTT 1 00:00:06.280 --> 00:00:10.240 Welcome to React Round Up, and I'm Jack Harrington, your host for today 2 00:00:10.400 --> 00:00:16.039 and with me our page. Hey everybody, and TJ Hey everyone. And 3 00:00:16.239 --> 00:00:20.399 our guest today is Chris Laughlin. Hey everybody. All right, Well Chris, 4 00:00:20.399 --> 00:00:23.280 why do you start us out by telling us a little bit about why 5 00:00:23.320 --> 00:00:26.359 you're here and what you want to talk about? Yeah? So I was 6 00:00:26.600 --> 00:00:30.039 My name is Chris Locklin. I recently published an article for side Points. 7 00:00:30.239 --> 00:00:35.840 I'm using the webcit speech recognition ape guy built in the browser and then building 8 00:00:35.920 --> 00:00:42.079 that into erect application. So many to utilize your voice to potentially control an 9 00:00:42.079 --> 00:00:47.439 application, do different commands, interact with it in a novel in different way, 10 00:00:47.640 --> 00:00:50.920 and that's awesome. So how did you apply that in this particular case? 11 00:00:51.079 --> 00:00:54.240 So in this case, I kind of went through an iteration of building 12 00:00:54.520 --> 00:01:00.000 a basic speech recognition function, blown a user bible to turn on the marketphone, 13 00:01:00.280 --> 00:01:03.079 speak to the browser, and then kind of follow about how I get 14 00:01:03.079 --> 00:01:07.200 like build this into the React way of thinking. So using you know, 15 00:01:07.799 --> 00:01:12.599 hooks is the the modern way of building React applications. To decide write, 16 00:01:12.599 --> 00:01:15.680 okay, let's build this in first just a normal functional component, then start 17 00:01:15.719 --> 00:01:19.319 us tracking us out in the hook trying to find the bits and pieces that 18 00:01:19.400 --> 00:01:26.920 were unique and reusable, and then created a used voice hook that you could 19 00:01:26.959 --> 00:01:33.079 then start recording voice, stop recording voice, and then return that translated text. 20 00:01:33.640 --> 00:01:37.560 So then a React application could take about to this. The example that 21 00:01:37.599 --> 00:01:42.959 I used in the in the article was to search for all books based on 22 00:01:42.000 --> 00:01:47.319 the author's name. So using the Open Library Web API, you could say 23 00:01:47.319 --> 00:01:51.480 like your favorite authors, or like Rule Dal or kind of think of other 24 00:01:51.480 --> 00:01:56.319 authors. I can't think of any of the top of the head. Yeah, 25 00:01:56.400 --> 00:01:59.599 yeah, they all token So then using that that then call it the 26 00:01:59.599 --> 00:02:04.319 IPI, I bring back a list of books. I think the beauty is 27 00:02:04.359 --> 00:02:07.639 that you never touched the keyboard devoice to do that interaction, so all through 28 00:02:07.719 --> 00:02:15.080 vocal commands. So was there some business application that you were trying to solve 29 00:02:15.199 --> 00:02:19.599 with this or was this more of just hey, this is a cool web 30 00:02:19.639 --> 00:02:23.680 API. I want to see what I can do with it. I yet 31 00:02:23.680 --> 00:02:27.960 to find a business API. I had a business reason for applying this, 32 00:02:28.039 --> 00:02:30.360 Yeah, I think for my case, like I do a lot of kind 33 00:02:30.360 --> 00:02:31.960 of like you know, side projects where I try and take an API and 34 00:02:32.360 --> 00:02:36.800 or library and build something fun and interesting. So the first version of this 35 00:02:37.080 --> 00:02:40.599 application was a Giffee search, So using the giffees API to like search for 36 00:02:40.639 --> 00:02:45.360 gifts using your voice because usually like I can never think of what the type 37 00:02:45.360 --> 00:02:47.000 out, but I could probably just say a phrase and get back like a 38 00:02:47.039 --> 00:02:52.199 funny gift. So I wanted to like apply this to see different levels but 39 00:02:52.360 --> 00:02:55.199 from kind of buildings side it can. It made me think about different applications. 40 00:02:55.199 --> 00:03:00.000 So if you had a website, you could potentially have like a hate 41 00:03:00.479 --> 00:03:01.759 don't to say the key work case. People are listening to this outlide, 42 00:03:01.800 --> 00:03:06.000 but hey, no gorgle, you know interock with my site, so like 43 00:03:06.080 --> 00:03:08.879 no contact support. Potentially you know, tell them your problem instead of type 44 00:03:08.879 --> 00:03:13.000 of the problem. Yeah, I think I've seen this. This is to 45 00:03:13.039 --> 00:03:15.599 me, this falls in the bucket of the sort of APIs that are pretty 46 00:03:15.639 --> 00:03:20.280 common and native mobile apps that I think people just don't expect to be on 47 00:03:20.360 --> 00:03:23.520 the web because I know I personally don't use it, but I'm aware of 48 00:03:23.599 --> 00:03:29.120 several native apps that have this, like searches. I think the super common 49 00:03:29.120 --> 00:03:31.960 one that anytime you're searching for someone something, giving people an option to just 50 00:03:32.680 --> 00:03:38.800 say it versus typing it out can be kind of handy, and actually that 51 00:03:39.360 --> 00:03:44.520 makes me wonder because I'm wondering, like what the engine is under this, 52 00:03:44.680 --> 00:03:47.319 Like is the API good? Like, because that's that's like my biggest concern 53 00:03:47.400 --> 00:03:51.400 with these things that like I talk to these and I search for J. 54 00:03:51.560 --> 00:03:55.800 R. R. Tolkien and then it's looking for like JBB Tollinger or something 55 00:03:57.360 --> 00:04:00.759 like that. Right, So when you're playing with this, like did it 56 00:04:00.840 --> 00:04:05.439 do a pretty good job working with that? I was pleasantly surprised how well 57 00:04:05.479 --> 00:04:11.719 it worked. Like I have an Irish accent, and usually like when I 58 00:04:11.719 --> 00:04:15.319 talk to my own like smart speaker at home, I would say seven percent 59 00:04:15.400 --> 00:04:17.319 time it doesn't understand me for the browser, but to pick us up and 60 00:04:17.360 --> 00:04:21.800 I've you know, I mumbled towards it and top really fast and talk really 61 00:04:21.839 --> 00:04:26.360 slow and pitch my voice. It was still a little bit pickout everything. 62 00:04:27.040 --> 00:04:30.519 You can feed it like a grammar list, so you can say, like 63 00:04:30.560 --> 00:04:33.160 these are no keywords that you're going to be looking at for and particular words 64 00:04:33.160 --> 00:04:38.800 that may or may not be understood. As far as understanding it's it's working 65 00:04:38.879 --> 00:04:42.360 off like the Chrome level API. So I think Google's may be back in 66 00:04:42.399 --> 00:04:46.839 this with their going to speak condition. Yeah, It's sort of interesting because 67 00:04:46.240 --> 00:04:51.920 considering it's a browser API, presumably each browser would have to provide their own 68 00:04:51.959 --> 00:04:56.720 implementation, right Like, I can't. I doubt it's like the W three 69 00:04:56.720 --> 00:04:59.800 C doesn't Like they wouldn't provide an implementation. So I imagine it would be 70 00:04:59.879 --> 00:05:04.079 up to like Google and Apple and Mozilla, et cetera to sort of come 71 00:05:04.160 --> 00:05:09.120 up with the actual engine that drives this, right. Yeah, Unfortunately, 72 00:05:09.279 --> 00:05:12.160 the Brouiser support, and I think for that reason is very minimal. I 73 00:05:12.199 --> 00:05:16.560 think at the moment it's Edge and Chrome fully supported, Firefox with low support, 74 00:05:16.639 --> 00:05:20.000 so you're kind of stuck with the browser that you're working with, and 75 00:05:20.040 --> 00:05:25.959 that that's kind of the other challenge when it came to emviolentness was doing browser 76 00:05:26.399 --> 00:05:31.639 detection inside of the hook, and then you know with doing conditional statements inside 77 00:05:31.639 --> 00:05:34.319 hooks, like you know, we use a fact and stuff don't play nice 78 00:05:34.319 --> 00:05:39.319 if you put them inside the conditional so kind of having the hacker run that. 79 00:05:39.680 --> 00:05:42.319 So you tell me us or go to Chrome where this isn't going to 80 00:05:42.360 --> 00:05:47.279 work, I say seventy percent. I'm sorry, go ahead. I got 81 00:05:47.279 --> 00:05:50.759 to say. Seventy percent is pretty good. My my home speaker seems to 82 00:05:50.759 --> 00:05:55.399 hate me. You can get like thirty percent, but I'm really impressed here. 83 00:05:55.639 --> 00:05:58.279 I think this articles to me is like a twofer. You get not 84 00:05:58.319 --> 00:06:03.839 only this sight into this really cool speed recognition API, but also how to 85 00:06:03.920 --> 00:06:06.680 write a custom hook around it, which I think a lot of people tend 86 00:06:06.759 --> 00:06:11.800 to avoid in React. So it's good to see a demonstration of that. 87 00:06:11.959 --> 00:06:14.439 Is that something you do a lot? It's customer hooks? Yeah, Like 88 00:06:14.720 --> 00:06:18.480 I'm a full time React developer and with the kind of the like these little 89 00:06:18.480 --> 00:06:23.279 side projects that build usually you always end up in like one or two files 90 00:06:23.279 --> 00:06:27.000 at max, so kind of build little hooks in and you know, trying 91 00:06:27.000 --> 00:06:30.800 to abstract layers out. And as part of the learning process of doing this 92 00:06:30.000 --> 00:06:31.920 was like how can I build this? How I can make it reusable? 93 00:06:32.639 --> 00:06:35.680 I probably won't use it again because you know, the middle of the side 94 00:06:35.680 --> 00:06:40.040 project is completed, it's dead, and the next ledge project takes over. 95 00:06:40.279 --> 00:06:44.399 But building it into like a reusable kind of pattern at least teaching me how 96 00:06:44.439 --> 00:06:48.639 to build scalable, reusable code. Maybe eventually I'll release it as an MPM 97 00:06:48.720 --> 00:06:54.120 package, but there's probably already one right there that does this. We use 98 00:06:54.199 --> 00:06:58.240 voice as a fantastic name, so you've got the naming down as well. 99 00:07:00.160 --> 00:07:08.600 Domain. I am curious how you chose to deal with because this strikes me 100 00:07:08.639 --> 00:07:13.519 as a really unique situation, like a hook that sort of like conditionally works. 101 00:07:14.079 --> 00:07:17.040 So I'm curious, like what approach did you take, Like what what 102 00:07:17.040 --> 00:07:20.319 would look using the hook look like if you're in a browser that doesn't support 103 00:07:20.319 --> 00:07:25.360 these APIs at all. So if yourser doesn't support it, it'll it'll do 104 00:07:25.399 --> 00:07:30.199 the Briceer detection annoyingly in the hook, like the state to handle what text 105 00:07:30.839 --> 00:07:33.959 was returned from the API and the whether it's recording or not recording, because 106 00:07:33.959 --> 00:07:39.399 you can turn it off and on. Annoyingly, you can't have them after 107 00:07:39.439 --> 00:07:42.240 a conditional statement because of the way hooks work, so you can have to 108 00:07:42.279 --> 00:07:45.519 decline of state. They'll exist, but then an if statement will check to 109 00:07:45.560 --> 00:07:48.920 see if your browser supports it and in returns a value to say like this 110 00:07:49.000 --> 00:07:53.720 is a non supportive browser, which then you can control like a visual message 111 00:07:53.720 --> 00:07:57.279 to say, you know, please try a different browser. I wish that 112 00:07:57.319 --> 00:08:00.399 I could have had that before and not even created any of the state variables 113 00:08:00.399 --> 00:08:03.160 that were needed for this to work, but the nature of React kind of 114 00:08:03.240 --> 00:08:07.360 just made it go that way. Is a really great library out there, 115 00:08:07.800 --> 00:08:11.279 React use that has a whole bunch of really great hooks on it, and 116 00:08:11.680 --> 00:08:16.160 it does have a speech one, but it's actually the opposite. It's given 117 00:08:16.160 --> 00:08:20.680 me a piece of text and I'll speak it for you. So it could 118 00:08:20.680 --> 00:08:24.079 be a nice other side of that. So you can always pr that into 119 00:08:24.079 --> 00:08:28.480 that repo and get it out there. Yeah, I think contribute to one 120 00:08:28.519 --> 00:08:31.439 people where they were taking different hooks for different uses, and one was that 121 00:08:31.720 --> 00:08:35.320 used economic code. So you can declare the use economic code and the user 122 00:08:35.360 --> 00:08:39.840 could type in the a being up, down that right start and then trigger 123 00:08:39.840 --> 00:08:46.080 and action based on that. I've seen some other repos or some other pieces 124 00:08:46.120 --> 00:08:48.879 of code that have done that, And one of the developers that I learned 125 00:08:48.919 --> 00:08:52.559 from actually told me that he had done that at a previous place of employment, 126 00:08:52.600 --> 00:08:56.559 that if you typed in the economic code, a fireball and come across 127 00:08:56.879 --> 00:09:00.480 the browser window, which is pretty cool. So you said that you work 128 00:09:00.600 --> 00:09:03.240 with React full time in your day job. What is your day job? 129 00:09:03.519 --> 00:09:09.919 So I'm like titles principal software engineer, but I manage the team of UI 130 00:09:09.000 --> 00:09:13.039 developers working on a secret book. So I work for a company called rap 131 00:09:13.080 --> 00:09:16.360 at seven. We do like cybersecurity, so we have like a large scale 132 00:09:16.440 --> 00:09:20.879 React project, our own style and library. We build our React component library 133 00:09:20.879 --> 00:09:26.759 as well, so we work across those teams kind of building maintaining improving our 134 00:09:26.960 --> 00:09:31.080 scalability when it comes to the building a component that can work across from multiple 135 00:09:31.080 --> 00:09:35.480 products as well. Building this into the more like usable, user friendly, 136 00:09:35.919 --> 00:09:39.720 and also adding like layers of security in there to keep things protected and safe. 137 00:09:39.039 --> 00:09:45.480 That sounds challenging to say the least. It's very challenging, especially like 138 00:09:45.480 --> 00:09:50.039 with the code basically work on. We'd started whenever React with virgin voteing and 139 00:09:50.120 --> 00:09:54.919 everything was written completely different then, and when you have a code base of 140 00:09:54.960 --> 00:10:00.519 over the thousand files, it's hard to rewrite everything the modern way of So 141 00:10:01.120 --> 00:10:05.320 we have like three different state management libraries mixed across the code base. You 142 00:10:05.320 --> 00:10:09.360 know, classes, functional components, hooks, all that kind of stuff. 143 00:10:09.440 --> 00:10:11.960 Yeah, that can be really challenging to make sure that you get that consistency 144 00:10:11.960 --> 00:10:16.000 across the code base. It's interesting. I'm a principal engineer as well, 145 00:10:16.080 --> 00:10:22.200 and it's cool to see you going and investing your time into building these little 146 00:10:22.240 --> 00:10:26.679 projects like this. And communicating and that information about how those work, because 147 00:10:26.759 --> 00:10:30.960 that's actually I think one of the primary roles of a principal engineer is that 148 00:10:31.080 --> 00:10:33.960 kind of education. So is this something you do a lot of, is 149 00:10:33.000 --> 00:10:37.279 like talk to your teams, show small examples of how to do stuff. 150 00:10:37.759 --> 00:10:43.080 Yeah, I find like I'm very much of a do something to learn kind 151 00:10:43.120 --> 00:10:45.519 of person, So I'll have to build a little small projects or how to 152 00:10:45.720 --> 00:10:48.159 take some of them. Like if I find someone tweaked about some new utility 153 00:10:48.200 --> 00:10:52.080 library, I'll go off and try and build an example so I can understand 154 00:10:52.120 --> 00:10:54.240 that to bring it back to the team and they kind of recycle and share 155 00:10:54.279 --> 00:10:58.440 that knowledge because there's no there's no like, well, there's lots of courses 156 00:10:58.480 --> 00:11:01.600 money, but when I there's no formal education JavaScript, there wasn't like a 157 00:11:01.879 --> 00:11:05.759 certificateation you could do, so kind of have to learn and it was always 158 00:11:05.840 --> 00:11:09.799 learning in the evenings and then bring it back into the team. So now 159 00:11:09.799 --> 00:11:13.080 we try and change that pattern. We're doing a lunch and learn with the 160 00:11:13.120 --> 00:11:16.639 team, you know, maybe using the course or using someone you know, 161 00:11:18.159 --> 00:11:22.159 random tweak that we've seen building the pots. We have one really interestingly recently 162 00:11:22.200 --> 00:11:26.279 where we were looking at a different way of doing a switch statement. So 163 00:11:26.480 --> 00:11:30.720 using conditional cases, we pass in through and then the logic is in need 164 00:11:30.799 --> 00:11:33.879 of the cases and whether like this is a viable thing to use, when 165 00:11:35.000 --> 00:11:37.320 is the use case for how you can build it, and then building up 166 00:11:37.519 --> 00:11:41.159 different examples the team could understand what it meant. That's what I was going 167 00:11:41.240 --> 00:11:45.039 to ask, is you know, it's it's very cool to learn about this 168 00:11:45.080 --> 00:11:48.159 stuff, but sometimes I'm just at a loss for what do I want to 169 00:11:48.240 --> 00:11:52.000 learn because there's so many interesting things happening, and Twitter is, you know, 170 00:11:52.159 --> 00:11:56.519 changing at rapid speed. So how do you how do you kind of, 171 00:11:56.879 --> 00:12:01.480 I guess, filter out the grip and say, hey, this is 172 00:12:01.519 --> 00:12:07.240 something that actually could be interesting to learn about and then be possibly be useful 173 00:12:07.519 --> 00:12:09.879 in the day to day of what our team is doing. I think I'm 174 00:12:11.000 --> 00:12:16.320 very guilty of using Twitter too much as like a pipeline for information. But 175 00:12:16.519 --> 00:12:18.519 I think after a while you see the pattern of someone will tweet this is 176 00:12:18.559 --> 00:12:20.679 amazing, this is the best thing ever, and then two weeks later a 177 00:12:20.679 --> 00:12:24.080 little tweet and like this is the best thing ever in a contradicted the first 178 00:12:24.120 --> 00:12:28.120 week I was actually talking to them, Remember the team recent but I kind 179 00:12:28.159 --> 00:12:31.039 of, you know, kind of grew your knowledge how to focus, and 180 00:12:31.200 --> 00:12:33.519 he was asking me for like different books to recommend, and I kind of 181 00:12:33.600 --> 00:12:39.840 let more towards like recommend the podcasts, Like this podcast is a great resource. 182 00:12:39.919 --> 00:12:43.759 But there's a number of other react ones and draftscript ones are you and 183 00:12:43.799 --> 00:12:46.799 I find they're really good because like this, these people are you know, 184 00:12:46.840 --> 00:12:52.279 focus, they're trying to like share and teach. That'll filter out all the 185 00:12:52.360 --> 00:12:58.480 noise you get from Twitter or Another great resource is like newsletters, so you 186 00:12:58.519 --> 00:13:01.360 know Josh Grip Weekly React Status. Those kind of news letters can give you 187 00:13:01.440 --> 00:13:05.200 a good list of like these are the articles of people have felt of some 188 00:13:05.279 --> 00:13:09.240 importance and they're worth looking into. There's a lot of noise and a lot 189 00:13:09.279 --> 00:13:13.200 of information, but it's kind of over time you learn how to felt the 190 00:13:13.279 --> 00:13:15.720 right like yeah, I don't need to read this, or oh yeah I 191 00:13:15.720 --> 00:13:18.600 should read that. I feel like one of the more valuable skills is you 192 00:13:18.639 --> 00:13:24.080 almost develop like your own algorithm for processing all this information, right, Like 193 00:13:24.679 --> 00:13:28.480 if I see something come up this many times, or if this is relevant 194 00:13:28.519 --> 00:13:31.639 to me in some way, then it reaches that level of like maybe I 195 00:13:31.639 --> 00:13:35.320 should check this out otherwise, like because when you first get started, you 196 00:13:35.480 --> 00:13:39.000 just get it's easy to get overwhelmed because you think like everything's important. Then 197 00:13:39.039 --> 00:13:43.360 you realize like only a small subset is probably important to you, and learning 198 00:13:43.399 --> 00:13:46.480 to recognize that it's almost the skill in and of itself. Yeah. I 199 00:13:46.519 --> 00:13:52.519 think filtering is really good because at the beginning I would read every article and 200 00:13:52.559 --> 00:13:54.000 try and understand everything, and I got the point where like, well, 201 00:13:54.200 --> 00:13:58.840 what am I doing day to day that I need to improve? So like 202 00:13:58.879 --> 00:14:01.240 if I see a typescript or I don't write or use typescript and I do 203 00:14:01.279 --> 00:14:05.240 want to eventually use it about me keeping up with the latest Once with the 204 00:14:05.240 --> 00:14:09.919 typescript when I'm not actively doing it isn't going to help where I could be 205 00:14:09.960 --> 00:14:13.519 reading something else. So like is there a new table library out there that's 206 00:14:13.600 --> 00:14:18.399 so fast? Is there a better you know, API for talking to graph 207 00:14:18.440 --> 00:14:22.720 col or managing the state opusing all that instead of learning something I know I'm 208 00:14:22.720 --> 00:14:26.200 never going to use. I go through the pattern of open a newsletter out 209 00:14:26.200 --> 00:14:31.279 of ring the pocket and then never read it over again. But I start 210 00:14:31.320 --> 00:14:37.159 tigling things like I will eventually read this article usually a date. Yeah, 211 00:14:37.200 --> 00:14:41.799 you end up with a massive reading list. I know, I have several 212 00:14:41.879 --> 00:14:45.159 incognito windows that it's like, oh, yeah, I'll get there, eventually, 213 00:14:45.720 --> 00:14:48.960 I'll read that article, I know it. And yeah, unfortunately I 214 00:14:50.080 --> 00:14:54.360 end up falling into that trap of clicking on those clickbait articles just too easily. 215 00:14:54.679 --> 00:15:00.320 Yeah. The group tabs that Chrome introduced not that long ago have been 216 00:15:00.879 --> 00:15:03.480 a good thing and a huge detriment to me because I'm never going to close 217 00:15:03.519 --> 00:15:07.440 that group even though I'm actually never going to read those articles that I grouped 218 00:15:07.440 --> 00:15:13.200 together. I've seen the recently released search for your Times and I was like, 219 00:15:13.320 --> 00:15:18.399 that's a submission to broken, like a broken and would just make it 220 00:15:18.320 --> 00:15:26.360 it worse. So true, Hi Carl, welcome to the party. Hey 221 00:15:26.399 --> 00:15:33.200 hey, sorry, had over a bit, no problem. Yeah, absolutely, 222 00:15:33.519 --> 00:15:37.679 meet Chris, and Chris did an article on speech recognition API. Yes, 223 00:15:37.720 --> 00:15:41.960 hey, good good, I'm by the I'm in England. So just 224 00:15:41.000 --> 00:15:50.039 because the border and nine is name is enjoining the Goodwiller, We're finally Oh 225 00:15:50.120 --> 00:15:52.279 gosh today it was okay in the morning, but now I've been reading a 226 00:15:52.279 --> 00:15:58.440 bit so yeah, passic English weather say good weather in England. That's that's 227 00:15:58.480 --> 00:16:03.240 not as advertised heard of, so Chris, I'm curious because I'm looking you've 228 00:16:03.240 --> 00:16:07.240 written a number of articles for site Point. How did you get started kind 229 00:16:07.279 --> 00:16:12.440 of taking these projects that you were building and then besides sharing them with your 230 00:16:12.480 --> 00:16:15.559 team and with the people that you work with regularly, how did you get 231 00:16:15.600 --> 00:16:21.200 into like actually writing these these tutorials and stuff. I think it's some of 232 00:16:21.440 --> 00:16:23.360 like a couple of years ago. Like most developers, I always have my 233 00:16:23.399 --> 00:16:27.840 own blog, and you spent more time rewriting the blog architecture and writing blog 234 00:16:27.879 --> 00:16:30.799 posts. And I got the one where like when I did write a blog 235 00:16:30.840 --> 00:16:33.519 post, I was like, yeah, this is cool. Maybe I'll share 236 00:16:33.519 --> 00:16:36.919 it all Reddit, but no one's really going to read it, and there's 237 00:16:36.919 --> 00:16:41.240 no motivation to keep me learning and recing. Trying to find me things was 238 00:16:41.480 --> 00:16:45.840 enough to develop our work with He had written a Java article for side Points, 239 00:16:45.919 --> 00:16:48.080 and he was like, yeah, like you can submit an article and 240 00:16:48.759 --> 00:16:51.279 you know they'll publish it, and like this is this is awesome. So 241 00:16:51.320 --> 00:16:53.000 this has given me like a kick in the backside to say, right, 242 00:16:53.080 --> 00:16:57.519 you know I've submitted this, I need to actually build and write and you 243 00:16:57.559 --> 00:17:02.600 know, create an application for this post. So that kind of like snowball 244 00:17:02.639 --> 00:17:04.599 from there, and every time I would post something that's like right, well, 245 00:17:04.720 --> 00:17:07.160 now I need to find a new idea to post the next one. 246 00:17:07.279 --> 00:17:11.839 And it kept me like really engaged with like what can I learn new? 247 00:17:11.920 --> 00:17:17.359 What's brand new out there. One of the articles I posted recently was on 248 00:17:17.960 --> 00:17:21.720 the React framework Remotion, and it was a brand new at the time building 249 00:17:22.240 --> 00:17:23.519 videos using React, and I was like, this is amazing. I need 250 00:17:23.559 --> 00:17:27.880 to write about this share so other people can see it and can continue to 251 00:17:27.880 --> 00:17:32.599 getting that feedback. And it's kind of it's rewardedt to see that you're sharing 252 00:17:32.599 --> 00:17:34.680 your knowledge, are getting it out there so others can build and grow and 253 00:17:34.799 --> 00:17:40.640 do the same. Say, Remotion is really really fun. Maybe you could 254 00:17:40.720 --> 00:17:44.920 if you wrote about it, could explain to the audience like roughly what it 255 00:17:45.000 --> 00:17:48.039 is, because I think it's a pretty exciting project. Also, yeah, 256 00:17:48.319 --> 00:17:52.000 it's really cool. I kind of liken it too. It's almost like Windows 257 00:17:52.000 --> 00:17:56.200 movie Maker, but for the browser, so you can like you run Remotion 258 00:17:56.319 --> 00:18:00.480 that's like the applications itself, and then it'll bring up a pre when though 259 00:18:00.559 --> 00:18:03.599 you can scrub through a video. But the brilliant part is like how you 260 00:18:03.640 --> 00:18:07.160 actually create a video. So if I want to go and create a video 261 00:18:07.200 --> 00:18:10.480 and I and like I needed graphics and move around the screen. I would 262 00:18:10.480 --> 00:18:15.079 have to get you some software written by Adobe or someone like that and pay 263 00:18:15.160 --> 00:18:19.240 licensing and everything. Whereas remotions free open source. I can just run that 264 00:18:19.920 --> 00:18:25.000 from MPM. It works in the riser. So the core Remotion is like 265 00:18:25.119 --> 00:18:30.759 a library that allows you to use React components to build out frames of a 266 00:18:30.880 --> 00:18:34.880 video, and Emotion allows you to expert out so you can use React, 267 00:18:36.200 --> 00:18:41.200 HAHTML, CSS, whatever you normally build a web application of, but it 268 00:18:41.319 --> 00:18:44.960 generates a video at the end of it. Yeah, and it's cool because 269 00:18:45.279 --> 00:18:48.839 I've always said it's an interesting project because there are people out there that use 270 00:18:48.920 --> 00:18:52.480 like these, like Adobe tools or there's other tools like it to create these 271 00:18:52.480 --> 00:18:56.039 things. But and there's people that are very good at that. But if 272 00:18:56.039 --> 00:19:00.039 you're building with web tech, if you're building with React, like it opens 273 00:19:00.079 --> 00:19:03.960 so many doors that you could never do with a tool like that. Like 274 00:19:03.319 --> 00:19:07.799 if you wanted to programmatically do some things as part of your videos, like 275 00:19:07.160 --> 00:19:11.799 let's say you want to generate a unique video for like each of your users, 276 00:19:11.839 --> 00:19:15.519 right and bring in some like customized stats, Well, you can use 277 00:19:15.519 --> 00:19:19.240 a fetch call to bring in some stats and like incorporate that into your video 278 00:19:19.319 --> 00:19:26.279 production or like algorithmically change parts of the video based off of whatever. Right, 279 00:19:26.319 --> 00:19:29.400 It's it's a React app, So the sky's the limit, and it 280 00:19:29.440 --> 00:19:33.720 sort of just blows my mind a little bit at the possibilities just because it's 281 00:19:33.880 --> 00:19:37.519 it's just such a unique idea because I would have never thought to build videos 282 00:19:38.200 --> 00:19:41.200 with React, right like in my brain, like I have a segmented part 283 00:19:41.240 --> 00:19:45.160 for like, oh yeah, that's for like really complicated Adobe tools or screen 284 00:19:45.200 --> 00:19:49.079 Flow or Cantasia or whatever, like that's not something I do with web tech. 285 00:19:49.160 --> 00:19:53.319 That's that's nuts. It's interesting you mentioned like the kind of customization because 286 00:19:53.359 --> 00:19:56.119 as it was like working with it, I kept thinking, like we're working 287 00:19:56.119 --> 00:20:00.920 the school hyping this get better because it just run three mpm. How you 288 00:20:02.039 --> 00:20:03.319 normally win your code? Like what if you set up with get up action 289 00:20:03.559 --> 00:20:07.880 every time you re release like open source library, it generates a release notes 290 00:20:08.000 --> 00:20:12.440 video that can then lightly publish the Twitter. And I was talking to someone 291 00:20:12.480 --> 00:20:17.359 recently who was like big into the no code movement where you could then utilize 292 00:20:17.359 --> 00:20:19.759 that so users could be building videos in a drag and drop environment. But 293 00:20:21.079 --> 00:20:23.480 it's all just React code under the hood. Yeah, because I mean all 294 00:20:23.480 --> 00:20:26.519 you had to do, like you could picture a form where you just put 295 00:20:26.559 --> 00:20:33.519 in what's my project, what's my version number, and then a remotion project 296 00:20:33.920 --> 00:20:38.880 grabs that information programmatically from GitHub, tosses it into the video, spits out 297 00:20:38.880 --> 00:20:44.519 a like MP four whatever video file, and like you said, like you 298 00:20:44.559 --> 00:20:48.920 could tie that into like integrations posted somewhere. It's it's kind of cool and 299 00:20:48.000 --> 00:20:52.480 kind of nuts. Yeah. I think React it's actually coming kind of like 300 00:20:52.480 --> 00:20:56.240 a platform, right because you've got so many libraries for like another one for 301 00:20:56.319 --> 00:21:00.440 like three B stuff, one for like aiming, one for this, one 302 00:21:00.480 --> 00:21:04.000 for emotion. So you can see probably in the future that becomes this kind 303 00:21:04.000 --> 00:21:07.440 of platform you can kind of build all kinds of things on it, as 304 00:21:07.440 --> 00:21:11.039 opposed to be when it started off was a library for you envilement. But 305 00:21:11.160 --> 00:21:15.160 now it's kind of morphing into this thing where you can basically do a lot 306 00:21:15.200 --> 00:21:18.720 more of it than at the beginning. Yeah, it sounds a little bit 307 00:21:18.759 --> 00:21:23.759 familiar, a little bit similar to recut if you've seen anything about that on 308 00:21:23.839 --> 00:21:29.839 Twitter that Dave. I think Dave Sidia created it. And what it does 309 00:21:29.960 --> 00:21:32.880 is if you're filming and I don't know if it's built with React under the 310 00:21:32.880 --> 00:21:37.799 hood, actually, but if you're filming and you stop speaking or you flow 311 00:21:37.880 --> 00:21:42.599 a line or something like that, it makes it very easy to take out 312 00:21:42.880 --> 00:21:48.920 the I guess the line that you've potentially messed up while you're speaking, as 313 00:21:48.920 --> 00:21:53.759 well as any silences. It just automatically cuts those out, which people have 314 00:21:53.839 --> 00:21:57.680 been saying is really amazing for all the content creators out there. Yeah, 315 00:21:57.720 --> 00:22:00.720 there actually is like an off the show product for that called the Script, 316 00:22:00.839 --> 00:22:06.680 which is really good. It actually gives you a running translation or I guess 317 00:22:06.680 --> 00:22:11.799 transcript as you go and then you can literally just like edit your your text 318 00:22:11.799 --> 00:22:14.359 to be like oh those arms, just get rid of them. Done, 319 00:22:14.480 --> 00:22:17.519 and it does the transition. It's very smooth. Oh, very cool. 320 00:22:17.759 --> 00:22:19.960 Yeah, I'm just like we recatting. It still amazes me that this is 321 00:22:21.039 --> 00:22:27.359 built with React and not like, I don't know C plus plus I had 322 00:22:27.359 --> 00:22:32.960 a question for Chris regarding your unblogging and have the workflow that you you kind 323 00:22:32.960 --> 00:22:37.079 of have kind of figured out over the years in terms of your drafts and 324 00:22:37.079 --> 00:22:40.680 then you put your research, your ideas and your editing and publishing like what's 325 00:22:40.680 --> 00:22:45.359 your what's your thing? Like your post us for your brooking line wholeheartedly and 326 00:22:45.359 --> 00:22:48.359 that it's not perfect and it appollos constantly. Yeah, because at the beginning 327 00:22:48.359 --> 00:22:52.240 I would just start writing and then get really confused and you know, get 328 00:22:52.279 --> 00:22:56.359 bored halfway through the article and just want to write the conclusion. But it 329 00:22:56.440 --> 00:23:00.039 can I start of like usually each each post is based on you know, 330 00:23:00.559 --> 00:23:06.440 using something in job script to do something or exposing like a new framework verry. 331 00:23:06.480 --> 00:23:08.640 So I'll think of an idea of like why can I take this make 332 00:23:08.680 --> 00:23:14.880 it fun so relatable that you know isn't as a do app or isn't you 333 00:23:14.920 --> 00:23:18.079 know, some sort of business logic that you would do as a practice in 334 00:23:18.119 --> 00:23:22.880 a workplace. To build out that application asn't building I'll take notes to think 335 00:23:22.400 --> 00:23:26.519 we are the important parts, where did I struggle, Where did I get 336 00:23:26.559 --> 00:23:30.079 excited and like oh this is really cool that that worked and it's kind of 337 00:23:30.079 --> 00:23:33.720 thing. So build a list of that that usually then kind of forms into 338 00:23:33.839 --> 00:23:37.480 the contents of it, like you know, getting start with this, running 339 00:23:37.480 --> 00:23:40.960 on the issues, how to debook that, then build out a little bit 340 00:23:41.000 --> 00:23:44.160 further kind of like go through you know, iterations, how you could potentially 341 00:23:44.240 --> 00:23:48.680 change that out and then you flash that into the final article where it'll like 342 00:23:49.000 --> 00:23:53.279 flow like a tutorial, but not very much like a kind of do this 343 00:23:53.359 --> 00:23:56.799 and then do this and copy that command do that command. I kind of 344 00:23:56.880 --> 00:24:00.880 let the user figure it out by themselves, but also kind of guiding them 345 00:24:00.920 --> 00:24:03.359 along the kind of journey that I had whenever I was doing this. Yeah. 346 00:24:03.359 --> 00:24:07.720 I think that's a great way to get your side projects out there. 347 00:24:07.720 --> 00:24:10.599 I know there is a ton of hilarious tweets about like, oh, you 348 00:24:10.640 --> 00:24:14.759 know, this is yet another side project that I've gotten myself into and having 349 00:24:14.799 --> 00:24:17.720 that output at the end of it, like, hey, I'll just you 350 00:24:17.759 --> 00:24:19.960 know, make a dev two article on this, and that gives me some 351 00:24:21.400 --> 00:24:23.799 conclusion point and something I can go back to later and take a look at 352 00:24:23.880 --> 00:24:27.039 if I choose to get back into it. Hey, I got my own 353 00:24:27.279 --> 00:24:30.640 thing written by me that explains it to me. But it's also helpful and 354 00:24:30.680 --> 00:24:33.960 it gets it out there and it gets it on your resume. It's like, 355 00:24:33.960 --> 00:24:36.000 oh, this is something else I can do. I can teach people 356 00:24:36.000 --> 00:24:40.079 about how to do the cool stuff like speech recognition. Yeah, Like for 357 00:24:40.119 --> 00:24:42.359 me, I kind of really progress at the start of like the lockdown, 358 00:24:42.599 --> 00:24:45.039 I was at home at all the time. I'm like, I need to 359 00:24:45.079 --> 00:24:48.319 be learned. I need to do something to keep myself busy. So I 360 00:24:48.359 --> 00:24:51.440 decided I'm going to start a Twitch channel. I'm going to start a series 361 00:24:51.480 --> 00:24:55.759 called Hello Drunk World, where I have a glass or two of wine and 362 00:24:55.960 --> 00:25:00.319 get myself an hour and a half to go from like an empty folder to 363 00:25:00.680 --> 00:25:07.559 a full application published live that users can access and each time try and use 364 00:25:07.960 --> 00:25:11.319 something I've never used before. So may it be like a random library or 365 00:25:11.359 --> 00:25:15.079 an API, and then kind of build and grow upon that. And it 366 00:25:15.119 --> 00:25:18.759 gave me that kind of structure of like I need. And they start off 367 00:25:18.839 --> 00:25:21.920 every two weeks. Now it's every fortnight, and then it's probably turning on 368 00:25:22.160 --> 00:25:25.559 every every month. But I had this kind of fear every Sunday night. 369 00:25:25.680 --> 00:25:27.759 I need to think of a brand new idea and an application I can build 370 00:25:29.160 --> 00:25:32.839 using this random bit attack to kind of learn and grow. I want to 371 00:25:32.880 --> 00:25:37.680 watch that. I'm so it's good for me. It's good to kind of 372 00:25:37.799 --> 00:25:41.119 do that. And then I like the factause I was explaining to some coworkers 373 00:25:41.119 --> 00:25:45.960 that I'm having a couple of drinks, like coding and everyone has that fear 374 00:25:45.960 --> 00:25:48.559 like if someone's over your shoulder watching your code, You're going to make mistakes, 375 00:25:48.559 --> 00:25:51.240 You're going to do typos, You're going to run the problems. And 376 00:25:51.240 --> 00:25:53.200 I like it's constantly just shouting to the people on Twitch and like, right, 377 00:25:53.400 --> 00:25:56.960 where am I going wrong? I can't see the problem here? Is 378 00:25:56.000 --> 00:26:00.519 it a semi colon or something else? Like when someone had they help me, 379 00:26:00.119 --> 00:26:03.880 especially like I'm really bad at CSS, so anytime you came to styl 380 00:26:03.920 --> 00:26:06.839 and I was like, what am I trying to do here? And like 381 00:26:07.000 --> 00:26:11.480 asking people in the chat like give me what I need. Yeah, that's 382 00:26:11.519 --> 00:26:15.839 awesome that it's kind of that live experience of people talking to you in real 383 00:26:15.920 --> 00:26:19.279 time, although it seems like it would be difficult because I've not really done 384 00:26:19.519 --> 00:26:23.200 much live stream to keep up with both what you're trying to do on your 385 00:26:23.279 --> 00:26:27.359 own screen and what people in the chat are talking to you about at the 386 00:26:27.400 --> 00:26:30.480 same time. It's not too bad. The kind of minds I always said 387 00:26:30.480 --> 00:26:33.000 at the start, like it's fine if I ignore people in the chat. 388 00:26:34.000 --> 00:26:37.799 I kind of try and think like I do this alone, and then I'll 389 00:26:37.799 --> 00:26:41.200 look off to the site when I'm stuck. Now I think it might be 390 00:26:41.200 --> 00:26:42.519 easier if you're a little tipsy. I got to say kind of, you 391 00:26:42.519 --> 00:26:47.640 know, Lucy, I'm sure there's like a curve where too many drinks and 392 00:26:47.680 --> 00:26:51.279 it's just it's not coding anymore. But somewhere in the middle there is a 393 00:26:51.359 --> 00:26:56.519 nice sweet spot of a productivity where you're okay with people looking over your shoulder. 394 00:26:57.000 --> 00:27:00.480 At the start, I'm very quiet and reserved. By the end of 395 00:27:00.519 --> 00:27:04.240 it, that deploy button, it's like, no one can stop me. 396 00:27:07.079 --> 00:27:10.920 Oh yeah, I think that the deploy button might have to have to have 397 00:27:10.960 --> 00:27:12.440 a trigger on it. You know, X number of drinks, you know 398 00:27:14.000 --> 00:27:18.640 the deploy button anymore, it's a math before this will deploy the production exactly 399 00:27:18.880 --> 00:27:22.240 like that Google thing. Are you sure you want to send this email right 400 00:27:22.279 --> 00:27:26.359 now? So? What are some other side projects you've done that our listeners 401 00:27:26.400 --> 00:27:30.599 might be interested in? I don't think well, so I think the first 402 00:27:30.640 --> 00:27:33.960 one I did was trying to build build an application was felt because I never 403 00:27:33.039 --> 00:27:36.359 used it. So I was trying to come from the React pantagy and the 404 00:27:36.440 --> 00:27:40.720 learns felt, and I was like I was building tender for dogs, but 405 00:27:40.880 --> 00:27:42.559 trying to use felt the whole way through it. And I thought that was 406 00:27:42.599 --> 00:27:47.599 a kind of good one because I like started with that kind of built upon 407 00:27:47.640 --> 00:27:48.559 it, built upon it, and then kind of trying to learn how to 408 00:27:49.359 --> 00:27:53.680 use stayed in this library how I like make shareable components and trying to flash 409 00:27:53.720 --> 00:27:56.279 it out. I think I kind of the next time that I was working 410 00:27:56.319 --> 00:28:00.880 with Redwood, because I do a lot of deployments with Netify, so I 411 00:28:00.920 --> 00:28:03.039 kind of trying and stick with the jam stack kind of style. So I 412 00:28:03.079 --> 00:28:04.839 was like, right, I want to use Redwood. I want to deploy 413 00:28:04.880 --> 00:28:11.160 a full jam architecture. It went hardly wrong and I never made the light 414 00:28:11.200 --> 00:28:14.880 a day, but kind of like learning using the API is building upon it. 415 00:28:15.039 --> 00:28:18.160 I kind of trying always make them, make them a little bit fun 416 00:28:18.279 --> 00:28:21.160 and kind of quirky. So there's one of the reasons where I was interested 417 00:28:21.240 --> 00:28:25.559 on everyone wants to make bumble sizes smaller and optimize you know what libraries are 418 00:28:25.599 --> 00:28:29.559 pring in their product and there's always people talking about like all you know this 419 00:28:30.240 --> 00:28:33.839 library ships and it's no not point not not no one megabytes. I was 420 00:28:33.839 --> 00:28:37.759 like, how does that relate when you think about it physically? So I 421 00:28:37.799 --> 00:28:41.759 built a site where you could give it the r L and then go off 422 00:28:41.799 --> 00:28:45.079 and fetch your site, pull all the job script files and then tell you 423 00:28:45.119 --> 00:28:48.799 how many floppy disks it would take to hold that website. And then the 424 00:28:48.799 --> 00:28:53.319 top light you could upload your web pack stats Jason file and would do the 425 00:28:53.319 --> 00:28:56.839 same. So we said, you know, it would take five floppy disks 426 00:28:56.880 --> 00:29:06.480 the carrier site the folks that actually know what a flabby is. Yeah, 427 00:29:06.839 --> 00:29:08.160 I think a lot of like, well, I imagine a lot of my 428 00:29:08.319 --> 00:29:12.240 viewers are of my time and era, and I will remember those days. 429 00:29:15.359 --> 00:29:18.079 So did you find it helpful learning spell? Did it help inform the stuff 430 00:29:18.119 --> 00:29:22.920 that you do in react? I haven't had enough time like after the kind 431 00:29:22.920 --> 00:29:26.480 of stream and all, but it was interesting to see just how they approach 432 00:29:26.519 --> 00:29:30.400 things, how they thought about exstruction. I think it was I was more 433 00:29:30.440 --> 00:29:34.240 looking from like a kind of structural projects. I think the national syntax because 434 00:29:34.319 --> 00:29:37.759 they they'll never really kind of murder up. But it kind of gave me 435 00:29:37.759 --> 00:29:41.680 insid like this is how they're thinking, This is how they're building out their 436 00:29:41.680 --> 00:29:45.799 products. You know what way are they thinking? Definitely from a normal reactive 437 00:29:47.880 --> 00:29:49.480 It is something I want to explore more and learn about because it's it is 438 00:29:49.960 --> 00:29:52.680 gaining popularity. It seems to have, you know, a lot of advantages. 439 00:29:52.759 --> 00:29:56.119 So I'm curious toy, where it's going to go, how it's going 440 00:29:56.160 --> 00:30:00.160 to end up. Absolutely, So you're saying we instantly rebrand the podcast as 441 00:30:00.240 --> 00:30:03.200 this is now spelt around up. Is that a go? Or is that 442 00:30:03.240 --> 00:30:11.240 a no go? Maybe some more episodes and reactions for me to learn. 443 00:30:11.200 --> 00:30:17.880 I feel like a react with a spelt kind of showdown in order. That 444 00:30:17.960 --> 00:30:22.359 sounds fun. You can throw a view in there as well. Yeah, 445 00:30:22.680 --> 00:30:27.400 absolutely, that sounds actually really really fun. I've been meaning to actually find 446 00:30:27.400 --> 00:30:32.359 some time to actually look at spekes and actually try and build kind of a 447 00:30:32.440 --> 00:30:34.400 terplication. And then I saw yesterday as well there was a new one that 448 00:30:34.440 --> 00:30:41.279 came out called Footage Yes and it was built by one of the person's works 449 00:30:41.279 --> 00:30:45.599 for eBay on their Marco uy. So it was published I think this week, 450 00:30:45.759 --> 00:30:51.559 and it seems to be getting quite the buzz, so maybe it's the 451 00:30:51.599 --> 00:30:56.839 new hotness who knows? Yes, See, this gets into what we were 452 00:30:56.839 --> 00:31:00.119 talking about earlier of like trying to process when something's elevent or not, and 453 00:31:00.160 --> 00:31:04.759 like I'm still hitting the puz button then spelt even like it's getting to the 454 00:31:04.799 --> 00:31:08.599 point where it's like it's approaching close enough that I want to take a look 455 00:31:08.640 --> 00:31:14.000 at it. But like I tend to be super conservative on these things, 456 00:31:14.200 --> 00:31:18.920 I wait until it's like hit mainstream essentially before I dive in. Now I'm 457 00:31:18.960 --> 00:31:22.680 with you, actually, I think for me, I like to look at 458 00:31:22.839 --> 00:31:26.319 a job John Quimans and actually see how many are not asking for a particular 459 00:31:26.440 --> 00:31:32.079 framework, because that's a flavor of whether or not that tool has become kind 460 00:31:32.079 --> 00:31:36.119 of mainstream and has got I can mass behind it as opposed to you it's 461 00:31:36.160 --> 00:31:41.440 too for the cool kids. Yeah. Yeah, I definitely took notice when 462 00:31:41.440 --> 00:31:47.759 I first started to see Gatsby mentioned among like static site generators for some companies. 463 00:31:47.839 --> 00:31:51.240 I was like, Oh, that's that's really it's becoming a thing that 464 00:31:51.400 --> 00:31:55.119 and Next, like Next has just taken off. It seems like for good 465 00:31:55.160 --> 00:31:56.640 reason too. I get it. So I've got a question for y'all, 466 00:31:56.799 --> 00:32:05.000 So GitHub co pilot, is that actually going to stall new platform development? 467 00:32:05.039 --> 00:32:08.160 Because what essentially means is you have to have a certain amount of open source 468 00:32:08.200 --> 00:32:14.720 code out there for folks to be able to use Copilot on your platform. 469 00:32:15.359 --> 00:32:21.119 So unless you have that initial momentum, right, how how is that going 470 00:32:21.160 --> 00:32:22.839 to work? Is it gonna? So? Yeah, question for y'all. 471 00:32:22.960 --> 00:32:25.880 Okay, So I'll start by just saying, maybe for the listeners and for 472 00:32:25.960 --> 00:32:30.880 me personally, maybe you could just explain what GitHub copilot like is and what 473 00:32:30.960 --> 00:32:34.799 it does. The name, but I don't totally understand what it is, 474 00:32:35.319 --> 00:32:38.759 right. It's an AI extension for I think it's just vs code at this 475 00:32:38.799 --> 00:32:43.079 point, I don't know. But you essentially just type in a comment and 476 00:32:43.160 --> 00:32:46.599 then run this copilot on it and the co and the comment can be something 477 00:32:46.640 --> 00:32:50.960 along lines of give me a function that multiplies two numbers, and it will 478 00:32:50.960 --> 00:32:57.920 literally give you a function in whatever environment you're in that potentially matches what you 479 00:32:57.960 --> 00:33:00.319 asked for. You know, you could say, give me all a list 480 00:33:00.359 --> 00:33:01.920 of all the Pokemon, and it might use a fetch api to go and 481 00:33:01.960 --> 00:33:07.039 get all of the pokemon. And it's essentially using GitHub and all of the 482 00:33:07.079 --> 00:33:13.759 repos in there as a training set for this AI. And then it's you 483 00:33:13.759 --> 00:33:17.599 know, there's this essentially I guess a variant on the GPT three AI engine, 484 00:33:17.839 --> 00:33:22.480 this customize more towards code that then essentially pulls out a fragment and gives 485 00:33:22.519 --> 00:33:27.640 you the code that would do that, So it's pretty interesting. It doesn't 486 00:33:27.680 --> 00:33:30.920 mentioned like well it open source coup becomes stale because potentially this AI is right 487 00:33:30.960 --> 00:33:35.680 in everring. But we'll get to the point then where so much was written 488 00:33:35.720 --> 00:33:39.359 using an AI that the AI then starts suggesting it's a AI generated code. 489 00:33:39.480 --> 00:33:43.559 So like, at the minute, it's harvesting all this manual code that was 490 00:33:43.559 --> 00:33:45.759 written by people, and eventually it's going to be all this code written by 491 00:33:45.759 --> 00:33:51.400 an AI. So it's just given its own results back that's inevitable and will 492 00:33:51.400 --> 00:33:55.039 have it extremely quickly. Personally, I'm always skeptical of these sorts of things, 493 00:33:55.279 --> 00:33:59.680 so I have not tried it. I would be kind of fascinated to 494 00:33:59.720 --> 00:34:02.240 play this, so I'm going to have to poke around with this afterwards. 495 00:34:02.240 --> 00:34:08.199 But and any of these sort of like algorithmically decided things, especially for code, 496 00:34:08.760 --> 00:34:13.280 I'm I don't know, I'm just skeptical. I have trouble believing that 497 00:34:13.280 --> 00:34:16.039 the GitHub API is smart enough to be able to generate code that's going to 498 00:34:16.159 --> 00:34:22.119 actually solve problems for me enough that i'd actually want to use it. But 499 00:34:22.719 --> 00:34:28.679 I've also been wrong about this sort of thing before. But my initial reaction 500 00:34:28.800 --> 00:34:32.519 to skepticism that this will be useful. I've seen a little bit about it, 501 00:34:32.559 --> 00:34:37.039 and I haven't played with it yet either. But one thing that I 502 00:34:37.119 --> 00:34:42.000 have seen that people are at least a little bit upset about is how I 503 00:34:42.000 --> 00:34:46.000 guess, maybe how GitHub is classifying open source code, because different repos have 504 00:34:46.159 --> 00:34:52.079 different levels of you can use this without any attribution, or you must use 505 00:34:52.079 --> 00:34:54.840 some sort of attribution that you're borrowing from this, And I don't think that 506 00:34:54.920 --> 00:35:00.920 the AI is doing much in the way of filtering or are doing attribution for 507 00:35:01.039 --> 00:35:07.480 sources that it's getting this code from. I could potentially see it being useful, 508 00:35:07.480 --> 00:35:10.480 but I also, like UTJ, I'm a little skeptical that the good 509 00:35:10.480 --> 00:35:16.239 old manual way of figuring stuff out the route force method and then refining it 510 00:35:16.280 --> 00:35:21.519 and refactoring it into something that makes more sense to everybody besides you who wrote 511 00:35:21.519 --> 00:35:22.840 the code. Yeah, Like, well, at the top of my head 512 00:35:22.920 --> 00:35:27.639 and like like your example, like if I need a function that multiplies two 513 00:35:27.719 --> 00:35:30.639 numbers, I'm sure this tool is great, But like the day to day 514 00:35:30.679 --> 00:35:34.480 problems I'm solving is I've got like my widgets and a function, and the 515 00:35:34.480 --> 00:35:37.920 widgets have like these three properties that are unique to my company, and I 516 00:35:37.960 --> 00:35:42.480 need to do some conditional logic based off of it, right, and AI 517 00:35:42.599 --> 00:35:45.039 is not going to really help with that. So it might help me google 518 00:35:45.119 --> 00:35:51.559 something like preventing from Google things like that stupid thing like how do I capitalize 519 00:35:51.599 --> 00:35:54.000 the first letter of like like a string, like some of those stupid things 520 00:35:54.000 --> 00:35:59.719 that we've probably searched twenty thousand times and like seen the same stack overflow posts 521 00:35:59.719 --> 00:36:01.599 like it seems like it would help with that, like save me a step. 522 00:36:01.719 --> 00:36:06.800 But for like the real logic I need to write, like the nitty 523 00:36:06.800 --> 00:36:12.199 gritty stuff. That's the part I guess I'm skeptical about. Yeah, I 524 00:36:12.199 --> 00:36:16.320 think in practice you sometimes don't do things that code look right away because for 525 00:36:16.360 --> 00:36:20.559 that particular solution it works. But I'm getting the AI might be like, 526 00:36:20.639 --> 00:36:22.920 no, this is the right way, but I think, no, for 527 00:36:22.000 --> 00:36:25.440 this solution, it's okay. I can break the rules because I need to 528 00:36:25.559 --> 00:36:30.199 make this work. So yeah, definitely, I think it won't be practical 529 00:36:30.280 --> 00:36:34.239 for those kind of day to day tasks, but maybe like a fun thing 530 00:36:34.280 --> 00:36:37.480 to pay on with and if you want to be Yeah, like the examples 531 00:36:37.519 --> 00:36:40.239 of it's been very accurate and it's filt really good. Cool, But as 532 00:36:40.280 --> 00:36:44.760 you said, like, it's it's always small stuff like I need to fetch 533 00:36:45.239 --> 00:36:47.880 the users and that kind of thing. So it's it's it's saving your copy 534 00:36:47.920 --> 00:36:52.199 and pits from stack, which I don't think we should be removing us to 535 00:36:52.320 --> 00:36:57.000 write a passage of going to stack be told to use jQuery, even though 536 00:37:00.079 --> 00:37:04.159 learning with that experience. I see we said there's been reports that it's potentially 537 00:37:04.199 --> 00:37:07.360 throwing API keys and secrets. Yeah, we accidentally committed the code and I'm 538 00:37:07.360 --> 00:37:12.480 like, oh, this is where it gets funded and interesting. Well, 539 00:37:12.519 --> 00:37:16.440 and that's that's a good point. Actually, not necessarily that we're copy pasting 540 00:37:16.480 --> 00:37:22.119 from stack overflow, but learning to ask the right questions to find the answer 541 00:37:22.159 --> 00:37:27.440 that you need is such a crucial part of becoming a decent developer. It's 542 00:37:27.480 --> 00:37:31.159 like that is that is a huge part of every developer's job is how do 543 00:37:31.280 --> 00:37:37.320 I phrase this so that I can actually find an answer that makes sense for 544 00:37:37.440 --> 00:37:40.039 my use case. And the other thing that I was just thinking about is 545 00:37:40.960 --> 00:37:45.760 so much of what we do is writing not very good code the first time 546 00:37:45.800 --> 00:37:51.639 around, and then figuring out through experience and through pull request comments and through 547 00:37:51.840 --> 00:37:55.960 just building more stuff how to write better code the next time around, and 548 00:37:57.000 --> 00:38:00.320 if we have an AI kind of suggesting this is either the best way to 549 00:38:00.400 --> 00:38:05.079 do it or this is the right way to do it from the get go, 550 00:38:05.239 --> 00:38:08.400 there's a lot less of that learning experience, I think, and then 551 00:38:08.480 --> 00:38:12.920 being able to go back six months later and say, wow, this was 552 00:38:13.000 --> 00:38:15.559 really not very good. Now I think I can write it a lot better 553 00:38:15.599 --> 00:38:19.960 and a lot cleaner. Well, you could make the argument, though you 554 00:38:20.000 --> 00:38:22.760 still have to find a right way to ask the robot your question too, 555 00:38:24.480 --> 00:38:30.920 because I'm sure like the robot could potentially interpret different things depending on how you 556 00:38:31.360 --> 00:38:36.440 like phrase your comment, because somewhere deep down in the source code, something 557 00:38:36.559 --> 00:38:42.480 is parsing those search strings and feeding it to its algorithm or whatever it's doing 558 00:38:42.599 --> 00:38:45.760 under the hood. It's like the same process, but like different. Yeah, 559 00:38:45.760 --> 00:38:50.519 you mentioned like pular requests, Like if if someone raises the polar requests 560 00:38:50.559 --> 00:38:52.599 and some of the coups written by the AI, are you going to comment 561 00:38:52.639 --> 00:38:59.840 on it or you're going to say, well fix this? Right? Those 562 00:39:00.239 --> 00:39:04.039 question as well? About the ganty right, I remember the case I think 563 00:39:04.039 --> 00:39:07.320 it was it was it Uber, but it last year or the year before 564 00:39:07.360 --> 00:39:10.280 where a lady was hit by a car that was surpriving itself, if you 565 00:39:10.400 --> 00:39:15.159 like, and then the case Okay, so that's the software. If it's 566 00:39:15.239 --> 00:39:17.840 in that moment AI, who's liable? Is it? Uber? Is it 567 00:39:17.880 --> 00:39:22.559 the developer? Like? How do you like that legality becomes those kind of 568 00:39:22.599 --> 00:39:27.599 a grader because obviously the person behind it isn't is AI. So AI can't 569 00:39:27.599 --> 00:39:32.199 be held accountable because it's a person. But yeah, it's an interesting question 570 00:39:32.280 --> 00:39:36.719 because I guess going forward, as well as more and more kind of AI 571 00:39:37.239 --> 00:39:42.199 gets gets into your day to day lives, that's going to become a topic 572 00:39:42.239 --> 00:39:45.360 that needs to be kind of addressed and so it sut out otherwise. Yeah, 573 00:39:45.559 --> 00:39:47.679 I think it's one of the issues around AI is the fact that a 574 00:39:47.679 --> 00:39:52.239 lot of this is just training sets and models and we don't really understand why 575 00:39:52.360 --> 00:39:57.079 it works. We've trained it, we understand how the weights work and it 576 00:39:57.119 --> 00:40:00.920 creates this model, but we don't really understand this is why. You know, 577 00:40:00.000 --> 00:40:02.840 we've got out the slide rule and we did the calculations and YadA, 578 00:40:02.880 --> 00:40:06.119 yad YadA. I mean, nowadays, you know, when we land to 579 00:40:06.199 --> 00:40:10.000 something, it's more by training it on tons of failure as opposed to actually 580 00:40:10.000 --> 00:40:14.000 doing all the math and figuring out, Oh, here's how you hover slam 581 00:40:14.000 --> 00:40:15.159 a rocket. You know, maybe you do. I don't know. I'm 582 00:40:15.199 --> 00:40:20.719 not a rocket scientist, but yeah, it's certainly interesting, certainly interesting. 583 00:40:20.760 --> 00:40:23.960 The legal challenge around this. Wait, wow, we have come really far 584 00:40:24.559 --> 00:40:34.079 from speech recognition APIs but not may maybe. Yeah, the visual Studio code 585 00:40:34.159 --> 00:40:37.480 is web based they could implement. And it's it's chromium based too, they 586 00:40:37.639 --> 00:40:40.599 so the web speech API should be there, right, like it could. 587 00:40:40.639 --> 00:40:45.480 You could use the speech recognition API to feed into the robot. Right. 588 00:40:45.519 --> 00:40:50.719 You don't even have to write comments, just use your voice the robot. 589 00:40:50.840 --> 00:40:52.400 You could just dictate your code, right, and the robot is going to 590 00:40:52.480 --> 00:40:58.639 fill in the blanks for you. Amazing. Actually, just I'm lazy, 591 00:40:58.880 --> 00:41:08.280 just talking to the right. Okay, line to cons name open bracket. 592 00:41:08.320 --> 00:41:14.079 You've got your next article right here. Ye take that VS code extension stack 593 00:41:14.199 --> 00:41:16.639 on it. But that, yeah, there, it is nicely done. 594 00:41:17.079 --> 00:41:24.079 Well. I think that's a great time for picks, and let's start out 595 00:41:24.159 --> 00:41:29.920 this week with Carl. Yeah, so I've got one pick today and it's 596 00:41:29.960 --> 00:41:34.960 not really a pick, but I subscribe to a number of different front end 597 00:41:35.079 --> 00:41:39.960 or js emos, but what I've been doing lately is actually subscribing to emos 598 00:41:40.000 --> 00:41:46.840 about things that mightamain. For example, right now, I subscribe to an 599 00:41:46.880 --> 00:41:52.400 email and alixa one and how to be a tech lead, and there's another 600 00:41:52.480 --> 00:41:57.239 one on a on a different topic. And I do so just to every 601 00:41:57.280 --> 00:42:00.360 week. When I go through my emails and news. It basically helps me 602 00:42:00.480 --> 00:42:06.280 kind of see what's happening outside front end side. Yes, and sometimes you 603 00:42:06.360 --> 00:42:09.440 find this about this thing in exile or whatever, and I think it's gould 604 00:42:09.480 --> 00:42:14.559 to get a kind of rounded view of what's happening outside you kind of domain. 605 00:42:14.639 --> 00:42:17.280 And I definitely recommend it. Just try and find something outside you your 606 00:42:17.360 --> 00:42:22.440 language or framework, and just be keeping update on that EPs in week. 607 00:42:22.639 --> 00:42:25.480 Couldn't agree more, how about you, Paige. My pick this week is 608 00:42:25.559 --> 00:42:31.840 going to be a keyboard. It is the Logitech mx keys wireless keyboard and 609 00:42:31.880 --> 00:42:37.280 I recently I bought one this past weekend. And this thing is awesome. 610 00:42:37.760 --> 00:42:43.880 It is low profile, it is quiet, because I am not a lover 611 00:42:44.079 --> 00:42:47.960 of mechanical keyboards that make so much noise that you can't hear yourself, and 612 00:42:49.079 --> 00:42:52.800 it is so far it's just been amazing. It paired up well, it 613 00:42:52.880 --> 00:42:57.840 has three different toggles, so you can have three different computers paired to it, 614 00:42:58.039 --> 00:43:01.400 and it works for both Mac and Window and probably Linux, and it's 615 00:43:01.519 --> 00:43:07.960 just been it's fantastic. So I would highly highly recommend that if you are 616 00:43:07.000 --> 00:43:14.239 not a mechanical keyboard enthusiast and you want something that's quiet and feels just right 617 00:43:14.320 --> 00:43:16.199 on your in your hands. It's got a good weight to it, it's 618 00:43:16.199 --> 00:43:22.000 Bluetooth compatible, it's it's pretty sweet. I very much would recommend it to 619 00:43:22.000 --> 00:43:24.880 anybody who's looking for a new one. Nice. I love their mice, 620 00:43:25.320 --> 00:43:28.679 all right, Chris, What do you Got to Mine? Is kind of 621 00:43:28.719 --> 00:43:35.880 like utility application script by John Linquist. Now, I recently did a side 622 00:43:35.880 --> 00:43:39.800 project almost before and it's like in Michael, actually have like Spotlight. We 623 00:43:39.840 --> 00:43:44.440 can do commands space, I mean type for files, but this you can 624 00:43:44.480 --> 00:43:46.239 do all space and you get like a pop up where you can type in 625 00:43:46.320 --> 00:43:52.599 and now commands like open up a Google search or you can move Windows. 626 00:43:52.880 --> 00:43:55.559 But it's built on JavaScript, so you can write your own scripts, and 627 00:43:55.599 --> 00:44:00.559 it has an API. You can use MPM so you can do whatever. 628 00:44:00.559 --> 00:44:05.239 You can do a job script like call servers interact with the machine and my 629 00:44:05.360 --> 00:44:08.440 own jobscript. I think it's really cool. Ah, that's awesome. I 630 00:44:08.599 --> 00:44:12.199 totally am going to look at that. That's great. DJ. Yeah, 631 00:44:12.199 --> 00:44:15.960 I'm going to pick something called the Manfroto Magic Arm. It's basically an arm 632 00:44:16.039 --> 00:44:22.880 for mounting something like lights or like a more heavy duty camera. I've been 633 00:44:22.519 --> 00:44:27.239 doing some work in the home office and I got a nicer camera and I 634 00:44:27.280 --> 00:44:31.000 was spent a lot of time researching something that would actually hold it and found 635 00:44:31.039 --> 00:44:35.400 this thing. It's a little pricier. It's like a one hundred and fifty 636 00:44:35.440 --> 00:44:38.480 dollars arm, So like, you don't want this for like a really like 637 00:44:38.599 --> 00:44:42.880 light thing. It's designed to be a little more heavy duty. But if 638 00:44:42.880 --> 00:44:45.400 you have something that's heavier and that you need to mount somewhere, if it's 639 00:44:45.519 --> 00:44:50.719 a light, it's a camera or whatever, it's good. I am like 640 00:44:50.840 --> 00:44:54.519 the world's worst person at like putting things together and setting things up. I'm 641 00:44:54.880 --> 00:44:59.159 comically bad at it, and even I was able to figure it out. 642 00:44:59.239 --> 00:45:02.079 And it's credibly configurable. It's got like three different joints, so you can 643 00:45:02.159 --> 00:45:06.920 kind of fit it in anywhere you need. So I'll put the links in 644 00:45:06.960 --> 00:45:09.280 the in the show notes so that I don't have to read out the numbers. 645 00:45:09.280 --> 00:45:13.079 But it's a man proto magic arm and I've liked it. Yeah, 646 00:45:13.119 --> 00:45:15.480 Manfroto is great. I've got one of their tripods and they've got a nice 647 00:45:15.480 --> 00:45:19.239 little interchangeable system that you can use, so you can take the same connection 648 00:45:19.360 --> 00:45:22.400 that's on your tripod and put it onto any of their stuff. I think. 649 00:45:22.480 --> 00:45:24.400 So that's really handy. All right, So my pick for this week 650 00:45:24.559 --> 00:45:28.440 is solid JS. So I don't know if you've taken a look at this 651 00:45:28.559 --> 00:45:32.960 yet, but it's essentially if you're looking for the spelt speed but you don't 652 00:45:34.000 --> 00:45:37.880 want to leave React world, solid JS is a really good alternative. It's 653 00:45:37.960 --> 00:45:45.440 kind of as if somebody reimagined React starting at like twenty twenty. So it's 654 00:45:45.480 --> 00:45:51.599 all functional components, it's all reactive, so it's all using kind of hooks 655 00:45:51.880 --> 00:45:57.079 and similar kind of this data changes then update this kind of thing, and 656 00:45:57.159 --> 00:46:02.119 it is wicked fast. It's certainly something to look into if you still want 657 00:46:02.159 --> 00:46:05.840 to have components, you still maybe wanted to do the micro affee thing. 658 00:46:06.400 --> 00:46:08.440 You don't want to lose from are area already with React, but you do 659 00:46:08.559 --> 00:46:14.280 want some of it. That's just crazy fast solid jass is a cool thing 660 00:46:14.320 --> 00:46:17.280 to look into. Nice all right. Well, that I think wraps us 661 00:46:17.360 --> 00:46:21.960 up for this week. Tuning again next week for React round Up. See 662 00:46:22.000 --> 00:46:23.679 you then see everybody. Yeah,