Coding Garden Talk - Episode 01 - with Guest Brooks Builds - Q&A and Building a Chrome Extension

[Music] hello friends welcome to coding garden with CJ welcome to the very first episode of coding garden talk with me today I have Brooks Mills thank you it's awesome to be here I've been on the stream before but sort of like not actually here in person so it's great to actually be here with you in your studio yes and so this is the first time we're doing this the mic setup is new if the sound is not okay please let us know I can turn Brooks up I can turn myself up but yeah so if you're on YouTube check the video description there's links to all of Brookes YouTube channel and twitch channel if you're on twitch hello how could just shared the link to Brick's to this channel do you want to do a quick intro of yourself yes I'm Brooks I got the name for that channel but I completely on those videos to YouTube lately I've been streaming pretty much only Russ and I've been going through Daniel shiffman's from the codeine trains his book the nature of code but I've been doing it in rust and the game engine GG easy I also pretty much only stream before work so super early American time but perfect for European turn Brooks up I think we did yesterday it's a little bit better YouTube is a little bit behind so if you want to watch more in real time you can tune in on Twitch it's a little bit little bit faster see I'm used to that super low latency of twitch cool alright let's say hello to everyone in the chat hello yawn welcome to the stream hello yes sir welcome hello khatola and again I am streaming on Twitch as well hello Rowell yes perfect stream to watch until football starts hello friends are we speaking of American football or this is my big timer six stretch Brooks yeah I don't have that there's no there's a no break timer like that for Linux that actually looks good okay hello Mattia or much I don't think you ever corrected me on how to pronounce your name but welcome to the stream hello Dominica hello and hello Brian islets contrôlée says today we will be talking about the Web Audio API maybe we will but that's also like an inside joke hello Sean hello programming with Peter welcome hello Chris ooh hello Yanni hello ATV to 8/5 we are having Oh cat Olli I'm having a good Sunday that's so far yeah this has been a great weekend cool hello a light-year away welcome to the stream hello psychic hello Linus dev finally able to make it to a stream again yeah this is gonna be a fun one we're kind of just gonna hang out so yeah I didn't really explain the format there is no format so if you have a question throw them in the trap we'll try to answer them if you don't have questions we're gonna figure out stuff to talk about and I kind of want to code something so maybe at some point we'll figure out what will pair on maybe or I mean we'll look if people have news they want to share we'll look at the Articles for that is kind of like morning tea / chill stream but with Brooks here - hello Orlando from Italy welcome to the stream hello Killman programming as Peter is saying I like that stream casual a schedule it's better for Europe lately oh that my scream Trevor yeah I've been striving trying to stream in the mornings hello Jack Skelly welcome to the stream hello chef wrote him oh yeah and we got twitch emotes working in my chat manager yesterday which is pretty sweet yeah be sure to check out Brooks I think you're hosting my do or I I should be okay if it's not I can I can actually double check that cool hello yeah and welcome to the strain or was that Khan welcome hello Alvin hello Dirk are all hello the end we end is actually sitting upstairs okay let me know if Brooks is sound as better it sounded like on twitch they said it was better yeah green screen chairs and I actually I went to work pretty early this morning to grab that second chair but I'm pretty excited about it it's got it's green it's great green chair and also people that are like randomly coming into the stream they're like how do you have a green chair and you know it with a green screen but it's not a green screen that was the thing that sort of like every time I walk in here I'm like whoa it's blue because I have a green screen at home I haven't set it up for my stream recently because I just brought it back up from the basement yeah I'm on the coding garden got coding curtain gear you can see all the gear that I use but I do use this blue muslin backdrop I don't know it's been it's what I've used it since like the beginning of my stream I think the very first episode is the only one where I didn't have a green screen I kind of like watching streams without the screen because you like people can and it'll create the the things that are behind them like in the room that you're in the decoration and stuff like that and I've never really done that like we can't we can put whatever we want back there sound is copasetic does that mean good you know that's a good question let's look up the definition for copacetic very satisfactory cool appreciate that Rafael hello Roni welcome to the stream hello asatya yes perfect sound all right we got it Mateus hello again amazing weekend with a lot of streaming yes it's been it's been a good time yesterday I streamed for like over eight hours I got pretty tired I could barely code by the end of it I probably won't do that again cuz I just become useless after a while hello Killman who's that sound as well audio level is good cool satya says my happiness doubles whenever i watch i okay in the chat me you know it's it's awesome it's rare that I get Alka and my chat but we had him on the other day and it was it was amazing yeah he's a good dude and he's all over the place like how cos literally in five places at once at any given time hello Jimmy welcome back hello Muhammad as Vera is asking what are we going to build right now there's no plan but if you have suggestions or if you have questions about code we can talk about that kind of stuff we're really just kind of hanging out lazy Sunday now with even less latency from twitch yeah hello it was Chicago welcome to the stream he's a good good starter question Jimmy asks hey Brooks what distro do you like on Linux so currently I'm using Ubuntu 19 just the latest non-man I guess it's the latest latest version I'm not using the long-term supports because I want you know actually things to work for me I've tried other distros in fact like I had I had a series of streams where I installed a bunch of distros and sort of played around with them a bun - is the one that works the best with the hardware they have which is a Dell I always forget like it's not the latitude it's the precision Dell Precision the Dell Precision and Linux worked like a Punto just works out of the box with that even the drivers work cool yeah so I mean I don't really use Linux I mean I have a couple of older laptops that I haven't bun to installed on and Ubuntu is mainly what I reach for I looked into pop OS which is from the system76 guys I have heard of it pop OS was not very happy with this hardware okay I think it's like it's based on a bun - and it's really set for their system 76 hardware so there there were some things I was like it's like Nani not exactly was working for me I really you I they have like a I think it's built on top of gnome well they're using basically a default abun - and then they're just making some changes and then redeploying and Ubuntu now is using no yeah so yeah if I were to install Linux I would probably reach Reuben - I have use Linux Mint before have you used Mint I tried I mean I just keep on coming back to a bun - okay cool great question great way to start and talk about stuff hello Sasha welcome hello Chantilly cake welcome to the stream johnny is saying you both build the same app but see who does it better slash quicker yeah so um I actually met someone in person who runs the the code Wars no coding wars I can't remember like dev Wars it's a it's a twitch channel and it's basically you take two teams of people and then you show their screens and you give them a challenge and then they go after it and I mean we could do something like that that might be like a future stream if we actually set up our screens like multicast simultaneously yeah but I don't know like that that could be something interesting we do very different types of programming though yes we do like I'm just stuck with JavaScript Brooks is exploring all sorts of other stuff like rust and we don't go I have not done go I chose rust instead of go I do a lot of PHP at work and laravel um I think it would be factual I think would be fun to like to pair not to have a competition did you see a West boss and Scott - in ski from syntax they did a thing at a conference where every 30 seconds they had to switch the keyboard so only one person was at the keyboard hmm and then every 30 seconds they had to switch and they were like trying to build something in five minutes I think it's on West bosses you t know that might be interesting we know we did a pairing a long time ago ourselves this is back when you had a complete different studio we we made a breakout breakout and p5.js yeah I'll show that really quick if you go to my YouTube channel coding garden with CJ and on the home page if you just scroll down there's a collaborations playlist and there's that build a brick breaker game this was a little over a year ago so while ago oh yeah it was they called it tag-team react coding and basically every I think was every 30 seconds they had to switch they had a goal in mind of what they were trying to build something like that might be fun sure this it's a fun watch I mean I kind of feel that something that would be really fun to do would be something along the lines of what you did that conference the develop d'être conference where we have challenges yeah but then like something where maybe we both have challenges and we both have to like build something but in our own special like different ways and maybe like integrate it together somehow yeah we could also do this asynchronously too like you could do with something on your stream and I could do like a reaction to that and we can host each other I mean there's so many ways we could take this so if you if any of you have any ideas I think we have our our Twitter's available tweet at us tweet us I don't really I really only use Twitter to like tell people that I've gone live but uh yeah tweet us I'm also on cjs discord all the time so you could just find me there send a send an idea to us but what Brooks was mentioning if you haven't seen this video it's pretty great the bouncing DVD logo so basically what I did was I had a set of poles that I pulled the audience for so the first question was what should I build they had an option of like tic-tac-toe hangman or the bouncing DVD logo screen so the audience voted they chose TV logo screen I then did a poll said what should I build it with I gave them options like react with hooks react with classes view view with the composition API vanilla felt they chose vanilla Jas and then I had had them choose a constraint I had could only refresh the browser every seven minutes every function only has every function in variable link it'll be a single letter ultimately the one that they vote was every variable in function name should be named after a punk rock band and that was that was some good fun so but we could do something like that we could pull the audience and then just like build the thing and this was of course after last year developed Denver CJ did the exact same thing the app was snake and CJ had made the mistake of allowing the audience to choose to not allow himself to view the code working until the very end yeah I mean it was a yes so the option the option I gave them was like I cannot run the code till till the end it obviously didn't work like so I was me I was building snake it was I guess I guess it was fun to watch it was just a whole lot of code and then at the end of course it was broken if you look and look it up on my channel just just search for a coating garden snake i restreamed it and then fixed all the things that were broken in it afterwards I am and he is saying the format is there is no format yes which is technically a format right I mean chaos is a format right I mean both of us like to do this sort of thing where we stream programming without necessarily doing big upfront planning or preparing and I think what that allows is us to show off what development really like under the hood because so many times we see these videos that are just edited and cut down and all the problems are removed and that could lead some people to think that at a programmer senior devs just never make mistakes they pull it out of their head the first try yeah and I mean that's that's that's what I've always tried to do on my channel is just like you watch me build the thing you see be struggle you see the bugs that happen and potentially that could be edited down to a more consumable video but like Brooks is saying like a lot of tutorials and different things like that make it seem like it's super easy and it just instantly happens yeah hello Abdel homemade welcome back um okay here we go we have the pronunciation of Mattia same as Boyan instead of Bohan oh it's boy in oh and you should bow in you should let me know but bow and is the one that added the styles for this chat to differentiate between twitch and YouTube and he actually just made a pull request that adds discord chat in here as well okay Mattia that makes sense Mattia welcome it to you hello Robin welcome back Robin rickrolled me yesterday were you watching I was watching that I yeah yeah my knees are saying it would be awesome to be able to open your chat manager as a viewer so that we can see what people on the other platform are writing yes I want to do that eventually I want this to be published on the web I have to figure out how to do it because right now the only way to get a list of live streams for my channel is to use my token I have to figure out a better way to list live streams for a given channel as any user that is logged in but I'll look into that I've you know I've after seen you CJ like build that I thought about building my own and like the only thing that sort of kind of stopping me is well first of all I've I've got like some other projects in the way first but I don't also want to immediately just copy you and build whatever you built although I'd probably build it and rust yeah and I was thinking of a command-line interface well what about rust and then compiling to webassembly well yeah that that works I still like I still am slightly disappointed in webassembly because right now the only native types that work in webassembly are numbers there's there's some ways like get around that but it's not like where I want it to be so I'm waiting for webassembly to actually become more of a first-class citizen yeah that's crazy so I'm pretty I mean you can code anything with numbers right everything's just numbers I mean I don't want to yeah mo is saying you're making so much content that I have at least five three-hour videos still waiting to be watched yeah that's I guess that's what happened what happens when I stream so much maybe I'll take a break this week I don't know but I love it cool Mohammed says hello hello actually Alka says actually I'm in more than 50 places at once but less so in my personal attention I see there's my brake timer again that means we've been talking for 15 minutes oh cool so cam says I looked into I term - I got it working nicely thanks for the tip well you're very welcome yeah so if you're on a Mac I turn to seems to be the go-to terminal emulator you can use the built-in Mac one but this has some nice features and I like the in the latest version they added like fooled dark themes so there's no like Chrome on the window it's like fully black which I really like do you use use a Mac at work you know so I use a I use a Dell XPS with a bun 2 on it so I use Linux at work and Linux at at home is that it was a work provided computer and did you have an option or that really like do you want a Mac you want to I mean so they did ask as like do you want do you want a Linux computer or do you want a Mac or do you want a Windows computer and I mean Windows why I mean I shouldn't I shouldn't be negative about that I use Windows for streaming that's about it the other team uses Windows a long time but that's because they're developing VR applications with a bunch Unity's they have no choice cool Mohammed uses arch arch is good I so I looked into it I just like there is a slight little thing that's like some custom applications that I wanted to use that I need to customize and after being a systems administrator for eight years I I don't know like I could do it I just lost all desire to like customize things arch Ubuntu is super cool Nessie is an arch user - Jimmy is asking what do you think about elementary and the pay what you want system so are we talking about elementary OS the pay what you want system I'm really like I really like that so with the with the book nature of code that's a pay what you want to get the book I ended up actually purchasing the physical copy of the book because I liked it so much what I really enjoy is that you could pay $0 for it get the book and follow along with me and I don't want my like my viewers to have to buy a book only for me to later find out that it sucks which totally happened with with another book that we recently did I don't even want to say it's terrible it was it was a deep learning B and this is elementary OS I've heard of it before but it looks like you pay what you want in order to install it I like that idea so I don't have any paid courses yet but if I do create paid video content that's how I'm gonna do it is pay what you want because essentially like if you're a starving student and you want to learn from my videos like pay a dollar like pay whatever you have and I'm totally fine with that because people that can afford it or people that are that will have their employers pay for the course or something like that they can afford to pay a lot more than like a student or something like that you know that being said I am I'm building the course and I'm gonna be putting it on teachable most likely mmm and they I don't I don't know if they have it pay what you want system on it but the way I'm gonna handle this is have like the paid course up there but I'm going to stream like just like what you did with feathers I'm gonna stream the creation of all those courses on Twitch I'm just not gonna archive them to YouTube which means they stay up there for 14 days and that means that you could get all of that content for free without having to pay me if you're able to follow it like more closer to live and it's like I'm trying to make it so that it's not like oh we have to give me money to get like this specific content yeah yeah I've looked into teachable I might have created a site on it like I've had the ambition to just create my own video hosted platform I would potentially use something like buy me oh because they have an API where you can do like private videos and private uploads yeah so I have a friend I you know you know mr. Herman Michael Herman yes so Michael Herman he taught with us at both at galvanize and he runs a an online LMS and I'ma with him recently to sort of review it it's a test-driven do I believe is is what it is he wrote that himself it took him a year and a half to build that and so like I went through it to see whether or not my stuff would work out with this sort of pattern and his suggestion is begin with like an MVP create your create your basic course put it up on something like teachable pay the pay whatever fees they require and once we have our target audience and we know that these courses are going to sell then we can take the time to build our own LMS that makes sense but at the same time I have quite a few subscribers on YouTube and quite a few people have mentioned that like they would watch a video course for mine so I think I've validated my market at this point I've kind of use live streaming to validate my market cool programming with Peter uses Linux Mint Ubuntu for some reason seems that it needs better hardware I mean this is a really really good notebook I'm not using the XPS for this one I it has an actual video card ad I have 32 gigabytes of RAM it can act like I can stream on this same hardware commercial is asking is this any comparative problem coding you know what does this please please clarify code words like comparative like we're comparing code or like it's similar to each other in Alexandria says CJ what's the secret for being so happy all the time I don't know I just enjoy life I realized that a lot of people don't naturally feel that way but I do so I kind of embrace it I don't know I mean I would I mean would you concern me to be like a happy person all the time um I think you have your down times um which is not a bad thing I mean we're all human but yeah I mean you're positive you're absolutely like you have a positive outlook definitely so I guess like my my philosophy on this is we make our own luck and the best way to make your own luck is to like be as positive as possible because when we like project happiness and goodness out into the world there's a better chance that people are going to respond to that and reflect that back to us absolutely yeah I don't know if you've ever noticed like someone negative comes into the chat like it does it doesn't really even faze me you know it's kind of like oh poor guy for poor person we're here for you buddy if you need it I don't know the other thing is like I I giggle all the time it's just like a natural reflex to just laugh at things and even things that aren't funny or things that are very serious like I it's I don't know I think I get it from my mom my mom is like always laughing but I know culturally that doesn't it doesn't translate very well because like in in my first job in industry I was working with a lot of people just from all over the world like people from India and China in like Saudi Arabia and one guy got really offended because I was always smiling and would like almost always laugh at things he was like this is not a joke it's like like I don't know but yes I'm happy we're happy let's be happy together I mean you just made that worse by laughing at his I mean I can't I can't help it Raphael says let's do something with animations they'll be fun um you know what though I an idea for this chat manager is like any time someone has an idea we mark it as an idea it goes into a queue and then we can like review those later or at the very least like it slides it's like slides out like some little micro animations for for each chat like as you click it it just sort of like sliced the side oh I mean that would be cool Y is off the screen to this I mean we could do animate I think what they're suggesting is animations of anything really I mean yeah we could do that like almost my screen my streams are almost all animation based stuff mmm infuses arch element Rio s ho-jon Soto a TV says I remember when you to collab a long time ago and made a game with p5 yeah sure I showed that link a second ago that was pretty fun Rao is asking are you really excited about view three and when should one start to make the transition to it I am very excited about it but I don't I'm not yet using it at work I'm probably gonna be using it at work soon but you use view at work don't you I do use via at work we're using view 2 and the latest beautify and we so like I have I have like I guess personal feelings about when you're bringing something into a professional market that lots of people are relying upon and that's basically when its latest and greatest or beta never ever ever use that at work when when somebody's livelihood depends upon that I will wait until there's either security vulnerability or we like a feature that we absolutely have to have yeah it's interesting to note though because view 3 is being rewritten from scratch like they rewrote the whole thing in typescript and so you bring up the point of vulnerability it's like yeah I mean you should probably wait till people have been using this for a while before you use it in production it won't hurt to like learn the concepts and like you use it inside projects but yeah if you have a mission critical application you probably shouldn't use like the latest version of a library you need a stable version something that's been vetted but I am excited about it I'm curious to see how the community reacts to the composition API I know there was a lot of drama around the view when they first called it the view function API so it'll be interesting to see once more people start using it and realizing the benefits of it you can tell that I'm a fan of it to see like what happens but I don't know I feel that when when something recommends like functional programming that just causes all sorts of drama which I think it's like one of the things where rest is very interesting because it kind of sort of makes you program functionally but it tricks you into thinking that you're not it's yeah I saw a YouTube video suggestion the other day for a conference talk and it was like why isn't everyone using functional programming I don't know like I do like functional programming I like the functional aspects of JavaScript which allows me to program functionally which I really didn't do before because my my first job in industry I was doing c-sharp so like everything was object-oriented um they did have lambda functions but I barely use those I don't know so sheikah loves Linux that's great Andy Smart is saying how about some 2d physics that would be fun too we could do something potentially with p5 I'm gonna do something with p5 and then I could also show how to do the same thing with rust and GG easy mmm GG easy yes that's the game engine that I use GG easy okay sound just went out for anyone else hopefully not hopefully not what is Brookes special didn't asked Matthew from YouTube um what am i specialized so I would I would say that my specialization is growth mindset and culture of air sort of like the cultural side of things I I specialize in learning quickly being positive about things not not freaking out when there's problems debugging like I would say I would say that's my specialization which is so what I guess what are your we're also your job duty so that's kind of like your specialization in life but what do you do at your job yeah so my my official job is all the way I'm trying to let me get that my official job so my title is director of platform development so I'm actually more in the management side of things and I would almost also say that I'm in culture building we're a small company around 23 people in size and that's like the time when the culture is really important to get to get right and at the same time I'm training up our junior developers making like you making sure that they're learning what they want and need to learn which also getting stuff done for the platform cool and I got hired to do PHP and laravel and view and I knew like I had not programmed a line of any of those before I got hired some people in the stream were asking about that yesterday like there's so there's a lot of junior devs that have a question like what should I learn and I kind of mentioned that like it depends on the job because some places are specifically hiring for a react expert but a lot of places just hire good developers and they know that a good developer can figure things out well so this this leads into a much more interesting question which is getting a job because getting the job and like what to study are two completely different things because you can you can apply and like have all the skills and still be told you don't have enough experience for that role it's like there's so much more is so much more to the entire networking and job application process way beyond just learning technically how to program yeah Andy says sounds good Devin Deven so says parrot is best is Paris at parrot another Linux distribution have you heard of it I sound vaguely founder Garret OS the advanced system for security wait wait what was the tagline for security testing oh is this like a Kali Linux alternative it's based on a debian sutra now familiar Kali is like a penetration testing Linux distribution it's essentially I think this is based on Debian 2 or Debian but it has like all the tools you would need for penetration penetration testing built in interesting I've never heard of a pair to us ok I was very saying instead of chat how about voice chat same like pub G what API is best for this kind of app Tulio or play vu or any other I'm not familiar with pubs you do you know how much voice chat works in public yeah so I don't know how any of those games how like they do like their their voice chats there there's so many different interesting things that you like have to take in keep in mind when you're like doing any kind of like a live voice chats especially when they're doing like distance-based where like it fades away the farther away from like the center of where the voice is they probably rolled their own yeah and I mean if I was implemented I might use something like web RTC so sorry I know we have to like yeah I'm not used to just stretching its near someone this is great so it's in my chat manager I'm actually allow people to embed HTML I'm mostly I am I am allowing certain types of embeds I'm using Dom purify to remove most vulnerable things but somebody might find a vulnerability here but infi posted a nice little number box so we can do that and then I could just posted a pass yeah a password input and the other day we found out that if you put a comment like an HTML comment that will hide it from CJ so you all can chat with each other secretly without CJ seen it really yes well that's what those empty chats are ok yeah and so I was measuring WebRTC so WebRTC is a browser-based API that allows peer-to-peer communication and you have data channels so you can do video over WebRTC you can do audio over WebRTC you can do messaging over WebRTC gets tricky when you want to have like a room with multiple people inside of it because then you essentially have to balance messages off of Pierce so that gets tricky and there are some frameworks out there that you can help you with it but this is also a nice technology because you don't need servers to handle the voice communication because it's all peer-to-peer that being said I would never use that for a game like pub G I mean also I guess also because you need it to be real-time you can't really depend on the connection between peers so yeah yeah people are trying to send HTML and stuff like that so what happened here you know that's a always an SVG ok that's some default so if you're sending an SVG you will need a text element to get that text to render that's maybe like the other the other problem with like any kind of voice chat is you're gonna want to sanitize whatever people are saying so you're gonna wanna like send that through some kind of deep learning algorithm to determine if it's you know something really bad if like if you have something if you have like that ability and that means they're gonna want to process a process that on the server side yeah and I yeah so people were having fun yesterday I think infi was the first person to cross-site script me because I was using a markdown parsing library and I didn't realize that it didn't sanitize inputs because most markdown libraries i you i've used before sanitize inputs first but then we fixed it but i am allowing some three you can see alka put in a nice little user form here that's great Oh Brian's sound went out for another reason programming peter says they love Laura go there they're evil I would say is the best of the monolithic sort of back-end server-side frameworks like of all the different languages that I've used so far that that's like the one I like the most when is done properly Alvin is asking tips for go I know you said you're focusing on Russ right now but I'm curious I don't use so I've not programmed any go at all I guess my tips for go would be find someone who knows go and then ask them for tips yeah that's witchy thing it would be really fun what was that in reference to I remember well Matthew was saying PHP versus Python what language is simpler to code in house it probably big Python and for so it's an interesting question because what is simpler mean if you mean easier for beginners I think like Python was was built to be readable and like it's whitespace space so for a lot of people that have never coded before it makes a lot of sense whereas a language that has more syntax like curly braces and things like that it can be trickier to learn like where do the semicolons go where do the curly braces go so I think probably Python and you can I feel like you can do a lot more with Python because you can build back in applications with Python there's a huge open-source community of packages with for like machine learning and data processing and natural language processing and stuff like that whereas PHP is mainly for building back in web apps stuff for PHP might exists yeah I think both of them are beginner friendly languages if you only look at it from like the code itself point of view but if we look at it from like what you can google and like tutorials out there I would say Python mainly because PHP is such an old language and the versions like it's been like almost 100 percent backwards compatible since the very beginning there are there are tutorials out there that will have you write terrible PHP so it's very hard to like determine as a beginner what you should trust Python is very hard to find something that's like even if for Python 2 that is like actually terrible yeah it is interesting though because that isn't Python 2 gonna be deprecated at some point it already has a husband okay yeah because there is Python 3 so you find a lot of Python 2 code out there but yeah python 3 has now been out longer than Python 2 has been and there's still people on Python 2 that don't believe in Python 3 he says how about you do an episode where Brooks builds back in and CJ the front end I like that yeah I mean I built I could build a restful server okay with rust now that'd be great actually I because if you build the back and with rust maybe I'll find something weird to build the front end with yeah that'd be fun I'm all about that I mean you could just build feathers with it like implement yeah so I mean like I mentioned of feathers technically at the end of the day it is just becomes like a REST API or a socket API so as long as you expose that interface you could use a feathers client to communicate with it yeah Mattias saying how many chairs did you take just two and I asked for two these these chairs came from work but they're there IKEA chairs there are the IKEA Markus but they don't make this color anymore so I'm really glad that I got this a lot of people are commenting these are nice chairs right they do I have the gray version at home and I only like I gave it to my wife and I have a completely different chair Adam that I'm now using it for my streaming well how could you send a yeah progress bar that's awesome Satya says I still invade your friendship when you hope each other and that developed him for 2019 yeah so if you that was the bouncing DVD logo video we mentioned earlier but yeah Brooke streamed and I ran the the tech while he was streaming and then while i streamed he managed the chat and stuff like that but yeah so that this is like an interesting question so we met each other for the first time 2015 2015 and we met when I interviewed as a instructor position at galvanize and you had been hired two weeks before that yeah I was pretty new and then I got hired and immediately sent off to another city so I didn't actually get to hang out it was very weird because like either by the time I came back to Denver and worked like in the same building as you yeah you then got shipped off to Oregon yeah Seattle Washington yeah yeah so we need to spend much time but then eventually like I came back I taught some other classes and I mean we're technically on the same instructional team so we would have stand up together and that kind of thing but yeah we go way back at least three three or four years back hey joel is lazy it's you again I just realized like we're 96 messages behind you said hi a very long time ago I don't know how it like so I see a lot of twitch streamers and like they keep up with they seem to keep up with the chat you know like as the chats roll in they say hi to every single person but I feel like we or at least I will talk about or answer a question and then I get behind I don't know what do you what do we think of this well I mean I've been I've been myself like so I don't have that many chatters I have what three or so active chatters and my streams in the morning I don't have nearly the viewership that you have because I'm I think it's just because I'm on Twitch and or also because I'm doing rest instead of like you know web development yeah and it's very easy for me to stay up with chat I think I see other people like quill a teen that was doing Ludum dare and he's got like 1500 viewers and they're chatting like crazy and he's keeping up with them I think it's just a word or two hey yeah that's interesting back to coding so alka says I keep up with my chat I also keep up with other chats as I moderator I feel like Alka is like the Chuck Norris of twitch I feel like like any Chuck Norris joke you can make and just replace Chuck Norris without guy and it would be the same thing how cut do you stream to if you're streaming like do you stream yourself moderating all these channels I watched a few of his vods I've never been able to tune in live but usually it does like a like small coding challenges and stuff like that okay I need to follow up outcome this is cool you can actually embed SVG's in this chat manager Linus sent what is it an SVG with a circle very cool and I did see a message that came in from Jill is lazy they say your chat is slower because you try to give more advice more than anyone else yeah I also tried to say hello to every single person that comes into the chat because this is a community we want to invite everyone we're not exclusive here but that ends up like when there's like so there's 85 people watching on YouTube and 17 people watching on twitch it's a lot of messages to get through but you know Alban is saying would be cool if the back end was with rust go or PHP so I guess if we do that thing where you build the back end I build the front end yeah and be cool suspiciously nobody's using any markup I think they've started to um actually yeah I don't have any bot commands Jill is lazy just tried was it this court yeah it doesn't work I need to get a body but we do have a discord if you well there's my longer break timer take a good stretch if you go to a coating garden slash discord discord that will redirect you to the discord invite so you can check that out alka says I can add my bot doesn't do custom pans but it has a lot going on of course I should get the Alka bot I guess I mean do you have a page where I a page where I can add it to my stream you know like with and be able to change settings and stuff like that I've seen that with a nightbot um I don't use a bot so I had made a bot with rust a while back and it's sort of like a a purely just sort of like on my own made it and I think I want to rethink how I did because I have to recompile it every time I want to add him at a command and redeploy ads and that was like too much of a problem but if I if I rebuild it and I use the new like a brand-new crate that just came out for managing twitch at like four actually grabbing that then I could probably have it listen to like some other web server that I have and grab commands from there so I want to rebuild mine maybe we can do a collab on that that'd be cool Algy says my bot does not have a control panel it just wasn't created with that in mind I've gone to rewrite it many times to integrate it with the database control panel yeah make sense the guy who made nightbot now works at discord interesting Elena says I really like the way you do your video slash dreams because the faults in the video we can learn how to fix stuff yeah and both I and Brooks do that do it that way and also coding trains so if you watch coding train he does that as well cool there needs to be more videos and streams like it because the majority of people are just uploading edited tutorials and people should see what it's really like oh wait so on that no programming with Peter is saying my friends are daily telling me that I should plan more of it more the videos but it's just not my style that's why I love CJ's channel oh yeah so if you look at programming of Peters channel I think he does lore Ville and PHP oh yeah it really could I guess it comes down to personal preference and also for me like I procrastinate a lot and it's very it's a lot easier for me to just like sit down and try to make something happen versus plan to make it happen because it'll always just postpone it I don't know do you do you have topics for your streams planned out I plan out the topics one day ahead and right now that's for my like nature of code it's very like when I go in through books it's very easy because I just say look well that's the next challenge that's interesting in the book and I I basically might planning it is like looking at the math and saying like okay do I know the bare minimum to be able to like figure this out so for example with like collision detection or some kind of like implementing a physics thing I will often go to my wife who is much better at math and me and say like okay I need to figure this out can you help me understand this algorithm and once I get that then I'll come on I have to like re figure that out in the like during the livestream but at least it's so much easier and I still struggle with it yeah cool all right we're going to speed through the rest of these messages and then figure out it so we've been streaming for like I guess 50 minutes or so I need an uptime bot too but I want to I want to try to code something maybe we'll see like with ideas people have submitted and then we'll try coding something and thirty minutes or so I didn't I don't know how much time you have yeah yeah yeah I have time we could we just stay here until lunchtime okay cool cool hello I'm ed welcome if you discord integration you could do two-way sync that would solve the cross-platform things yes so like YouTube messages go into discord and twitch messages go on that are interesting hello Allawi [Music] create a shareable link with rights to check the messages maybe they're talking about something else Robin says I was just going through Brookes YouTube and I really like his videos where he learns rust I myself might been his playlists to learn rust I went through the entire book of rust read every every word until like the last couple chapters but that that is something you could find on my youtube nice please do something we're gonna we're gonna we're gonna try to code we definitely are on Linux console is 100 the best terminal have you used console before uh no I don't use Katie oh I see that's k2e all all all their stuff for KDE starts with K I see cool windows terminal is here and getting better yeah hello mm Oh jib welcome all KDE stuff is great just the design suffer sometimes yeah you should do a code wars battle against each other says Robin hmm we could do something where you build an animation and I guess I wouldn't use spell obviously spelt has like a built-in animation system that's actually pretty easy to it going okay and I could use GG easy with fast and we would build the same thing yeah built the same thing I want to collaborate this shouldn't be a competition okay Algy says I love Windows I'm a gamer too that doesn't work so well elsewhere I do use Ubuntu on my BSP's yeah it's virtual private servers I came on Windows and uses Linux for everything else Robin like Satya likes the idea of us doing code worse Ashwin's azar the performance benefits of webassembly actually noticeable only when you develop computation heavy modules is it actually beneficial for normal node modules um I think so I haven't used it but that was my understanding like if you were if you're trying to do things that need to be very performant and be closer to the metal that's when you would use whether simply like otherwise it's not worth it right it's insane the amount of overhead the the file download is for weapons heavily it's like really large so the generated the generated code yeah but the execution time is incredibly fast so I would say like if you want to try to make like a really fast website and that's all that's like you don't want to use we have assembly for that if you're trying to make a game and like you don't care about that initial download but you need everything else to run really fast that's gonna be what if webassembly really specializes in matias asking what sucked about that book so this was the algorithms book you're talking about what did you not like about it we're I'm gonna say the name of it but what did you know I mean what I didn't like about it was that it it just sort of ramped up - okay here's like the super introductory of like how to do this all right go do that if any of you saw the tweet that mpj from fun fun function made this morning about like typical coding like tutorials that is like how I was feeling about it khatallah if you're still here you were watching a bunch of those dreams and I think you were following along too I think hopefully hopefully you agree with that sentiment when did he tweet it Oh every programming tutorial ten hours ago yeah alright first we're gonna type in public class program then public static void main string args you know how it goes in this library from like 1994 oh using Java 7 yeah and that like it started up like okay here's how every line works and then suddenly here's a bunch of code like now now we're gonna use a completely different library that abstracts all that away and we're adding new features and good luck Satya's suggest we make a Chrome extension that would be interesting Firefox extensions actually have better Docs so that'd be easier I mean that that would be fun like I don't use fire to use I use Firefox almost exclusively okay do you still use brave no I haven't used brave in a long time it was having trouble with Linux for a while yeah my hosts Brooks is like I know a guy who knows a guy who knows a guy can peers as Harvey didn't made his own look ok I don't know what that's reference to I my luck is hopefully better than Harvey Dent's Jana says thanks for all the new episodes please do a hot ones one more time that episode was funny af um so for those of you that haven't seen it if you go to my YouTube channel and look at the playlists I do a show called code Wars code Coty's and essentially pretty much every Wednesday I'll spend a couple of hours solving code Wars Coty's and episode I think it was 27 I did hot wings edition so if you're familiar with the hot ones YouTube show have you seen hot ones I've actually watched it because of that episode appears but so he interviews guests and they eat progressively spicier hot wings but what I did was ate progressively spicier hot wings while solving progressively harder coding problems it got pretty intense and maybe I'll do it again but I don't that stuff was really spicy yeah Angela's lazy we added emotes last night instead of doing other things basically we procrastinate by getting other things done then the rather than the things we were supposed to get done sort of like how we with Chad whoa is this an embedded image that's a that's an SVG I see it right here nice that's awesome great job Alka I think it's a c-sharp for it so HR folks thanks for tuning in we got a lot of chats to get through um be happy is just better for a living style no I think so it's like I mean a lot of people might have certain opinions about like being so optimistic or being positive all the time and like no I don't you just smile those guys and then just just move on with your day yeah just be happy everyone be happy I mean so I'm a manager at work and one of the most important things as a manager is to always be positive in the face of no matter what is happening because even if the world is like falling around you the last thing that you want to do is show your team that the world is actually falling and nothing is worth trying for yeah I mean and like you should be realistic about it and like let them know that it's happening at the same time you show them that you're positive and that's how you're going to get through it all right so like I'm positive I can solve any bug even if I've never seen it before because I have to show that yeah hello welcome to the stream alga says they very much like to get into view maybe that's what we can collabora we can build a view app that would be fun hello kattiline oka says I'll definitely be watching your videos when I start yeah if you check out my youtube channel I have quite a few view videos hello friends I'm never gonna get through all these chat messages what do i do Brooks I mean so you could just go really fast and only answer real questions okay four questions for it that's the thing every question takes a long time well okay well here's a question from Effie how do you make view developers react in confusion Alissa not a question sir thank you how do you make view developers reacting confusion by teaching them the concept of angular momentum [Music] Gigi easy all right this is an interesting question okay so this questions from Eddie what made and you decide to quit galvanized wanted to go into industry yeah so if you're not familiar Brooks and I'd were instructors at a coding school called galvanize I worked there for a little over three years brown the same time whatever three years yeah and we left about a year ago yeah I mean you only the first yeah so I I saw that galvanize is going in a direction that I was not happy with CJ you left before me before I did for me I have I have a very very very specific like philosophy and how I do work and it is something that I was taught way back when I worked at NASA actually which was always come to work every single day prepared to be fired which sounds like it sounds horrible when you say that to people but that's because there's a follow-up that I usually wait for a while before I say which is so that you can do the right things and for me the most important thing about being an instructor in a coding school is am I able to like transform the students lives am I able to teach the right things and I was just seeing that galvanize was like going towards their acquisition of hack reactor I don't like the way that they were switching the curriculum over away from what I wanted to teach to a prescribed curriculum so I decided that I wasn't going to be part of of where they're going and I got back into industry yeah for me it was I mean it was mainly it was a lot of those things but I also mainly wanted to just to just get back into industry because I had been teaching for three and a half years and I knew that if I just kept doing that I would probably just be a teacher for like the rest of my career which is not a bad thing but I my experience in encoding like I guess before galvanized I had worked in industry for about four years or so and I had heard people talk about like CI and CD and working on agile teams and and having scrum and I never really got to do any of that and so I kind of wanted to get in industry and experience and do all of these things that everyone's talking about and encoding because I mean I was teaching my students about it like talk about like what is agile and what is scrum but at the company I had worked at we really didn't do it the right way so I kind of wanted to get an industry do the things I had been teaching about and yeah I think it's mainly cool great question Eddie thanks for that yeah c.j is aware of the team Oh what was that about the a okay matter - matter chance for 2d physics sounds cool um interesting question from brian as a senior who is pretty solid at node full stack dev with side projects in the works what should be my next journey in programming if I want to get the best possible job right out of college so there are senior in college they've done full stack node what should they do next ironically I would say this is not necessarily the time to be focusing on like programming necessarily if you're about to graduate your soft skills and your networking is going to be like the most important thing to work on because that's gonna be the easiest way to differentiate yourself and get your get your foot into the door is if people already know you going in so I would recommend approaching as many companies that you would want to work for as possible and trying to do a shadow day yeah and I don't know if you you didn't mention it here but I'm assuming you're getting like a computer science degree and so I got a computer science degree and the first job I got was doing c-sharp and I had never written c-sharp before so in college I did like Java C C++ there's some bash scripting maybe a little PHP but I'd never done c-sharp but the company I got hired at they knew that and they were willing to give me the time to train and learn they really just hired me as a developer so yeah I guess depending on what degree you're getting depending on where you want to go into industry and where you want to get a job it will vary lana stove is suggesting that we just declare chat bankruptcy and get on to coding okay Emily I'm gonna go through and say hi to anyone I haven't said hi - hello Raul hello Lessig no art they share delete links are disabled and twitching in YouTube hello coding journey if the chairs are green what color is the background background is blue so I thought use a blue screen because this is the coding garden and I used to have like plants hanging around this no it's not it's lightly a blue bottled water but it's not that cool hello welcome hello Befana hello Bubba cool yeah and we've been streaming quite roughly an hour so let's figure out what to code I'm gonna okay here's somebody I'm gonna go through the chat and see if there are any other ideas for things to code and then we'll vote on what we're going to code pyramid web framework never heard of it yes great and so if you're also new to the stream my chat manager does execute some of the HTML that you embed so Ava's got all the progress bars it doesn't look right there but on the right-hand side that lip that's like a tree because they're gradually increasing progress bars hello Jonathan welcome Superman hello Oh a search feature for the the chat manager that might be interesting Oh de Becque hello are you planning on streaming about architecture projects I think eventually I wanted to like design a fairly complex database on stream to show the process of doing that hello Greg what's up how many chairs can we fit across DJ's room a lot yeah this I'm in the basement so it's a pretty big open space if we remove all the tables with all your equipment on it we could fit a lot more chairs in here yeah doo-doo-doo-doo only 70 more messages Brooks I like that you've like increased your click to talk or Asia a quick question from Ricky you you can use featherless you can use feathers on as serverless but you can't use the real-time aspect cuz the nature of serverless is the server goes up and then it goes back down so you couldn't have a socket server and that's what you would need with if you were trying to do the real-time aspect of feathers console team cool yeah so you can push post to canvas but you can't really put anything on it because javascript is disabled and styles and tags hello Joe I don't know if we said hello welcome hello I cannot pronounce your name but welcome to the stream well Horst do you see Nvidia and OBS have a feature to remove the background without needing a green screen have you seen that before I've seen cameras that have that enabled yeah you can you can definitely do that with with software I've just had mixed results when I tried it myself yeah in hello again t-shirt fritz I was watching your stream earlier you watch t-shirt t-shirt every once in a while often like I'll watch a new cat um which I think sometimes at the same time as you see c-sharp fritz also I don't do much like c-sharp programming so I don't know the language so I'll drop in to watch you every one small but not necessarily what you're building yeah no I I watch it it brings back memories because I used to do c-sharp a long time ago speaking of live coder yeah so there is a twitch live coders team have you seen that have you applied to be on it Brookes for what life the life coders team uh no I haven't like I haven't really thought about any teams and like what that would mean so I got invited to one team and I like briefly looked at it and is like I don't I don't know if I want to be part of that yeah I mean I I think it's interesting because like the team itself creates a community so like anytime any one of the live coders are live like people that subscribe to live coders will tune in or or follow if they haven't before yeah I would probably rather like do a team with you yeah that'd be fun I kind of would like to be on live coders but I did see that you have to be an affiliate or a partner and I don't think I'm ever gonna do that on Twitch because then I couldn't stream on YouTube so I cannot I cannot meet that I mean you can stream on YouTube you just can't stream at the same time and scream at the same time cuz to me like there's there's no point if I can't numpy Firefox is great hello friends yeah this is awesome is that like an SVG thing a lot of people jumped over to twitch from YouTube in terms of the chatters people people stopped chatting as much as an engine that they were doing chats okay this is an interesting question because I think it's going to apply this to the thing that we're about to do whatever we decide to build Pranjal is asking when we work in a large team everyone has different styles configured in their IDE so sometimes if we do a pull request there happens unnecessary conflicts for example someone likes single quotes and someone will like double quotes so how to deal with everyone so that everyone is on the same page the answer is a linter but then also you can have commit hoaxes so I use the aslim to use eeeh Slynt I mean so personally I usually do at work we don't right now which is something I do want to change really how big is the team there's three of us it's not very big but yeah it does have like yeah there are like I I have to have so with with Islan you can define all of your rules up front and you can kind of get together as a team get together as a team and choose like okay we want to require Cindy colons we want a to space tab we want to use single quotes and double instead of double quotes and then you create your configuration which has all of those rules built in and then any any developer will use the es lint plugin in their browser in their editor and then the other thing is commit hooks so I use the tool called husky for commit hooks combat hooks here it is so there are other tools for this but essentially what you can do and I mean you could actually just add the hook manually if you wanted to is you can create a get hook where whenever someone attempts to make a commit locally it will run the linter and if there are any errors it won't let them commit of course this can be disabled locally but this is like everyone has a linter installed on their machine and so they're using blender they're fixing the errors and then when they commit it double checks to make sure they didn't miss anything and then after that you can have a CI script a continuous integration script that before it allows code to be merged in it also runs those linter roles and so that's how I have it set up at work we have we used Travis CI for continuous integration we always run the lint linter and the tests on any pull requests and we have local local commit hooks to make sure that everyone has the same code style yeah if you have a big team you need to do that live coders use a linter yes galvanize might see you I don't think the thing is they've changed drastically since we left the company like people better they're probably don't even know we exist anymore because they're like totally new to it so what is agile and scrum I'll point you to some YouTube videos that I've done actually go to coding garden slash videos and if you just search for agile you can see some of the videos that I've done and also if you search for scrum this is the longer livestream that I cuddled all of the videos from but essentially it's a way for teams to collaborate and work together to get things done do you agree yeah I mean yeah there's also lots of subsets of agile so scrum is only one of them a lot of people think that it like is proscribed and has to be I guess like my only thing is if your company starts implementing safe runaway is that skilled agile framework for enterprise yeah yeah that's great big and Rinker we have to decide what we're gonna code so I I'm gonna get through these last few messages and then we're gonna vote on what we should code and we're gonna do a little little pairing action it'll be fun yeah what's up one Carlos welcome plus-one for the Firefox extension please vote on the Chrome extension your equipment says use a Windows laptop is this a hackintosh where's your gear list out-of-date knows I have a separate streaming computer so if you go to coding garden slash gear I actually haven't put that machine on there because it's just a custom-built gaming computer but I used to use this razor laptop too as my streaming computer but now I use just a it's a it's a tower PC gaming desktop and I have like this HD 60 Pro plugged into it I still use all the same capture cards but I still technically do stream on Windows like that's my streaming computer and then I have capture cards that capture this the output of the MacBook and the output of back camera in the output of that camera which you can't see right now maybe coding a WRC maybe did you mean uh web RTC I don't know pools in the chat manager pause button for the twitch feed how would that work oh you can pause an in actual twitch just not be formed chatting to like stop people from chatty and so you can do that you could do subscribers only you can do I you can slow down but you need to be an affiliate or higher to be able to do that I like I mean like people wanted people want to chat code Wars challenges is a suggestion actually that people haven't I really like that one because it could show our two styles of solving problems yeah so I mean we solve the same problem just differently probably collaborate collaborate and like one of us leads and the other one like a navigation driver cool cool everyone that has questions you can ask me on Monday I'm gonna try to do a morning tea stream on Monday so come back and ask more questions then also if you have the questions for me you could ask on discord CJ's specific discord yeah definitely Oh a pause button on YouTube interesting how to handle an error in Express no op ket not noob cat and I try to pronounce that noop cats with a P like but uh yeah it's no op because no operations I know it's the inside joke and I just keep on that lack of a dash there really gets me matías mentioning that prettier can also help with consistency I think Pranjal suggested that we hello Aaron welcome I saw your mock-ups for the chat they looked great I'm actually let me let me bring those up really quick see ya so Aaron did some designs for the coding garden community I think it's in general there's an election but he created some figma designs for how I should style this chat manager that I built I really like it so essentially instead of having like the different background colors for the different chat types it would have different labels based on where the chat came from there then are different actions I can perform on the chats I can see all the moderators that are there I would be able to send messages I can search thanks pretty good layout where do you work and what do you work on I work on full-stack JavaScript and I work at a software consultancy in Denver Colorado um if you watch every single one of my view two videos in one at least one of them I mentioned where I work so you're gonna have to do that to figure out where I work but I'd mostly do full stack JavaScript and a lot of like architecture and stuff like that basically designing the systems and then we'll have contractors potentially build them solving one queue or two uq code Wars Coty's that would be very difficult we might not have the time but we'll see Pranjal is saying please show the comedic method well we'll definitely if we collaborate maybe we'll set up a linter yeah no but I guess if we're using code words we're just gonna be editing like in the browser yeah we probably don't need to like do that for some like something small like a code Wars but I'd like setting that up might be interesting thing to do in a future a little read says all right I just promise to watch all your videos this week that may not actually be possible I looked at all of the code code words quote Coty's videos that I did and there's like over 40 hours or just me solving code war SCOTUS it's okay watch them a double speed two or three at a time you go crunch up Franco has it I can still oh I can enable subscriber only mode interesting hello Omar welcome win on Monday most likely a Monday morning for me so like like 8:30 probably eight o'clock 8:00 a.m. GMT - six do I like forward in four of maybe it's going to be a long week GMT - six hello is octavo when did you build a chat about it billet manager I haven't been here in a while and it looks new yesterday I worked on it for a very long time we got the new stylism we got twitch integrated but yeah greetings Worcester freash welcome back and Brooks works at help health Scholars cool we did it and either my chat is broken or it we did it we got through all the chat messages and maybe it's just my OCD that I wanted to get through all those chat messages I don't know but yeah let's vote on what we're going to build alga says I work at feeling later are you looking for a job okay somebody hire Alka this guy's got skills and the ability to watch multiple twitch channels at the same time and moderate them and stream at the same time that's 4 p.m. in Switzerland cool Ketil he says I work at the same place as Alka fill in blank here okay I'm gonna have to like take that away from you CJ which one the chatta chatta yeah okay so we're gonna I'm gonna create a poll and then everyone can vote on it what should we work on and it is 11:30 so we'll technically have like roughly thirty minutes to work on this thing so I'm thinking like the code Wars just do it don't even take a poll no no I mean like we could put that on there's like code Wars I don't think we're gonna get very far and like actually building a usable app yeah we'll figure it out something with animations is that a good enough prompt 2d physics we could make a pong game and we kind of made like brick breaker a while back could we do the thing where you build the back end then I build the front end probably not in this timeframe okay because that was one built together if we build it like it would be all separate chrome extension what could we build as a Chrome extension that be a whole nother thing if we choose that then we have to figure out what we're going to build Chrome extension Firefox extension we could build something super simple like it replaces all the text all the occurrences of the word within emoji or something like that that would be fun um search for the chat manager Oh a data structures and the algorithms that we just got another suggestion yeah implement data structure how do we get it to implement a linked list from scratch yeah we get that look simple language processing to promote messages depending on sentiment not today but that that might that might be more later I'm I am getting back into deep learning eventually and that would be perfect for that okay so I made this poll go here to vote now please vote for extensions code Wars one cute I don't we I don't think we haven't had to have the time to do it 1q I think it most would maybe do a four I mean typically for is taking like almost 45 minutes to solve I don't think I've ever even looked at a code Wars 1q and the ones that I've seen are like implement a sequel query processor so like you're literally implementing a programming language like what's the point in that that's like at that point you're just working yeah it's like I might as well make money off of this yeah so go to this link here to vote on the poll let's check out the results all right we need more votes to break these ties that are happening oh wow better twitch TV actually embeds the poll in the in the chat that's pretty sweet an emoji translator actually did that on a stream a while back let me see if I still have a moji writer dot now yeah this is the thing I built so as you start typing it replaces words with emojis like hello world how are you today Wow yeah I used the context API with react a while back to do that replace words with relative emojis yeah that was the thing that I built on stream we haven't decided yet my name is in fee yeah um but we need some tiebreakers so right now yeah we have eight votes for code Wars kata let's just do it because we need we'll need to figure out what cook what kata we solve as well you agree yeah let's do it okay code Wars comm so this also doesn't have to be the last time that I'm guest on this show what we could do is also maybe before we do the episode decide what we're gonna build and then I'll just take CJ's chat manager away from him yeah I need to talk to the people and acknowledge their messages cool so yeah so I'm on codewords right now and it's recommending that I do this minesweeper 1q basically you're implementing the minesweeper game that would be way too much we have like roughly 30 minutes to do something so let's pick a how about a 5 let's do 5 5 Q it's right in the middle it's good I'd usually like to do Coty's that I have not trained on and then I'll sort by most completed Oh EDD loci losing my stable calmness wait Oh Brooks was kind of low-key losing his day whoa yeah we keep coming back to it look at me I just like clicking the button he's addicted yeah we might have a little more than 30 months but I do want to respect Brooks time and he probably needs to go eat lunch you know like it's I'm gonna have to have an intervention with CJ all right there's directions reduction that one pops up on stream every time and I've never tried to solve it I don't want to do it do a 6q blindfolded I don't know how that would work well one of us wears a blindfold and that's the person that has to type and then the other person like make sure that they're typing the right thing hmm I think it'd be easier for us to do pair programming but the challenge is the navigator so the one who's not typing can't use words like bracket parentheses they can only like they could spell out the names of variables we can't say like equals yeah okay Prime's in number okay actually let's choose a category we've got algorithms logic fundamentals data types puzzles anything Brooks I don't know like I don't spend much time on code were so straight puzzles escaped the mines and see what this is about right it has eight issues reported I don't know if that's a good thing of it or not a poor miner is trapped in a mine mm-hmm and you have to help him get out only the mine is all dark key so you have to tell him where to go in this cut out you have to implement a method solve with map miner and exit it has to return the path the miner must take to reach the exit as an array of moves I don't like it it's got its like directions reduction a secret knock form the secret knock to enter how is this even like there's no description at all of the of the kata itself if so is is code Wars where anybody can add like whatever they want and there's like no vetting of it yeah mmhmm yeah but people can vote them up in like report issues and things like that in some countries of former Soviet Union there was a belief about lucky tickets a transport ticket of any sort was believed to possess luck if the sum of the digits on the left half of its number was equal to the sum of the digits on the right half here are some examples of such numbers okay your task is to write a function which returns true or false if the item is a lucky number I right yeah basically you some 1/2 and then you sum the other half and see if they're equal ok [Music] Conway's Game of Life would be interesting I don't know if we can do it within the time frame I think actually that is a completely separate stream where we make Conway's Game of Life oh yeah I'm curious how they do this cotta though because I think they just give you the functions you need to implement yeah I don't know all right luck check is looking like it's the one let's see if there's anything else simple digit code breaker in this code you have to break a code of three digits the Tri code function is called in a loop with a max of 10 attempts if you have to return an array of three digits weird find the heavy ball there are eight balls numbered from zero to seven seven of them have the same weight one is heavier your task is to find its number this one of those things really give just shits forth in between like the weight you put one on one side okay the clockwise spiral your objective is to complete a function create spiral that receives an integer and returns an n-by-n two-dimensional array with numbers 1 through N squared I don't know I feel like reading these and understanding is is half the challenge all right let's do this luck check right Patrick is asking if there's anything cool in a games category let's see gamers now puzzles okay snakes and ladders you are you familiar with the snakes and ladders game I mean Allah okay your task is to make a simple class called snakes ladders the test cases will call the method play with die one and I two independently of the state of the game or the player turn the variables die 1 and I 2 are the die thrown in turn and are both integers between 1 and 6 the player will move the sum of die and die to if this seems really complex mystery function number one I mean if we need to we could just switch over and do coding coding game and just do the challenge what's coding game coding game is very similar to this one and they have like a daily challenge or what they have like an entire AI thing that you mail build slowly over time I like how people are still voting is it JavaScript um is good whatever you want is code we're still winning on the poll no okay well what's winning now well according to the chat it's a Chrome extension now Oh I mean we could I've never built one before we need it so what time do you officially have to go uh I mean twelve fifteen something like that yeah okay how about we build a Chrome extension that replaces things with emojis on the page all right sounds good let's do it okay we're gonna we're gonna build a thing so actually Brooks all in the what do you call it I'm gonna hide my screen for a second this is us I am going to share my screen do you have the life I share with the live share with vs code yes yeah we can set that up yep set that up Senate send a link to me on discord and I will get that going actually you see I don't even have chrome installed I have chromium which is I think that you can put in extensions on it I haven't really tried after install I share hmm oh it's installed okay I share do you want code to open the external website go alright so we're gonna build a Chrome extension that replaces words with an emoji so we need a word so what's a common word that's in a lot of articles you send in your favorite common word I just sent you the vs code join the zoom chat yeah soon being so difficult I mean I thought that would be easier actually didn't is my zoom chat even working anywhere yeah there it is I even know how to get open the chat because I'm sure my screen should I send it sitting on this Court well gonna have to open discord you just had it open not very long ago there you go see I sound frustrated sometimes but I keep a smile on my face it's entertaining right alright so open link for those of you who have not used it live share 4 vs code is an amazing tool that vs code has it basically is Google Documents for for coding so show your screen now you're showing my screen yeah I mean I can get rid of it you were just talking about so I'm now logged in to 2 vs code and we can see that here I'm watching like I'm connected to see J if you open up a file sort of like create a new extension I mean can I just share the whole workspace so when your sync files I am you can see all my files I well once you start how do I start I should be able to see my share like I see a folder named talk with episodes or one that's great ok yes in episode oh one that's where I'll create the Chrome extension what we call it emoji kimochi Chrome extension and then a new file in there was just like a readme will do a like a to do all the stuff we need to do so here's here's how this works we can both be in here and I can start saying cool things at the same time as CJ ok and emoji Chrome extension hey buddy cool so we need a to do and cool we can we can start making our checklist Robinson says I'm so happy that the coding garden family is growing by the way how's the hello friend video going I only have 9 submissions so if you haven't submitted you should submit I want to get at least 10 at least 10 people I haven't even submitted mine which I've been thinking about you should submit yours and if you just search my channel for hello friends and you'll see that video it is like playing the cookie clicker game attea just clicking it somebody hire Alka coding guard is this a clip yeah so clips on on Twitter are amazing yeah they're awesome how many of those green chairs did you buy I didn't buy them I took them from work with permission here I'll be better very meta I'm gonna create my video right now okay yep with that with my phone of course just just this so hello friends live with CJ hello that'll be good hello Carlos great streaming guests as Carlos well thank you very much okay so we have we're potential words here we have a and the screen I'll read them to you Oh screen allegedly scream alleged allegedly JavaScript the days of the week days of week like all of them like okay not like literally days of week but like oh yeah Monday Tuesday Wednesday Thursday Friday could change punctuation works in two movies yeah I'm still working through the days of the week I mean okay I'm very literal come on this is Brooks working through the days of the week um camera camera learned death says tactical technician I don't know okay no idea is a bad idea I mean maybe we could replace the word a that you have that on there I have that on there turkey dinner um turkey dinner dinner yeah okay secure Gmail says you're teaching his well class I appreciate that yeah we have those I have the on the list I feel like words like a and are gonna be more interesting because they're there's so many of them and we want something that's like really out there for this dream if it was something that I wanted to like drive someone crazy with I would choose something like tactical because that's very rare to see on the screen and then I would change it to be like very subtle you know drive someone insane ya know Louis says Chrome extension which translates words into emojis that sounds fun yeah I think for our MVP or Minimum Viable Product we're gonna choose one word that we replace on the page eventually you could create like a dictionary of like words to emojis but I think we're just gonna do one it should be a pretty easy challenge and we are gonna create a Chrome extension I'm just gonna say we should replace in the hello Patrick I retract that was a terrible one chicken the word chicken chicken yeah hello guys and welcome a gaslighting app what does that mean like gaslighting the political when you're gaslighting and somebody a physiological manipulation in which a person seeks to sow seeds of doubt in a targeted individual or in members of a targeted group making them question their own memory perception and sanity I mean that's a perfect Chrome extension right there whether that's probably driving you crazy uh we could replace the word JavaScript with the poop emoji that was a suggestion it's fine is running out we're gonna do this is gonna take us like ten minutes yeah we're done I'm just gonna say it's me what about the word meow please where you deal with the okay that's fine that's fine also punctuation would be cool Alvin is mentioning punctuation would be cool but the might be easier with the regular expression stretch goals but we are going to replace the word the with an emoji what emoji over there replace it with a random emoji uh yeah we should probably choose like five emojis we'll just choose them randomly and just like take from an array of them cool emojis in the chat for what emojis we should use but this is the list that Brooks has been working on um so we have chosen the word that we're gonna replace the word the on any given web page with an emoji cool in terms of how to do this yeah we'll figure that out oh you know definitely the sealy emoji that's the coding Gordon oh yeah we could do that for the culture okay should I just start googling or we're gonna start making this happen yeah we're gonna start making this happen so I've never made a Chrome extension before so I don't know what the first step is I've only played around with it so yeah let's but what I I'm gonna search what do you call it chrome extension replace word on page how's that sound okay the way I think this would work is we would have a Chrome extension that gets access to the HTML and we're we want read and write access to that so we need to request that permission when we install and then we're going to on every page load probably listen to an event like document Rhett is ready and then we want to read in the entire text of every link so like walk through like maybe check every paragraph tag maybe every tag altogether and then do a replace yeah a regex replace so yeah conceptually you should be pretty simple I think they do have like a Chrome extension starter repo let's see getting started extension I've used this before so I've never published any extensions but extension Iser will basically generate your extension in a zip file and then you can just download it should we use that oh why not okay let's do it so extension type is I think a page action so use page actions to put icons inside the address bar page actions represent actions that can be taken on the current page that aren't applicable to all pages a browser action use browser actions to put icons in the main google chrome toolbar to the right of the address bar and then in addition to this to its icon a browser action and can also have a tooltip or a pop-up or a hidden extension use this if you don't want any visual representation of your extension when you only want to use to inject scripts for example I mean injecting the script is kind of what we're going for right will you a hidden extension background page the background page is an HTML page that runs in the extend process it exists for the lifetime of your extension and you only have one instance in the common case a background page does not require any HTML markup these kind of background pages can implement using JavaScript files on I think that's what we need because we're just gonna have JavaScript that replaces the text on the page persistent to turn the background page to an event page event pages are loaded only when they are needed when the event page is not actively doing something I think we do background jeaious know options page it'll just I mean technical eventually we could have options like what emojis yeah no we're not going we're not going for like you know again for complicated MVP minimum we're not overriding anything content scripts inject JavaScript JavaScript files that run in the context of the web pages by using standard Dom so we want to inject JavaScript that makes sense right yep what is Omni box allows you to register a keyword with the Google Chrome we don't wanna do any of that URL permissions we just want star right replace every single URL like any penny page that the user is on is this thing is gonna run sure yeah that's not secure but usually I don't like to install extensions that have those permissions but cool what permissions do we need context menus file browser handler tabs notifications I don't think we need anything right like as long as we have access to the current webpage and we can inject a script into it that should be all we need right yeah I'm not seen anything the the Texas speech sounds amazing like I we could just silently whisper out the text of the of whatever somebody is clicking on so I think star might not work I'm going to add HDTV star slash star you all permissions are a match pattern that sets your premises okay download it alright we got ourselves a zip file we're going to put it in that folder it is you going to unzip it okay it unzipped we have a folder called ext oh can you see it let me come back here yep absolutely wait that's the zip file I guess I'll just delete the zip file so we have a manifest.json we need a name alright go ahead and fill out the manifesto JSON I'm gonna catch up on the chat make the the emoji shift back and forth for maximum insanity use the cool emoji we could use that Sparrow says we could use a emote I think it'll be a little bit trickier to replace with images rather than just emoji codes move the devil emoji don't you have a save the emoji API so you can call it and make that choose a random emoji yeah I think we're trying to make it as simple as possible those are probably just gonna go from like an array of emojis that one I've never seen that emoji before yeah Christian's mentioning you need a manifest.json I think that's what it's called so that tool that we just use generated it for us Brooks has updated the name to be emoji changer we have a description we have a homepage URL we have our icons it tells it what scripts we're using the permissions for what websites we should be enabled on you and then the JavaScript that will be injected I think that work for some reason matches was only on Google so hopefully this it should be will work do H so do HTTP and HTTP I'll just copy you snakes make an erp web application with JavaScript inter-site enterprise resource planning that sounds like a lot this is a twitchy boat it's a snick snick oh oh I see frankerfacez that's another twitch plug-in thingy Superman says use a yo man generator to get started I think like this website was good enough would I use this if I was making my own probably not may I don't know I mean it seems to do most of what you need I'm just totally unfamiliar with Chrome extension so it seemed like a good place to start maxximum also starts with him use the turtle emoji yeah there we go twee mochi okay all right I think we've got a good list of emojis - I'm gonna update the description all right which file are you in so I think inject jjs is we're gonna write the actual code so in source inject and then inject ideas right so there's this console.log that's gonna run theoretically one that gets loaded so we need to like actually load let's load the extension and then see if this gets cold yes okay let's see what else that generated for us so we have background j s okay when maybe we didn't need the background J s but we'll see in yeah background JSC must be what's called from the manifest cool we've got some basic icons we can just leave the default icons I'm not worried about that and then English locale okay okay so let's try to add this extension to Chrome yeah Chrome extensions developer mode we will load an unpacked extension and we're going to choose that directory and load it cool [Music] right so it runs on all websites let's see if i refresh the page hello this message was sent from scripts / scripts checked well there we go we got works that's awesome there's a related no this is like other extensions and stuff like that okay cool so we have we have that running which means that we now probably want to yeah we just had a delivery sense you want a second yeah so we have some 100% grass-fed beef sticks yeah so ever since I had an injury early that earlier this year and it required like it changed my diet quite a bit so people who have followed my stream know that I can't eat like things like any sugar most fruits wheat-based products while I'm recovering still and that's due to the concussions so my snack right now is basically a micro micro sized sausage so this is gonna be so easy Brooks the script is already being injected so yeah let's do it well so what's the first thing we want to do you I think so are you in you're in here yep so code goes here I think we we can literally just say a document innerhtml right isn't that a thing I mean document that body that innerhtml so we first need to get the get like some tags or something well one of what I'm thinking is we can literally replace the entire text hello everything yeah of everything Lee just as a first pass but then it would make probably make more sense to like select all elements in rate over yeah something we can do we could say like Const elements and and like maybe we can maybe we can like be a little bit more thoughtful about what we're doing here and we can just run our run our functions so if we just say like elements if we get all the elements from like get all elements and we just pretend that we have that that function already written sure so once we have that element then we want to maybe get so filter out so that it's only the elements that have the ones we care to replace in I think we just brute force it you just worry just we replace the text content of every single every single element that we there then we just I don't know just call replace replace elements and just and just passing the elements okay like okay sure so before before you stop it you've coded without semicolons this is blasphemy on the coding garden stream no I'm just kidding but we know no well we should set AB alinder I think at least we owe it to the viewers to said AB alinder right okay especially after that yeah so let's let's go into episode one we'll go into the Chrome extension yeah we're gonna add any a winter right here curiously I don't want to like install yes live do I I'm curious how this works because typically this folder is what gets packaged up as an extension so you probably wouldn't want your node modules in there right I mean probably not so usually Chrome extensions you don't have like any other dependencies you try to keep them as light as possible I mean you could still bring stuff in from NPM and then like have some sort of build process probably right yeah but then you just take whatever the compiled code is and that's what you drop it okay what I'm gonna do is I'm gonna put a package.json in the folder above it so that way yes lit gets installed in the folder above it yeah in that way it's not in the extension folder itself cool and then I'm going to npx es linked oh who's the mystery person that delivered food to us that was that was my wife we're not using import/export or require right hmm we're not using reactor view you're not using typescript this is running in the browser right well should we use a popular style guide or answer questions about let's answer the questions okay let's use JavaScript tabs or spaces so this is this is a really interesting question personally I've actually been switching to all my personal projects to use tabs and the reason for that is for more of what is it as if if people need to use a screen reader or like if they're partially blind but they can still see it extremely zoomed in they can change the tab style really easily if you're on spaces that may not actually be possible well the thing that happens though is with spaces it creates a two space or a two or a four space tab so it's still technically a tab with the way the editor renders it is either as two or four spaces except under browser okay which one do you want to do either either is fine I usually do a two space tab I mean we should probably go for three space tab is that even a thing I mean okay double quotes are single quotes for Strings I usually go for Singh quotes in JavaScript see UNIX line endings do you require semicolons so I don't in JavaScript for my personal projects in order to help me remember what language I'm in mmm so should we use them here it doesn't matter to me it's up to you up to me then we're not gonna use no semicolons hey you give me the choice yeah okay so that gave us an es lint file I do I do need to change it though cuz I want this well he wanted to be a three space tab is that well it'll do a to space tab there should never be semicolons we use single quotes we're also using the es lint recommended rules so that has things like can't use variables that are undefined and stuff like that okay so with that installed now if we look at the file let's see does the linter run oh please use a variable called V that gets replaced by an emoji oh yeah okay so we can read this we could then go to the github after we deploy it perfect I like it I'm curious maybe this needs to be at the root of my project for D s going to pick it up I'm gonna reload as the winter working for you well you just reloaded so I lost oh I need to hide my screen while I create this collaboration session I haven't tried it yet but I always thought that creating a collaboration session where you can all like watch the code and just join in as a view only yeah would be really interesting to do along with the twitch stream that might that might be something to try someday to see like what is the limit of how many viewers there could be start clever it's not working what am I supposed to do you start collaboration session you're not logged in do I login or like your looks like CJ's like extension is not loaded properly yeah cuz it's usually shows up down here right yeah so that um this symbol right here that's what you need to click on so go there you command not found this that probably had after you deleted all your note box it is everything was working until you reset that CJ okay if we see okay let's just so I have a really cool Chrome extension that I don't think it's gonna work for us here today but it's a twitch highlighter so it allows my my viewers on my twitch to post a line number into my chat and it highlights the entire line I don't think this will work further a collab session because we're not looking at my screen we're looking at CJ screen yeah and I guess I would have to install that you'd have to install it and set it up and we don't want have to do that right okay you should be able to join the session now okay did you send me a new link um it says you're in it though I thought I don't think I invited by email Oh invite participants okay I gotta send it to you again and I have to reopen this word where's max now now the person is on camera so baked chickpeas wait I know I can't have like mostly nuts either so this is I can't have a little bit of cheese so this is like a chickpea covered in a little bit of a cheesy stuff okay we're gonna write some code one day it's gonna happen I swear you did you get it well I was looking at chat ok you sent me another link let me go copy link there we go the winter is working to cool so for just real quick I'm gonna use fix all auto fixable problems that'll fix the indentation and the semicolons and things like that all right I'm in before I'm joining this is not the best livestream snack because it's crunchy so many problems we need to addict I just I just fixed it but we're gonna add chrome as a global because that's showing tabs here it is it's a it's a pool in India's code make sure you have your tab size click spaces and change that I thought we were doing spaces no well do tab size and set it to 2 yeah this cow size to know that spaces - I thought we were using in spaces yeah what I'm seeing is that we have a mix of spaces and tabs I just fixed it okay okay are we ready I think I'll first implement the get all elements function responses define but never used also is this where we do it I don't think this is where we do it what do you mean oh it is so the way they have this set up is this set interval it's like waiting for the document to be ready I'm it confused me because it the code like all crunched together yeah I did what are you doing with all this extra space Brooks it helps me see things okay I'm sorry so you yeah you want that space there for why um I don't know mainly mainly just see okay good cool so I'm gonna implement get all elements and this function should basically get all the elements on the page right yeah so we want to get all the elements in a page and what I'm thinking of is that we could use the query selector all and just a like star asterisk well I mean we could be methodical about it like I want P tags and I mean maybe we just do P tags I like we could do gives and P tags the thing is like some of these elements are gonna be nested inside of other elements right and then with semantic hTML there's not just gonna be P tags or div tags there's good in these sections and there's going to be like all sorts of other tags there's hundreds of them okay what if we just started with P tags okay to see what it gave us because what I'm thinking is like ultimately we're going to replace the elements text content right and a P tag will have nest potentially I've nested elements in it and it's gonna replace that as well because we are replacing the text content we could begin by just having replace elements console.log with the elements it has well that gets the elements and then yeah so go you can go ahead and implement replace elements so replace elements accepts that node list of elements and so what I'm gonna do to begin with is I'm just going to console.log the elements okay and what I like to do sometimes is name this sure it's that way we know exactly what this console is in case we get multiple consoles in here and I keep I keep having to do that yes let fix like maybe do we want that's because I think my browser might my code is automatically doing even though I have well you put me on tab size spaces using spaces right so I need to switch it to spaces too it's a tab - let me say missing yeah I was wrong okay so we need to test this code I'm curious do we need to reload the extension or will it just work it's like try own DuckDuckGo I mean it's also gonna be really hard for us to verify it's working out DuckDuckGo because there's almost no text in there um so we're seeing the old console log so I know that I have to reload reload it we should at least see a log of an empty is there a compile step because I noticed this isn't a source directory and when I think source because I cuz I it was able to load it the first time and then here I just clicked update and that should load the latest code mmm so if I try again it didn't update load unpacked there we go there we go we got it okay yeah and so elements is logging and it's a load list of length 13 and we got some P tags you yeah like these are P tags so I mean for this page it could potentially work all right is the word V in there ever anywhere surprisingly it doesn't look like they were using words there okay there's some down here we don't follow you around this is the duct I'll go with it yeah I used UNK echo to I think after this we can try it oh no that was there for there's one the internet well that's that's the thing is do we want V regardless if it's inside of another word I think so like that's anyway easy it's because with the find in replace like it's going to replace inside of other words right okay cool so I think at this point we need to iterate over elements and update their text content yes and I mean that's gonna be pretty simple to do in a single single one now do we have to redeploy this I can't remember with Dom nodes if we update it does it just update in the Dom yeah absolutely it does yeah so I could do like element that text punking equals not that because this is an array so it'd be like the first one I'm using for each oh I didn't notice you already put it for you yeah so node list has for each built in so we can iterate over elements I didn't used it looks like a fairly I don't know it's been around for like a year or so at least in chrome so what I'm thinking is text content dot replace and then we'll need to pass in a regular expression to find the word and replace it with just an emoji for now right so we can also create the regular expression and then pass that in we could either pass that in or we could just create it in here okay you won't yet sure so if we caused regular rest uses snake case so I constantly do stickies by accident okay so regular expression what do we want this to be I think it should be just literally the word duh so we want this all to be global she'd be global for sure what's the other flag I for case insensitive probably okay yeah okay so the first side of regular expressions that's gonna be like what we're finding and so it's gonna be like V together and then it's gonna be doing anything more than that I mean we might want to do is put like a space on either side to to make sure like okay is there a space on the left is there spacing right but there is a question of like we might want dot and say like okay well there's could be like an unknown number of dots well I mean that's what I'm thinking so if we wanted to like in the word therefore do we want to replace or place the word the in the word therefore right so that that is a question because if we do then I think we we just do the because that will that will match it no matter if there's a space if there's a period yes yes nobody do you agree I mean it should yeah so it makes a little bit simpler but we'll see the results and we'll try like on some news website so we can see like what happens yeah and then I can't remember the and then is its we want to put in the replacement which is gonna be our emoji so I don't have that but we'll use the replace replace function so we're only matching here yeah yeah so on line 10 we can do text content dot replace you pass in the regular expression as the first parameter yeah I guess I'll do it and then so we pass it in regular expression then the second parameter is what do you want to replace it with right let's just do the turtle emoji for now but then and then we can get into like an array of emojis get a random one so I think that'll do it this is gonna do it I mean let's find out that's let's see it does it okay so I do need to reload the extension so we'll do load unpacked load moment of truth refresh the page and if we go down here that they are we did it okay now I think there are some things we can clean up this code oh yeah absolutely and we can add more emojis let's catch up on the chat really quick because we haven't looked at that yeah Linus says they can't type emojis on the Linux box is there a keyboard shortcut some type of user so I can open up any mode Oh accidentally changed my keyboard layup there's a characters viewer on on Linux I'm Linux it's thinking about opening it up for me I just tried to open it up if it does CJ could look yeah here it is ah so if you want to switch over to my screen yeah so this is like as close as I can get to a bunch of emojis I've used this before in in like my applications it's like not as great as like Mac emojis but there's there's a decent number of like interesting ones cool I think I saw a chat from alka it also replaced the of therefore I think that was my intention at least because we didn't handle like there's a space on both sides or there's punctuation maybe we want to maybe we only want to replace the word though I love to think about that though yeah whoa and assistant this is the first time we had an assistant on the street when your wife brought the food oh yes coding ASMR with CJ hello field codes welcome is that all for the start of the Chrome extension I thought it'd be more difficult now that's it so in your Chrome extensions are literally JavaScript HTML and CSS but like we showed when we were generating it there's a lot of different things you can do like like if you look at the adblock extension it shows a little pop-up window you could get that going something like stylus has its own management page when you click management that launches an entire web page where you can manage the extension I mean all of that is web-based or is it super basic though we just were showing the icon yeah we don't have any options I mean literally just to replace the emojis on the page that's pretty quick setup oh yeah I mean so Chrome extensions are I think they are supposed to be quick setups yeah but it's also like think about what we just did in a very short period of time we're able to read every single bit of text on the screen including whatever's typed into protected fields yeah so like a password field we could totally read that and send that would be interesting to see actually let's take a quick stretch but yeah so if I open the private tab and I went to like a site to log in and I typed the in the input box would it replace it earlier in the password box I mean yeah I mean he might what am I not logged into that was into Facebook I don't think I don't have a Facebook account okay probably shouldn't be password no it's not because it runs on page load I mean we could actually we could run that on an interval so I think I think that would be the the key is now to like let's make this run an interval so that anything that changes it auto updates but I think more interestingly we can make it run on the interval and then change the emoji every X seconds I like it okay so what's your you have a series of coding garden emojis don't you there's the CJ emoji is that what you mean okay I thought maybe you had like the plants growing up oh um no but I mean part of the emoji suggestions we got was like the seedling emoji and I think maybe maybe what we do is right now we just make an array of these can we just cycle through it yeah all right let's do that so like up at the top here we'll say like emojis equals an array with all of these I'm gonna do some fancy replace so all of that Tabet we need to put it inside of strings unfortunately in JavaScript you cannot have just emojis without being inside of a string no Sina : well there's there's a reason for that is because emojis aren't one character long there are actually multiple characters long and it gets really weird with that I think is it Swift where you can use emoji for variable names like yes yes Swift will allow you use emojis for variable names do not do it alright so we've got our array of emojis and do you think so we should just maybe we have an index into the array and we just cycle through it so like we started the first one ten seconds later we go to the next one I mean I kind of like so we could do that but then we have to like handle when we get to the end of the array we have to start over the beginning you can just use mod for that easy I mean we could yeah or we could do you think Kris Jenner ATAR a generator so like there's very few times when generators are actually useful sure this is like one of the only times I think they are hold on to your hats we're about to use generators now it's been a long time since I've wrote a generator so is it start and I think it's like I'm function star okay and then the name of the functions this is gonna be like I get emoji okay like I'm not sure if that's like a good good name for this yeah cuz it's gonna get maybe like get next emoji yeah so we're going to then just put this straight into our emojis list here but why well because like we don't need them outside so we're just gonna grab grab the latest ones we're gonna initialize and index so let our current index equals let's start with zero and we're gonna need to yield it hasn't it's complaining because we haven't yielded anything yet oh okay yeah so we're gonna need to yield whatever whatever that is so I think it's just yield I'd say yield emojis emojis of index index but this is where we can do muck modulo to wrap around so like if you do like index plus plus that will get the current value of index increment it for the next time around right and then we mod it by emojis dot length and that will essentially just keep wrapping around right so as soon as we get to the emojis that length it's gonna go back to zero and then come up again this is some really weird syntax we have right here we've got a plus plus yeah so okay yeah yeah this like I personally hate this so technically we could we could I let's not worry about it I mean but this should work let's see if let's see if this works now what we want to do is we want to call get emoji and then we constantly call it over and over and over again every time we need to get another emoji and we'll just magically get this other emoji yeah and so and those of you that haven't seen generator functions before that's it's basically what they're are their functions that can return multiple values multiple different values depending on when they were called and they're kind of like iterators right and that they on each iteration or like each call you get the next value right so think about this we just replaced the idea of a for loop with with this function and this is actually one of the cases for functional programming this is doing something like this cool so I think at this point instead of passing in turtle emoji we just pass it in emoji I completely forgot how to use like to use the you can just invoke it like any regular phone oh no I think we have to do like we have to initialize it like dot value and then dot next or something like that yeah okay so I think we have to initialize it the emoji generate or equals I think it's just emojis so we just want the emoji and then equals to get emoji so we should probably I'm gonna rename this get emoji to emoji generator okay I'll use that name and now when we want to use it I think it's something like emoji dot next or emoji dot value or get or make sense should we go to the MDM Docs for this I mean we could or we could just try it and see if we're good lucky yeah but the issue is we have to keep reloading the extension let's try it though okay so I I think it's emoji dot next actual EVs code might help us I think it's emoji dot next invoked dot value probably what's interesting is that on my side I see him typing each of those commands out but I don't see you see the extension box like the autocomplete box so I think it's like invoke it which will give you the which will yield the next value and then we want the value because part of what you get back from invoking next is like is the iteration done are there more values to get well Colleen X actually calls this function and runs like this code yeah and the first time we call it index is zero right and you can technically decide I don't really care okay that was a middle click apparently I don't really care about this value and so you don't need the value you can just call next over and over and over yeah in our case we want the value right okay so I should do it and what this is actually going to do is instead of just using one emoji it's just gonna cycle through and each word is then going to be the next emoji in the array right okay let's try it load unpacked select refresh the page [Music] it did it Wow we broke something so something simple meant seriously wrong okay lady do we have any error messages I don't see no error messages okay so at least didn't break him that way locked by client I don't see a Vee anymore do you undefined undefined okay so I mean that's cool so we're getting it undefined which is like that means that dot value is not exactly one so at this point time let's go to the mdn and take a look at that okay gender age and thank you I'll Caillou you got that it is said undefined but we weren't looking at a chat at the time yeah wait you're looking at mdn I'll look at chat oh you'll get Indianola good job but then they can't see my screen find the answer and then when you're ready I'll switch to your screen mdn generators random semicolon usage yeah oh the snack supplier yeah please use a variable called V that gets replaced by an emoji and create a variable called thee and not all another editor support changing the size of a space to havoc I see so that's why we should use tabs spaces hello minecrafter welcome to the stream you can do view-only vs codeshare sessions we didn't want our suite of you only voted me probably not yeah but like it could be I mean we do whatever you want yeah that computer mouse looks fancy yeah so if you look at the mouse I'm using this is a these are blending in with the blue screen is a vertical mouse so typically when you use the mouse to use it like this and this is an unnatural position for your hand because like the Bowman's crossover but this is like a natural position for your hand so it helps preventing RSI and things like that horse necks chips in programming okay so it looks like we just want a yield and then the thing I'm actually wondering whether or not our mod thing is working and there's a really easy way how do you invoke it though did you find that so that yields it yes it yields it and then iterable is make your own intervals because that's doing a four of we just want to get the next value yeah I think it's just that next it might just be dot next but there's there's an easy way for us to like verify this is that we could just go to ripple and play with this separately yeah krome console but I mean that works too so like if you just did do 0 mod 5 should give us back 0 right right so if I if I come and we just grab there well I mean I don't really have to work with like the the issue we're running into is actually we have our own dot value is undefined like that's the issue so let's we could just take that off calling well the thing is we we need to do that so if you if you go back to MMD and I'll show you where I swear I saw it so scroll down and you keep scrolling keep scrolling right here so you see line 14 we see invoke generator dot next and that's that that returns an object with a value property so what we do we do need to do that but maybe we need to invoke it every time right so like right now yeah what's interesting is a this value Jen like they're they're yielding a star and that's sort of like the interval on its own we don't need like that entire loop through the this actually makes me I want to try this okay so if we if we take our rep lit and I was gonna paste in our emoji generator here if I don't if I just yield star the emojis that will yield the next one and if I just want a console that log and then it's gonna be the emoji generator dot next now you have to invoke next and invoke it and if I run that value is that oh you know what we don't have to initialize it so you don't you invoke it every time we invoke it every time so then copy and paste your console so yeah oh why the line thing won't work ok so you said enter and all each one is not different um okay so I but I think well what does yield star do though you'll sir versus now if we put your your thing back yeah put my thing back let's go grab that really quickly and we put you like that yeah get rid of the star on yield though yes eager to start still no difference now I heard a new generator that you have to call next time ooh I wonder if that's okay so let's let's try the initializer so if I just say Const emoji equals the emoji generator and then can I do multi-line with this oh yeah so then emoji I just call necks on that so the first one works and then all the other ones are undefined okay so what is 1 mod 6 so you know what the problem here is when we mod that it no longer is an integer it's now a float well so we need to floor this you can you can you can index all day long because I don't have it won't have a decimal place I think what's happening is the the return value of incrementing index is is not the value of index itself and that's why you can't mod it all right like so if we if you just try the return value huh yeah so like just try console logging like like 22 plus plus that should be 22 oh well of course can't do an actual like have to variable yes you create a variable I'm trying it to I prefer using the chrome console like I don't I don't like using like a ripple let's see Simon oh you select so it it's the number and if we do this again then it's gonna be like the next number should be 22 and then 23 right that should be fine okay try try doing mod now what I want to do is let's console.log what index is each time in here just to see what we've got that code will only ever run once yeah I guess that's true I do this for me please Brooks yeah I'm on line 24 do so let so let num equal 1 okay so we're gonna start with 1 sir with 0 actually because that's that's what we're happening and then on line 22 do num plus plus space Oh so we're gonna do their entire yeah you're just gonna see what happens mod 6 and then do the same thing on line 23 so 0 and then I'm plus plus mod 6 again and so we should get zero and then one yeah see that's working it's working yeah you know what just put a star online 12 do yield star I thought we did that poor I don't think we tried it with my emojis or anything I think that's what we're missing no that's not it all right let's see if anybody in the chat has a suggestion because we have me looking at chat hmm you have to pre-increment so A plus plus I I don't know I don't know about that I mean I could try it so I can put the plus + on there Prine commit it got to so anything really go through yeah it incremented before before I got the next one [Music] we need to put this in like a for loop I mean we shouldn't do a fort we shouldn't have to do for loop but we could I thought so like basically what's happening is the function is running once and then the generator is done yeah and that's why we're getting the undefined value so we need this generator so like let's say I did this let's say I did like four so you just do like while true yeah actually you know what that's probably true right so like while true so and then you can replace that same yield statement that we had inside of it so while true we want to yield emojis are emojis of i plus plus i guess we don't have to buy the index so we'll have that pick that again so index plus plus mod and then it's really gonna be the length of the emojis minus one emojis top length well that's gonna be like cuz the highest possible index yeah right but yeah we wanted to be a highest possible index right yeah where is it equal to that so is actually then goes back to I think it's minus one yeah it's right now you're inside he's be a percent and what's the big difference it's not like computers really care about that a yield intermediate variable is not an iterable hey oh that's interesting so we got undefined as the first one oh look and it went the first one and then we want to here so that 0 mod 5 gives us back 0 right 0 mod 5 I think would be 0 we could try yes yes you'll yield stars Ford is for delegating to another generator that's what out guys told us yeah 0 okay yeah there we go in alga has it while true yield index + + and that's what that's what we're doing now so that makes sense ok so but yeah why do we get a undefined logged now what if I do not the minus one ah that works okay so it wasn't ma let's see you Oh what you'd have wrap it in parentheses I think it was doing like the whole thing moded minus one yeah okay so go and do it so so let's do minus one again but we need to make sure the order of operations is correct here yes that's gonna do it there we go yes so here's our code so I'm going to take this back in so this is what one of my favorite tricks of like programming is extract out from the context of where I am that way I can understand what the problem is without worrying about if elsewhere in my code I'm screwing up yeah so this entire function gets replaced now cool so we figured that out and now we should be able to say emoji next value right so here's our emoji generator there and then we're going to get the value and replace it so hopefully that should just work I think that's I think that's the winner we can we can call it there because we went way over on time yeah I gotta go get lunch yeah okay so we loaded it people should I guess um I can't send links what website should we go to to test out this extension Oh so I think we should well do you have the we don't have this in github already that would be that would be cool so the interesting thing that it's doing is yeah because because we're doing it on each element any given element has the same emoji but then the next in mode the next element has a different emoji all right I'm gonna change the constant emoji to the emoji okay that way we get that little replacement when we have this and get up eventually cool all right any suggestions pat team on YouTube is saying don't do the minus one so my we should get rid of the reach we get rid of the minus one on the mod ok there we go if you do minus one it will never be five you'll never get the last one then read the last value yeah because we want it to hit the last one and then go back to zero we're gonna try cnn.com now we don't have no loop yeah and it could also be dynamic content right because if the page is like dynamically loading so I think what we want to do is we want to take this are we have an interval now well that only that only runs it once because then it clears the interval oh we so I'm gonna let's change this to an interval to a set timeout a timeout well uh what I think we should do is like take take lines 40 and 41 put it in its own function yeah and then that function calls itself oh it's two seconds later a little recursive function yeah but he could do it it could do a set timeout for two seconds later so what we can do is a we'll just have let's create a function first for them up here we're yet okay here so we're gonna call it I mean function this is kind of like our main runners this is like replace is a do it do the thing ya do do the thing as many of these as we can get in here what can we call come on you you are gonna go up in here okay now do the thing this is really like our main it's a runner it's I would just call it replace all words and we could we could like eventually even put in what the word is that we're replacing we're not gonna do that right now and inside of here we want to set up an interval I don't think so so here we should invoke replace all words so right here we call replace all words oh so you're thinking about a well so we're gonna run into a problem where we're going to overflow the stack Oh No so you do a set timeout oh okay you're gonna do the set about trick so um essentially the function will call itself again in one second okay sounds good yeah all right this is the winner we need to reload it load unpacked I think that your your app for twitch chat is that um is that rain and browser this yeah oh yeah what you doing here doing here everybody put these into the chat here we go it's working we got what does the the do there we go they're all the same well no they're not all the same what I like though is our generator it keeps rotating so like on each iteration whatever the B's it finds it chooses the next one Oh interests right because the generator stays there yeah um though I guess technically what we could do is if we if we create the generator outside of replace elements then it is always it's always using a different let's do that because if we if we create it out here then it's always gonna be the next value and that way we at least make it to the end of the array let's let's load the extension select refresh oh it doesn't it doesn't find it in an input box right because we're only looking at certain we're not looking at the HTML content it sells just to what it's displayed to the screens you're not something inside like a value we're just doing P tens yeah yeah okay so there's there's a lot of like places that you could take this yes absolutely we did it Brooks that was awesome yeah we did we could we could have been done faster I think we got hung up on the generator but that's still fine we learned we learned something right I learned about generators I think it's fun to talk about our differing opinions of syntax and styling and stuff like that and the other thing is you're never gonna find two developers who truly have the same exact preferences yeah they all come together and agree on something to work together but like they're gonna go home and do whatever they previously wanted anyways it's super fun they're okay we got it in the stream there alright so one last pass through of chats and then we'll be done yeah so what are we doing or art Renato we built a Chrome extension that replaces the word though on the web page with random emoji yeah Quarry selector yeah and what's cool about this is now with that we have it running on the interval any older messages or any new messages yeah they get at it as well it's pretty sweet you get the entire text content of the page and do a final replace with a generated record yeah I mean we could but that's cool snake case here we go great creating coding Trina has a video series on the snake subject that does it more by hand in terms of building a snake game or an extension I'm not sure Firefox extensions are actually compatible with chrome ones what if Brooks tries to install it a interesting question I don't know we have time right now look at that but if you put it on the store I'll try to put it in the chrome store yeah I don't know if that would work okay or you could just send it to me at all like try to install it for tomorrow's stream infusing in JavaScript you can use emojis as an identifiers in Firefox this engine will I will reactor that later you know the coding train sucks oh yeah why not return emojis math dot formats not random we could we could return random I like the idea of cycling through it though the random one is a very interesting idea though yeah hello my bra welcome undefined it says undefined there's a way to turn your arm without rotating it here we go we're gonna try this you try this with me Brooks start with your hand open against the same shoulder like this like turn at the elbow to put your palm across your chest towards your other elbow now swing out and back in front of you your hand has now rotated 90 degrees alright stir the hand open against the same shoulder turn it about put your palm across your chest as you swing out in front of you I mean swing like that or something like that because uh I don't know I did we we won we won we won I mean actually you you all won oh and I think yes so just uh Eddie just made the suggestion you need to iterate over your array that was part of this generator thing we were trying to just generate basically we were yielding a single value and then the function exited right because it didn't it didn't know to wait for the next one but now this this looks like an infinite loop but it's really not because the generator is only ever gonna run this one line of code every time you invoke it yes and that's what generators are really for yeah cool yes and we need multiple yields hello Rob Bruce yeah so we got rid of the minus one didn't work on the CNN website maybe these aren't P tags they're probably not P tags see what they are they're spans inside of divs side of articles yep so they're definitely not I'm just gonna make that update really quick so we don't need I'm gonna do it watch me so the selector we just will say like section and we'll say span as well so that way this selector will get all of those elements and then if I load it select it refresh it there we go awesome um more vids together I think so we can make this like a monthly thing or something I wouldn't mind doing that we could do some rest on here if you don't like yeah I could go over to Brooks's streaming studio oh yeah I have an entire studio that uh that CJ could come to - I don't have these awesome green chairs the family talk use there isn't many does right are they they are what what elements are these are these like HDX it's an a because we can do anchors as well we'd be here all day long coming up with a list of things to do let's let's not worry about that I want you to see that load refresh there we go see nice yeah we did it I'm gonna I'm gonna see if I can do a pull request for CJ's chat thing so that when like if we get enough people that say like okay let's just get on with coding it just wipes all of his chat yeah I think I think that we've if you want more of me I do stream Mondays Wednesdays and Fridays is my regular streaming time I'm at well here I broke the page with my extension Thank You CJ for making my stream but yeah so I'm right now going through nature of code in rust and using the GG easy extension also I have a community library that I've created and khattala has a few pull requests in a few other people that have been on have watched with you CJ have pull requests in I'm actually gonna go hang out at the cafe after this and like work on work on managing that the community library so we're I'm gonna be using at all my streams awesome and if you are not subscribed to Brookes on YouTube you definitely should just search for Brookes builds you're at 720 subscribers you get up there alright and I think all of your twitch streams Yuri upload to YouTube all of my twitch streams that are like relevance so like my community managing of the library I don't usually upload those to YouTube yeah but like state like I announce when things are gonna go up or down so I turned it so that when I click the extension it does the thing it's breaking stuff it's probably because we're overriding text content of like nested elements yes yeah oh well also you're on Twitter right I am on Twitter Brookes underscore patent Forex patent cool also follow them there do you tweet before you go live I tweet usually the night before I go live okay cool all right any last closing words any thoughts before we in the stream no I think I think this is pretty awesome next time we'll we'll build something well we'll figure out what to build before we we start the stream definitely but with that I I don't have anything else be cool awesome thanks everyone for watching I'm gonna just give some shoutouts real quick to anyone that's followed me on Twitch because I don't have notifications on so let's do this Raider dashboard there is a recent activity activity feed here it is yeah I don't think this has all of them but shout outs to all these people lasagna Lynott i'll you but linus dev fan ray media I'm a medic gave her 1588 Allah Bendix t-shirt fritz satya mehdi fe and kim learned EV son of satan inky noob like lima a sink sink thank you all for following the channel i stream randomly but if you follow the channel or you follow me on twitter you can see whenever i go live thanks everyone for tuning in thanks for all the wonderful questions thanks for hanging out with us and the support this was fun brooks we should yeah we should definitely do it again definitely cool alright everyone wherever you are in the world have a wonderful morning afternoon evening or night and until next time here's this [Music] you

Channel: Coding Garden

Views: 2,810

Rating: 4.9459457 out of 5

Keywords: full stack javascript, backend, tutorial, chrome extension, beginner, extension, coding, talk, full stack, vscode, browser, javascript news, live coding, web development, learn node.js, qa, web, full stack web development, lesson, brooks builds, programming, debugging, frontend, mechanical keyboard, node.js, pairing, educational, q&a, live streaming, html, live stream, css, pair programming, learning, tea, javascript, learn javascript, news, chrome

Id: wecz5Y90GGo

Length: 167min 42sec (10062 seconds)

Published: Sun Oct 06 2019