WEBVTT 1 00:00:06.280 --> 00:00:09.519 Welcome to React Round Up, and I'm Jack Harrington, your 2 00:00:09.519 --> 00:00:13.439 host for today and with me our page. Hey everybody, 3 00:00:13.720 --> 00:00:17.559 and TJ Hey everyone, And our guest today. 4 00:00:17.480 --> 00:00:20.199 Is Chris Laughlin. Hey everybody, all right, Well. 5 00:00:20.160 --> 00:00:22.039 Chris, why do you start us out by telling us 6 00:00:22.079 --> 00:00:24.359 a little bit about why you're here and what you 7 00:00:24.359 --> 00:00:25.079 want to talk about? 8 00:00:25.199 --> 00:00:25.399 Yeah? 9 00:00:25.480 --> 00:00:28.039 So I was My name is Chris Laughlin. I recently 10 00:00:28.280 --> 00:00:32.119 published an article for side Points. I'm using the webcit 11 00:00:32.200 --> 00:00:35.159 speech recognition ape guy built in the browser and then 12 00:00:35.479 --> 00:00:40.079 building that into erect application. So many to utilize your 13 00:00:40.159 --> 00:00:45.359 voice to potentially control an application, do different commands, interact 14 00:00:45.359 --> 00:00:47.640 with it in a novel in different way. 15 00:00:47.640 --> 00:00:50.079 And that's awesome. So how did you apply that in 16 00:00:50.079 --> 00:00:51.079 this particular case? 17 00:00:51.200 --> 00:00:52.560 So in this case I kind of went through an 18 00:00:52.560 --> 00:00:58.560 iteration of building a basic speech recognition function alown a 19 00:00:58.600 --> 00:01:01.799 user bibility to turn on the marketphone, speak to the browser, 20 00:01:02.000 --> 00:01:04.239 and then kind of follo about how I get like 21 00:01:04.319 --> 00:01:07.040 build this and do the React way of thinking. So 22 00:01:07.359 --> 00:01:11.200 using you know, hooks is the modern way of building 23 00:01:11.640 --> 00:01:14.519 React applications to decide write, okay, let's build this in 24 00:01:14.560 --> 00:01:17.239 first just a normal functional component, then start ups tracking 25 00:01:17.319 --> 00:01:19.680 us out in the hook trying to find the bits 26 00:01:19.680 --> 00:01:24.599 and pieces that were unique and reusable, and then created 27 00:01:24.959 --> 00:01:29.680 a used voice hook that you could then start recording voice, 28 00:01:29.719 --> 00:01:33.879 stop recording voice, and in return that translated text. So 29 00:01:33.920 --> 00:01:36.680 then a React application could you take advantage of this. 30 00:01:37.079 --> 00:01:38.920 The example that I used in the in the article 31 00:01:39.280 --> 00:01:43.760 was to search for all books based on the author's name. 32 00:01:43.959 --> 00:01:47.439 So using the Open Library Web API, you could say 33 00:01:47.439 --> 00:01:51.359 like your favorite authors, or like Roule Dal or think 34 00:01:51.359 --> 00:01:52.680 of other authors. I can't think of any of the 35 00:01:52.680 --> 00:01:58.400 top of the head. Yeah, yeah, all token. So then 36 00:01:58.480 --> 00:02:01.519 using that that then call it and bring back a 37 00:02:01.599 --> 00:02:05.239 list of books. I think the beauty is that you 38 00:02:05.319 --> 00:02:08.000 never touched the keyboard de voice to do that. Interactions 39 00:02:08.080 --> 00:02:10.039 all through vocal commands. 40 00:02:10.360 --> 00:02:15.159 So was there some business application that you were trying 41 00:02:15.199 --> 00:02:18.240 to solve with this or was this more of just hey, 42 00:02:18.840 --> 00:02:20.960 this is a cool web API. I want to see 43 00:02:21.000 --> 00:02:22.439 what I can do with it. 44 00:02:23.400 --> 00:02:26.080 I yet to find a business API. I had a 45 00:02:26.080 --> 00:02:29.639 business reason for applying this, Yeah, I think for my case, like, 46 00:02:29.639 --> 00:02:31.080 I do a lot of kind of like you know, 47 00:02:31.120 --> 00:02:33.120 side projects where I try and take an API and 48 00:02:33.479 --> 00:02:36.080 or library and build something fun and interesting. So the 49 00:02:36.120 --> 00:02:39.919 first version of this application was a Giffee search, So 50 00:02:40.039 --> 00:02:42.280 using the giffees API to like search for gifts using 51 00:02:42.280 --> 00:02:44.879 your voice because usually like I can never think of 52 00:02:44.919 --> 00:02:46.719 what the type out, but I could probably just say 53 00:02:46.759 --> 00:02:49.199 a phrase and get back like a funny gift. So 54 00:02:49.280 --> 00:02:51.800 I wanted to like apply this to see different levels. 55 00:02:52.280 --> 00:02:54.960 But from kind of buildness side it can. It made 56 00:02:55.000 --> 00:02:58.159 me think about different applications. So if you had a website, 57 00:02:58.199 --> 00:03:01.039 you could potentially have like a don' want to say 58 00:03:01.039 --> 00:03:02.879 the key word case people are listening to this outliine, 59 00:03:02.919 --> 00:03:05.840 but hey, no gorgle, you know interock with my site, 60 00:03:05.879 --> 00:03:08.840 so like no contact support. Potentially you know, tell them 61 00:03:08.879 --> 00:03:11.120 your problem in type the problem. 62 00:03:11.240 --> 00:03:13.240 Yeah, I think I've seen this. This is to me, 63 00:03:13.280 --> 00:03:15.159 this falls in the bucket of the sort of APIs 64 00:03:15.159 --> 00:03:18.319 that are pretty common and native mobile apps that I 65 00:03:18.319 --> 00:03:20.879 think people just don't expect to be on the web 66 00:03:21.080 --> 00:03:24.159 because I know I personally don't use it, but I'm 67 00:03:24.240 --> 00:03:27.759 aware of several native apps that have this, like searches. 68 00:03:27.800 --> 00:03:30.360 I think the super common one that anytime you're searching 69 00:03:30.400 --> 00:03:34.039 for someone something, giving people an option to just say 70 00:03:34.080 --> 00:03:38.360 it versus typing it out can be kind of handy 71 00:03:38.879 --> 00:03:42.759 and actually that makes me wonder because I'm wondering, like 72 00:03:43.360 --> 00:03:46.479 what the engine is under this, Like is the API good? Like, 73 00:03:46.759 --> 00:03:49.120 because that's that's like my biggest concern with these things 74 00:03:49.159 --> 00:03:51.840 that like I talk to these and I search for J. R. R. 75 00:03:51.960 --> 00:03:56.680 Tolkien and then it's looking for like JBB Tollinger or 76 00:03:56.719 --> 00:03:59.840 something like that. Right, So when you're playing with this, 77 00:04:00.120 --> 00:04:03.400 like did it do a pretty good job working with that? 78 00:04:04.240 --> 00:04:07.879 I was pleasantly surprised how well it worked. Like I 79 00:04:08.000 --> 00:04:12.000 have an Irish accent, and usually like when I talk 80 00:04:12.080 --> 00:04:14.680 to my own like smart speaker at home, I would 81 00:04:14.680 --> 00:04:17.240 say seven percent time it doesn't understand me for the 82 00:04:17.279 --> 00:04:19.319 browser able to pick us up, and I've you know, 83 00:04:19.600 --> 00:04:22.360 I mumbled towards it and I talk really fast and 84 00:04:22.399 --> 00:04:25.160 talk really slow and pitch my voice. It was still 85 00:04:25.160 --> 00:04:29.920 Attleit pickout everything you can feed it like a grammar list, 86 00:04:30.079 --> 00:04:31.560 so you can say, like these are no key words 87 00:04:31.600 --> 00:04:33.879 that you're going to be looking at for and particular 88 00:04:33.959 --> 00:04:37.439 words that may or may not be understood. As far 89 00:04:37.439 --> 00:04:41.160 as understanding it's it's working off like the Chrome level API. 90 00:04:41.240 --> 00:04:42.720 So I think Google's may be back in this with 91 00:04:42.879 --> 00:04:44.600 their can I speak condition. 92 00:04:45.199 --> 00:04:48.920 Yeah, it's sort of interesting because considering it's a browser API, 93 00:04:50.120 --> 00:04:53.800 presumably each browser would have to provide their own implementation, 94 00:04:54.199 --> 00:04:56.519 right Like, I can't. I doubt it's like the W 95 00:04:56.639 --> 00:04:59.160 three C doesn't like they wouldn't provide an implementation. So 96 00:04:59.199 --> 00:05:02.160 I imagine it would be up to like Google and Apple 97 00:05:02.399 --> 00:05:05.600 and Mozilla, et cetera to sort of come up with 98 00:05:05.720 --> 00:05:07.920 the actual engine that drives this, right. 99 00:05:08.399 --> 00:05:08.600 Yeah. 100 00:05:08.720 --> 00:05:10.800 Unfortunately, like the Bruiser support and I think for that 101 00:05:10.839 --> 00:05:13.360 reason is very minimal. I think at the moment it's 102 00:05:13.839 --> 00:05:18.439 agile Chrome fully supported, Firefox with low support, so you're 103 00:05:18.519 --> 00:05:20.560 kind of stuck with the browser that you're working with, 104 00:05:21.040 --> 00:05:23.319 and that that's kind of the other challenge when it 105 00:05:23.360 --> 00:05:28.879 came to emviolentness was doing Browiser detection inside of the hook, 106 00:05:29.160 --> 00:05:33.079 and then you know with doing conditional statements inside hooks, 107 00:05:33.120 --> 00:05:35.000 like you know, we use a fact and stuff don't 108 00:05:35.000 --> 00:05:37.600 play nice if you put them inside the conditional so 109 00:05:37.720 --> 00:05:39.439 kind of having the hacker round that. 110 00:05:39.800 --> 00:05:41.879 So you tell me us or go to Chrome where 111 00:05:41.920 --> 00:05:46.120 this isn't going to work, I say seventy percent. I'm sorry, 112 00:05:46.360 --> 00:05:46.839 go ahead. 113 00:05:48.079 --> 00:05:50.399 I got to say seventy percent is pretty good. My 114 00:05:50.399 --> 00:05:52.839 my home speaker seems to hate me. You can get 115 00:05:52.879 --> 00:05:56.000 like thirty percent, but I'm really impressed here. I think 116 00:05:56.000 --> 00:05:58.079 this article to me is like a twofer. You get 117 00:05:58.240 --> 00:06:03.920 not only this insight into this really cool speed recognition API, 118 00:06:04.040 --> 00:06:06.279 but also how to write a custom hook around it, 119 00:06:06.319 --> 00:06:08.600 which I think a lot of people tend to avoid 120 00:06:08.920 --> 00:06:11.920 in React. So it's good to see a demonstration of that. 121 00:06:12.079 --> 00:06:14.079 Is that something you do a lot, it's customer hooks? 122 00:06:14.120 --> 00:06:18.000 Yeah, Like I'm a full time React developer with the 123 00:06:18.079 --> 00:06:20.959 kind of like these little side projects that build. Usually 124 00:06:21.199 --> 00:06:23.399 you always end up in like one or two files 125 00:06:23.399 --> 00:06:26.240 at max, so kind of build little hooks in and 126 00:06:26.560 --> 00:06:29.319 you know, trying to abstract layers out. And as part 127 00:06:29.319 --> 00:06:31.600 of the learning process of doing this was like how 128 00:06:31.600 --> 00:06:33.040 can I build this? How I can make it reusable? 129 00:06:33.759 --> 00:06:36.240 I probably won't use it again because you know, the 130 00:06:36.279 --> 00:06:38.319 middle of the side project is completed, it's dead, and 131 00:06:38.360 --> 00:06:41.240 the next sledge project takes over. But building it into 132 00:06:41.279 --> 00:06:44.360 like a reusable kind of pattern at least teaching me 133 00:06:44.399 --> 00:06:48.720 how to build scalable, reusable code. Maybe eventually I'll release 134 00:06:48.759 --> 00:06:51.839 it as an MPM package, but there's probably already one 135 00:06:52.199 --> 00:06:52.879 rut there that does this. 136 00:06:53.879 --> 00:06:56.839 We use voice as a fantastic name, so you've got 137 00:06:56.839 --> 00:06:58.680 the naming down as well. 138 00:07:00.160 --> 00:07:00.680 The domain. 139 00:07:03.560 --> 00:07:07.480 I am curious how you chose to deal with because 140 00:07:07.920 --> 00:07:10.600 this strikes me as a really unique situation, like a 141 00:07:10.639 --> 00:07:15.399 hook that sort of like conditionally works. So I'm curious, 142 00:07:15.439 --> 00:07:18.439 like what approach did you take, Like what what would 143 00:07:18.439 --> 00:07:20.279 look using the hook look like if you're in a 144 00:07:20.279 --> 00:07:22.480 browser that doesn't support these APIs at all? 145 00:07:22.639 --> 00:07:25.600 So if yours doesn't support it, it'll it'll do the 146 00:07:25.600 --> 00:07:28.920 pricer detection annoyingly in the hook, like the state to 147 00:07:29.000 --> 00:07:33.360 handle what text was returned from the API and the 148 00:07:33.439 --> 00:07:35.480 weather it's recording or not recording, because you can turn 149 00:07:35.480 --> 00:07:39.519 it off and on. Annoyingly, you can't have them after 150 00:07:39.560 --> 00:07:41.879 a conditional statement because of the way hooks work, so 151 00:07:41.920 --> 00:07:44.240 you can't have to declare the state. They'll exist. But 152 00:07:44.240 --> 00:07:46.959 then an if statement will check to see if your 153 00:07:46.959 --> 00:07:49.720 browser supports it and then returns a value to say 154 00:07:49.720 --> 00:07:51.839 like this is an own supportive browser, which then you 155 00:07:51.879 --> 00:07:54.319 can control like a visual message to say, you know, 156 00:07:54.800 --> 00:07:57.680 please try a different browser. I wish that I could 157 00:07:57.720 --> 00:07:59.720 have had that before and not even created any of 158 00:07:59.720 --> 00:08:02.120 the state variables that were needed for this to work, 159 00:08:02.279 --> 00:08:05.120 But the nature of React kind of just made it 160 00:08:05.120 --> 00:08:05.600 go that way. 161 00:08:05.920 --> 00:08:09.160 Is a really great library out there, React use that 162 00:08:09.279 --> 00:08:11.959 has a whole bunch of really great hooks on it, 163 00:08:12.199 --> 00:08:15.920 and it does have a speech one, but it's actually 164 00:08:15.920 --> 00:08:18.360 the opposite. It's given me a piece of text and 165 00:08:18.399 --> 00:08:20.920 I'll speak it for you. So this could be a 166 00:08:21.000 --> 00:08:23.759 nice other side of that. So you can always pr 167 00:08:23.839 --> 00:08:26.240 that into that repo and get it out there. 168 00:08:26.480 --> 00:08:29.720 Yeah, I think contribute to one people where they were 169 00:08:29.720 --> 00:08:31.600 taking different hooks for different uses, and one was that 170 00:08:31.879 --> 00:08:35.000 used economic code. So you can declare the use economic 171 00:08:35.039 --> 00:08:38.000 code and the user could type in the a being 172 00:08:38.600 --> 00:08:41.639 updown that right, start and then trigger and action based 173 00:08:41.679 --> 00:08:41.840 on that. 174 00:08:42.200 --> 00:08:46.279 I've seen some other repos or some other pieces of 175 00:08:46.840 --> 00:08:49.080 code that have done that, And one of the developers 176 00:08:49.120 --> 00:08:51.399 that I learned from actually told me that he had 177 00:08:51.399 --> 00:08:54.000 done that at a previous place of employment, that if 178 00:08:54.000 --> 00:08:56.240 you typed in the economic code, a fireball and come 179 00:08:56.279 --> 00:08:59.600 across the browser window, which is pretty cool. So you 180 00:08:59.639 --> 00:09:02.679 said they you work with React full time in your 181 00:09:02.759 --> 00:09:04.360 day job. What is your day job? 182 00:09:04.639 --> 00:09:09.559 So I'm like titles principal software engineer, but I manage 183 00:09:09.559 --> 00:09:11.799 the team of UI developers working on a secret book. 184 00:09:11.799 --> 00:09:13.600 So I work for a company called rap at seven. 185 00:09:14.320 --> 00:09:17.200 We do like cybersecurity, so we have like a large 186 00:09:17.200 --> 00:09:20.360 scale React project, our own style and library. We build 187 00:09:20.360 --> 00:09:23.360 our own React component library as well, so we work 188 00:09:23.399 --> 00:09:27.679 across those teams kind of building maintaining improving our scalability 189 00:09:27.720 --> 00:09:30.320 when it comes to building a component that can work 190 00:09:30.360 --> 00:09:32.960 across from multiple products as well. Building this into the 191 00:09:33.000 --> 00:09:37.240 more like usable, user friendly, and also adding like layers 192 00:09:37.240 --> 00:09:39.840 of security in there to keep things protected and safe. 193 00:09:40.159 --> 00:09:42.320 That sounds challenging to say the least. 194 00:09:44.080 --> 00:09:46.720 It's very challenging, especially like with the code basically work on. 195 00:09:47.120 --> 00:09:51.759 We'd started whenever React with Virgin fourteen and everything was 196 00:09:51.759 --> 00:09:55.679 written completely different then, and when you have a code 197 00:09:55.720 --> 00:09:58.399 base of over the thousand files, it's hard to rewrite 198 00:09:58.440 --> 00:10:01.759 everything the modern way doing that. So we have like 199 00:10:01.879 --> 00:10:07.200 three different state management libraries mixed across the code base. Classes, 200 00:10:07.360 --> 00:10:09.519 functional components, hooks, all that kind of stuff. 201 00:10:09.559 --> 00:10:11.840 Yeah, that can be really challenging to make sure that 202 00:10:12.000 --> 00:10:14.039 you get that consistency across the code base. 203 00:10:14.559 --> 00:10:15.200 It's interesting. 204 00:10:15.639 --> 00:10:18.200 I'm a Princevial engineer as well, and it's cool to 205 00:10:18.240 --> 00:10:21.960 see you going and investing your time into building these 206 00:10:22.000 --> 00:10:25.360 little projects like this and communicating that that information about 207 00:10:25.360 --> 00:10:28.559 how those work, because that's actually I think one of 208 00:10:28.600 --> 00:10:31.360 the primary roles of a princevial engineer is that kind 209 00:10:31.360 --> 00:10:33.879 of education. So is this something you do a lot of, 210 00:10:34.000 --> 00:10:36.799 is like talk to your teams, show small examples of 211 00:10:36.799 --> 00:10:38.399 how to do stuff. 212 00:10:38.879 --> 00:10:41.840 Yeah, I find like I'm very much of a do 213 00:10:41.960 --> 00:10:44.200 something to learn kind of person, So I'll have to 214 00:10:44.240 --> 00:10:46.440 build a little small Projects'll have to take some of them. 215 00:10:46.480 --> 00:10:49.679 Like if I find someone tweaking about some new utility library, 216 00:10:49.679 --> 00:10:51.519 I'll go off and try and build an example so 217 00:10:51.559 --> 00:10:53.200 I can understand that to bring it back to the 218 00:10:53.240 --> 00:10:56.080 team and they kind of recycle and share that knowledge 219 00:10:56.360 --> 00:10:59.320 because there's no there's no like well there's lots of 220 00:10:59.320 --> 00:11:02.159 courses money, but sort of there's no formal education. JavaScript 221 00:11:02.159 --> 00:11:05.360 that wasn't like a certificateation you could do, so kind 222 00:11:05.360 --> 00:11:07.320 of have to learn and it was always learning in 223 00:11:07.679 --> 00:11:09.600 the evenings and then bring it back into the team. 224 00:11:09.679 --> 00:11:12.879 So now we try and change that pattern. We're doing 225 00:11:12.879 --> 00:11:15.519 a lunch and learn with the team, you know, maybe 226 00:11:15.919 --> 00:11:18.879 using the course or using someone, you know, random tweak 227 00:11:18.919 --> 00:11:22.080 that we've seen building the pots. We have one really 228 00:11:22.080 --> 00:11:24.919 interestingly recently where we were looking at a different way 229 00:11:24.960 --> 00:11:28.200 of doing a switch statement. So using conditional cases, we 230 00:11:28.360 --> 00:11:30.919 pass in through and then the logic is the needs 231 00:11:30.919 --> 00:11:33.200 of the cases and whether like this is a viable 232 00:11:33.240 --> 00:11:36.039 thing to use, when is the use case for how 233 00:11:36.080 --> 00:11:38.440 you can build it, and then building out different examples 234 00:11:38.559 --> 00:11:40.360 the team could understand what it meant. 235 00:11:40.639 --> 00:11:42.519 That's what I was going to ask, is you know, 236 00:11:42.559 --> 00:11:45.639 it's it's very cool to learn about this stuff, but 237 00:11:45.720 --> 00:11:47.919 sometimes I'm just at a loss for what do I 238 00:11:48.000 --> 00:11:51.840 want to learn because there's so many interesting things happening, 239 00:11:51.919 --> 00:11:55.559 and Twitter is, you know, changing at rapid speed. So 240 00:11:55.600 --> 00:11:58.399 how do you how do you kind of, I guess, 241 00:11:58.399 --> 00:12:01.639 filter out the grip it and say, hey, this is 242 00:12:01.639 --> 00:12:05.080 something that actually could be interesting to learn about and 243 00:12:05.120 --> 00:12:08.759 then be possibly be useful in the day to day 244 00:12:08.759 --> 00:12:09.960 of what our team is doing. 245 00:12:10.399 --> 00:12:13.919 I think I'm very guilty of using Twitter too much 246 00:12:13.919 --> 00:12:17.159 as like a pipeline for information. But I think after 247 00:12:17.200 --> 00:12:19.399 a while you see the pattern of someone will tweet 248 00:12:19.480 --> 00:12:21.120 this is amazing, this is the best thing ever, and 249 00:12:21.120 --> 00:12:23.080 then two weeks later a little tweet and like, this 250 00:12:23.120 --> 00:12:24.919 is the best thing ever. In a contradict that the 251 00:12:24.960 --> 00:12:27.399 first week I was actually talking to them. Remember the 252 00:12:27.399 --> 00:12:29.159 team recent but kind of you know, kind of grew 253 00:12:29.159 --> 00:12:31.840 your knowledge how to focus. And he was asking me 254 00:12:32.039 --> 00:12:34.879 like different books to recommend, and I kind of let 255 00:12:35.039 --> 00:12:39.159 more towards like recommend the podcasts, Like this podcast is 256 00:12:38.799 --> 00:12:41.840 a great resource. But there's a number of other react 257 00:12:41.879 --> 00:12:44.440 ones and dropscript ones are you and I find they're 258 00:12:44.480 --> 00:12:48.240 really good because like this, these people are you know, focus, 259 00:12:48.320 --> 00:12:51.840 they're trying to like share and teach. That'll filter out 260 00:12:52.120 --> 00:12:55.360 all the noise you get from Twitter or Another great 261 00:12:55.399 --> 00:13:00.519 resource is like newsletters, so you know Josh Grip Weekly Actiatus. 262 00:13:00.519 --> 00:13:02.799 Those kind of news letters can give you a good 263 00:13:02.799 --> 00:13:05.000 list of like these are the articles of people have 264 00:13:05.440 --> 00:13:08.720 felt of some importance and they're worth looking into. There's 265 00:13:08.720 --> 00:13:11.159 a lot of noise and a lot of information, but 266 00:13:11.200 --> 00:13:13.279 it's kind of over time you learn how to felt 267 00:13:13.279 --> 00:13:15.159 the right like yeah I don't need to read this, 268 00:13:15.279 --> 00:13:16.399 or oh yeah I should read that. 269 00:13:16.879 --> 00:13:18.679 I feel like one of the more valuable skills is 270 00:13:18.679 --> 00:13:22.679 you almost develop like your own algorithm for processing all 271 00:13:22.759 --> 00:13:27.120 this information, right, Like if I see something come up 272 00:13:27.159 --> 00:13:29.840 this many times, or if this is relevant to me 273 00:13:29.879 --> 00:13:32.440 in some way, then it reaches that level of like 274 00:13:32.440 --> 00:13:35.360 maybe I should check this out otherwise, like because when 275 00:13:35.399 --> 00:13:37.679 you first get started, you just get it's easy to 276 00:13:37.720 --> 00:13:40.240 get overwhelmed because you think like everything's important. Then you 277 00:13:40.279 --> 00:13:43.320 realize like only a small subset is probably important to you, 278 00:13:43.399 --> 00:13:46.200 and learning to recognize that it's almost the skill in 279 00:13:46.240 --> 00:13:46.919 and of itself. 280 00:13:47.320 --> 00:13:47.519 Yeah. 281 00:13:47.559 --> 00:13:49.919 I think filtering is really good because at the beginning 282 00:13:51.080 --> 00:13:53.799 I would read every article and try and understand everything, 283 00:13:53.879 --> 00:13:55.440 and then I got the point where like, well, what 284 00:13:55.480 --> 00:13:58.000 am I doing day to day that I need to improve? 285 00:13:58.080 --> 00:14:00.879 So like, if I see a typescript, I don't write 286 00:14:01.440 --> 00:14:03.879 use typescript, I do want to eventually use it. About 287 00:14:04.000 --> 00:14:06.360 me keeping up with the latest of bounce with the 288 00:14:06.360 --> 00:14:09.200 typescript when I'm not actively doing it, isn't that I 289 00:14:09.279 --> 00:14:11.240 help where I could be reading something else? So like, 290 00:14:11.919 --> 00:14:15.360 is there a new table library out there that's so fast? 291 00:14:15.440 --> 00:14:18.240 Is there a better you know, API for talking to 292 00:14:18.279 --> 00:14:20.960 graph gl or managing the state and opusing all that 293 00:14:21.440 --> 00:14:23.519 instead of learning something I know I'm never going to use. 294 00:14:24.120 --> 00:14:27.320 I go through the pattern of open a newsletter out 295 00:14:27.360 --> 00:14:30.080 of ring the pocket and then never read it over again. 296 00:14:30.960 --> 00:14:33.200 But I start tiging things like I will eventually read 297 00:14:33.240 --> 00:14:36.080 this article usually a date. 298 00:14:38.039 --> 00:14:41.000 Yeah, you end up with a massive reading list. I know, 299 00:14:41.080 --> 00:14:44.120 I have several incognito windows that it's like, oh, yeah, 300 00:14:44.240 --> 00:14:46.759 I'll get there, eventually, I'll read that article. 301 00:14:46.799 --> 00:14:47.320 I know it. 302 00:14:48.080 --> 00:14:51.360 And yeah, unfortunately I end up falling into that trap 303 00:14:51.360 --> 00:14:54.480 of clicking on those clickbait articles just too easily. 304 00:14:54.799 --> 00:14:59.720 Yeah, the group tabs that Chrome introduced not that long ago, 305 00:15:00.000 --> 00:15:03.320 it's been a good thing and a huge detriment to 306 00:15:03.360 --> 00:15:05.399 me because I'm never going to close that group, even 307 00:15:05.399 --> 00:15:07.879 though I'm actually never going to read those articles that 308 00:15:07.960 --> 00:15:09.039 I grouped together. 309 00:15:10.679 --> 00:15:14.039 I've seen the recently released search for your Times and 310 00:15:14.080 --> 00:15:17.679 I was like, that's a submission to broken, like a 311 00:15:17.720 --> 00:15:19.960 broken and just making it worse. 312 00:15:22.240 --> 00:15:25.960 So true, Hi Carl, welcome to the party. 313 00:15:26.240 --> 00:15:26.879 Hey hey, s. 314 00:15:28.519 --> 00:15:30.200 Had him over a bit. 315 00:15:32.519 --> 00:15:35.919 Yeah, absolutely, meet Chris. And Chris did an article on 316 00:15:36.200 --> 00:15:40.320 speech recognition API. Yes, hey, good good, I'm by the 317 00:15:40.679 --> 00:15:43.720 I'm in England. So just because the border and nine. 318 00:15:44.799 --> 00:15:45.399 That name is. 319 00:15:47.440 --> 00:15:49.039 Enjoined the Goodwiller, We're finally. 320 00:15:49.879 --> 00:15:52.600 Oh gosh today it was okay in the morning, but 321 00:15:52.639 --> 00:15:55.879 now I've been reading a bit so yeah, passic English weather. 322 00:15:56.799 --> 00:15:59.200 Say good weather in England. That's that's not as. 323 00:15:59.000 --> 00:16:03.799 Advertised, unheard of, so Chris, I'm curious because I'm looking 324 00:16:04.159 --> 00:16:06.840 you've written a number of articles for site Point. How 325 00:16:06.879 --> 00:16:10.360 did you get started kind of taking these projects that 326 00:16:10.399 --> 00:16:13.559 you were building and then besides sharing them with your 327 00:16:13.600 --> 00:16:16.039 team and with the people that you work with regularly, 328 00:16:16.120 --> 00:16:18.799 how did you get into like actually writing these these 329 00:16:18.960 --> 00:16:20.159 tutorials and stuff. 330 00:16:20.559 --> 00:16:22.919 I think it's some of like a couple of years ago, 331 00:16:23.200 --> 00:16:25.159 like most developers always have my own blog, and you 332 00:16:25.159 --> 00:16:29.559 spent more time rewriting the blog architecture and writing blog posts. 333 00:16:30.000 --> 00:16:31.159 And I got the one where like when I did 334 00:16:31.159 --> 00:16:33.919 write a blog post, I was like, yeah, this is cool, 335 00:16:34.080 --> 00:16:35.799 maybe I'll share it all read it, but no one's 336 00:16:35.879 --> 00:16:37.879 really going to read it, and there's no motivation to 337 00:16:37.960 --> 00:16:40.519 keep me learning, and were just and trying to find 338 00:16:40.519 --> 00:16:42.840 me things it was fly enough to develop our work with. 339 00:16:43.080 --> 00:16:46.159 He had written a Java article for site Points and 340 00:16:46.159 --> 00:16:47.879 he was like, yeah, like you can submit an article 341 00:16:48.000 --> 00:16:50.600 and you know they'll publish it. I'm like, this is 342 00:16:50.639 --> 00:16:52.799 this is awesome. So this has given me like a 343 00:16:52.879 --> 00:16:54.759 kick in the backside to say, right, you know I've 344 00:16:54.759 --> 00:16:58.240 submitted this, I need to actually build and write and 345 00:16:58.600 --> 00:17:01.679 you know, create an application for this post. So that 346 00:17:01.759 --> 00:17:04.400 kind of like snowball from there. And every time I 347 00:17:04.400 --> 00:17:06.240 would post something, that's like, right, well, now I need 348 00:17:06.240 --> 00:17:08.279 to find a new idea to post the next one. 349 00:17:08.400 --> 00:17:12.119 And it kept me like really engaged with like what 350 00:17:12.200 --> 00:17:15.519 can I learn new? What's brand new out there. One 351 00:17:15.559 --> 00:17:18.480 of the articles I posted recently was on the React 352 00:17:18.480 --> 00:17:21.119 framework Remotion, and it was like brand new at the 353 00:17:21.119 --> 00:17:23.839 time building videos using React, and I was like, this 354 00:17:23.920 --> 00:17:26.759 is amazing. I need to write about this share so 355 00:17:26.799 --> 00:17:29.240 other people can see it and can continue to getting 356 00:17:29.240 --> 00:17:31.839 that feedback. And it's kind of it's rewardedt to see 357 00:17:31.839 --> 00:17:33.839 that you're sharing your knowledge, are getting it out there 358 00:17:33.880 --> 00:17:36.480 so others can build and grow and do the same. 359 00:17:36.799 --> 00:17:41.160 Say, Remotion is really really fun. Maybe you could if 360 00:17:41.160 --> 00:17:43.720 you wrote about it, could explain to the audience like 361 00:17:43.880 --> 00:17:46.279 roughly what it is, because I think it's a pretty 362 00:17:46.279 --> 00:17:47.160 exciting project. 363 00:17:47.200 --> 00:17:50.880 Also, yeah, it's really cool. I kind of liken it too. 364 00:17:51.480 --> 00:17:54.960 It's almost like Windows movie Maker, but for the browser, 365 00:17:55.039 --> 00:17:57.839 so you can like you run Remotion that's like the 366 00:17:57.839 --> 00:18:00.640 applications itself, and then it'll bring up a prevy window 367 00:18:00.720 --> 00:18:04.079 you can scrub through a video. But the brilliant part 368 00:18:04.160 --> 00:18:05.920 is like how you actually create a video. So if 369 00:18:05.920 --> 00:18:07.559 I want to go and create a vidy and I 370 00:18:07.680 --> 00:18:10.279 and like I needed graphics and move around the screen, 371 00:18:10.319 --> 00:18:12.519 I would have to get you some software written by 372 00:18:12.519 --> 00:18:16.680 Adobe or someone like that and pay licensing and everything. 373 00:18:16.759 --> 00:18:20.359 Whereas remotions free open source. I can just run that 374 00:18:21.039 --> 00:18:24.079 from MPM. It works in the visor. So the core 375 00:18:24.200 --> 00:18:27.279 Remotion is like a library that allows you to use 376 00:18:27.319 --> 00:18:32.039 React components to build out frames of a video, and 377 00:18:32.039 --> 00:18:34.160 then re Emotion allows you to expert out so you 378 00:18:34.519 --> 00:18:39.559 can use reacts, HTML, CSS, whatever you normally build a 379 00:18:39.559 --> 00:18:42.920 web application of, but it generates a video at the 380 00:18:43.000 --> 00:18:43.440 end of it. 381 00:18:43.720 --> 00:18:46.680 Yeah, and it's cool because I've always thought it's an 382 00:18:46.680 --> 00:18:49.960 interesting project because there are people out there that use 383 00:18:50.039 --> 00:18:52.759 like these, like Adobe tools or there's other tools like 384 00:18:52.839 --> 00:18:55.599 it to create these things. But and there's people that 385 00:18:55.640 --> 00:18:57.920 are very good at that. But if you're building with 386 00:18:58.559 --> 00:19:01.160 web tech, if you're building with React, like it opens 387 00:19:01.200 --> 00:19:03.000 so many doors that you could never do with a 388 00:19:03.039 --> 00:19:06.200 tool like that. Like if you wanted to programmatically do 389 00:19:06.279 --> 00:19:08.640 some things as part of your videos, Like let's say 390 00:19:08.640 --> 00:19:12.079 you want to generate a unique video for like each 391 00:19:12.119 --> 00:19:15.000 of your users, right and bring in some like customized stats, 392 00:19:15.039 --> 00:19:17.920 Well you can use a fetch call to bring in 393 00:19:17.960 --> 00:19:20.839 some stats and like incorporate that into your video production 394 00:19:21.039 --> 00:19:24.759 or like algorithmically change parts of the video based off 395 00:19:24.759 --> 00:19:27.720 of whatever. Right, It's it's a React app, So the 396 00:19:28.039 --> 00:19:30.519 sky's the limit, and it sort of just blows my 397 00:19:30.960 --> 00:19:33.839 mind a little bit at the possibilities just because it's 398 00:19:34.039 --> 00:19:37.240 it's just such a unique idea because I would have 399 00:19:37.279 --> 00:19:40.759 never thought to build videos with React, right, like in 400 00:19:40.799 --> 00:19:42.680 my brain, like I have a segmented part for like, 401 00:19:42.920 --> 00:19:45.920