Morning Tea with CJ - ES2019 features, Q&A and ASCII art with Python!

so [Music] hello friends welcome to coding garden with cj welcome to morning tea with cj the show where i browse the web chat with all the wonderful people watching live and maybe find some new library or something to try and implement um it's been a long time since i last did the show if i checked the last time i did the show was back in september september of last year um but i think i'm gonna start doing again it's always fun to just browse and see the latest news and talk about it and stuff like that uh give me just a second let's say hello to all the people in the chat [Music] [Music] cool hello oliver welcome to the stream uh 36 minutes passes when the stream was supposed to start it's now 10 49 but yes that was a weird time uh and hello joshua welcome to the stream hello atd 285 hello my your welcome welcome hello wally oxen hello ayub hello jake mckay welcome welcome hello the finished shoulder soldier my shoulder uh hello i'm ed amadou good morning hello ron bonjour hello back abanga who says finally a stream i can catch watch live that is not in the middle of the night yes hopefully i'll i'll try to do more of these weekend early weekend streams hello b-max and hello joe welcome to the stream hello kamalash all right um so if you've never seen the show which you probably haven't because i haven't done it in a long time i do have a um give me my mouse back just a second i lost my mouse just just a second um are you kidding me you know what i think i'm just gonna have to do this there we go jeez i was trying to share my mouse between computers but that wasn't working but if you're new to the show i do have a github repo it's github.com codinggarden slash morning t in all of the past episodes um i've created a readme with all the links that i find and potentially any code that i uh implement i'll upload it to this repo so we have a blank readme to get ready to get started today typically what i do is i just browse reddit uh look at the latest news look at new libraries and stuff like that if all of any of you watching live have any news that you'd like to share feel free to throw it in the chat and uh we can talk about that as well hello jonathan welcome to the stream hello doo noob from germany that's awesome uh hello iheb and they asked what are we gonna do today we don't know we're gonna see what's in the news and we'll figure it out as we go and yes this morning i'll be drinking a yerba mate revel berry let's pop it open it's good stuff if you're drinking tea if you're drinking coffee let me know what you're drinking let's get started we'll start with our slash javascript and let's just refresh the page so we have the um latest news let's look at this first one finance.js makes it easy to incorporate common financial calculations into your application the library is built on pure javascript without any dependencies well it has 307 upvotes 40 comments let's look at it install it with npm calculate things amortization that's cool what else you got compound annual growth rate compound interest future value discount factor internal rate of return that's great i'm not i'm not really into finance or anything like that but that's super cool um let's throw a link to this in the readme maybe at the end of the show i build a simple finance app that does some calculations who's to say uh let's look at the reddit comments see what people are saying about it the library is built on pure javascript without any dependencies is that legal well let me link to these comments too how come it's using methods on an instance rather than just standalone pure functions the constructor isn't past any arguments that is a good point let's take a look at what needs to happen yeah so what they're talking about here is so you require in finance then you create an instance of it and then you have access to all of those methods but what they're saying is all of these methods are pure functions meaning you pass in the data and you get back some result every time you pass in the same data you're always going to get back the same result so you really shouldn't need to create an instance all of these should just be static methods that you can just call without creating an instance let's see if they have a reason for that yeah the constructed object doesn't even have state it's called object as namespace no because you could still put all of these functions on an object called finance dope they do make a good point though like you don't this is like an unnecessary instance why are function names all so all of these comments i guess reddit is is typically pretty uh uh negative but yeah all these comments are just criticizing it but they make a good point why why use abbreviations why not use the full name i don't know if these stay negative i'm gonna i'm gonna stop reading them does it help with box spreads that means sarcasm not the author but give me a little time and i'll address the following why are the function names abbreviations why not standalone pure functions working tests and ci pipeline um if we look at it on github does it have tests it does have tests okay but yeah these comments are very critical here's here's a positive one this is great thanks for sharing cool i'm gonna stop reading those comments because they are getting pretty negative uh but yeah this is interesting maybe we'll build a calculator app or something like that uh let's catch up on the chat i'm gonna attempt to share my mouse with my other computer again before it locked my mouse on that screen and i couldn't move it over anymore there we go monitor manager yeah okay uh wally oxen is drinking water that's great oh my gosh drinking more milk sounds nice be max just finished my coffee wish i knew this was happening earlier yeah i just announced it this morning i think i'll try to schedule one for next saturday so people can can know that it's going to happen um ayub just said did you see the possibility of adding pwas in the google play store i did not but i'll make a note of it and we can we can find some articles on it that sounds cool uh joshua's saying i'm british so anything i drink can be considered tea yeah it might be like blasphemous that i'm drinking tea out of a can but i really like this brand of tea actually i want to get sponsored by this brand of tea if they just gave me cases of yerba mate like that's pretty much all the sponsorship i would i would need hello elliot welcome to the stream uh atd285 it asks how is your new job going i just applied for a job as a vgs developer they sent me a fun little technical challenge that i'm finishing today would be my first dev job so i'm a bit nervous that is awesome good luck with that feel free to throw a message in the discord if you want someone or even me to like review your code or something like that but my job is going great i love it um i mostly get to work from home when i want to or need to uh the coding is fun i have responsibilities people appreciate my opinions and um yeah i like it it's a good time uh joshua's saying you could go crazy and try a react native mini app that would not be a bad idea mainly because for the coding garden community app we are going to use using react native that would that would be fun hello chris from germany welcome to the stream uh king david is saying uh is it saturday morning already in denver it is uh i'm are you somehow behind i would assume most everyone is ahead of my time zone i don't know but i guess yeah king david is in the uh previous time zone hello robo king welcome to the stream yeah uh atd 285 is saying i stopped going to learn learn programming there's a lot of gatekeeping that goes on there um yeah i i think this was i think this might have been the um the subreddit that i posted a link to my channel too a while back and just everyone like so and so some nice people from the discord commented and then everyone was like these comments are fake nobody's that nice nobody's that good uh it was very negative so i'm i don't care to share my stuff on reddit anymore hello bob's paradox welcome to the stream uh jonathan says drinking nothing because it's sleep time over here you get some chamomile maybe or like decaf coffee i like to drink like lavender chamomile tea at night it's nice uh salmon says hello cj your live streams are great and informative thank you very much uh nikhil is saying graphql that might be fun um if i find any news on it actually so there was um someone reached out to the denver ujs meetup to try out this graphql tool that would actually be pretty cool uh sweet to use or try out this is from nikhil oh give credit oh this was iu sorry not my you hello jesus welcome to the stream uh extreme fool says i remember you from galvanize i was g77 so i missed learning from you ah um hope hope your career and learnings are going well you can always watch the coding card and learn from me there all right so finance.js it looks kind of cool there are there are some valid critiques of it let's keep moving ooh what's new in ecmascript 2019 shared 10 hours a day ago uh the ecma tc39 community responsible for the ecmascript specification confirmed a list of features that are in stage four so does this link to github yep if you're not familiar um basically anyone or any organization can suggest new features to be added into the ecmascript standard which is the basis for javascript um and they create what are called proposals that say like i think this thing should be in the language and they start off initially as um straw man meaning um it's just an idea they don't really have any backing from any like major browsers or companies and then it progressively gets more and more backing and more and more support um and i think by the time it's a stage three proposal some browsers have actually added it in as as under like a feature flag or it exists in the browser and then finally i believe if it's made it to stage three it will appear in the next version of ecmascript so uh and the way ecoscript is working now every single year they have a new release of a bunch of features it started in 2015 with es2015 it was like tons of features and now every year since then it's been just a few extra features um okay but let's look and see what's going to be in yes 2019 you must have used a try catch block before yes i have what if you didn't need to bind the error parameter of the cache clause now you can skip the parameter running well that's nice you might have tried to do this before let's take a quick stretch yeah you might have tried to do this before like you do a try catch and you're like i don't need the error let's just take it off and then you get a syntax error so currently when you do a try catch you have to specify this error stuff but in es2019 it will be optional so that's cool json superset by richard gibson it's fully backwards compatible let's see what it adds in reality the json standard is not a subset of script so json is javascript object notation it's actually like a separate standard for how you define javascript objects and what they're saying is it's technically not in javascript itself so there might be some differences json can contain an unescaped line separator and paragraph separator but ecmascript must use an escape sequence to add them to the string this may cause occasional bugs and this proposal introduces some consistency between ecmascript string literals and json string literals interesting so now in the javascript language um these things that were supported by the json standard but not necessarily by acme script will actually be there so you'll run into less bugs that's cool um let me add a link to this before i forget [Music] okay symbol.prototype.js uh to improve debugging experience a symbol can be created with an optional description historically we use to access the description value to string okay interesting so um the way people so symbol is uh a primitive that was introduced into javascript in es2015 um it's basically like a way of almost creating your own like unique type it's probably not the best definition of it but symbols are a thing but before if you wanted to describe the symbol you had to do two string now you can just access the description property that's cool uh function.prototype2string revision okay the tostring implementation has been revised again and standardized the returned implementation dependent so let's see um it's an incremental update in a big proposal so you have this function you send it to string and you get back this sure and if you are sending some native function to string you typically see native code what is this add though remove the forward incompatible requirement clarify the functional equipment okay this is too much for me i don't know exactly what that does let's catch up on the chat real quick um joe just asked can you make the chat visible so we can full screen the stream that's actually not a bad idea i have like extra space right above my head let's do it let's go to my channel let's go to this stream that's happening right now can we pop out the chat pop out the chat close the window chat goes here just like that cool i like that um it might be a little bit hard to see but yeah let's catch up i think so i want to view live chat i think i was about where was i here hello thanos welcome to the stream and yes oliver's saying uh someday we'll have optional chaining natively uh you the i did i think i did a was it a morning tea i did a while back but i tried to add the optional chaining proposal to no i yeah it was a morning tea um but let's look up the ecmascript optional chaining yes so optional chaining is a really cool thing um basically you often in javascript have to write code that says okay i want to access a property on some nested property in an object but first i need to make sure that the object is not nolar undefined make sure it exists then i need to make sure the nested property exists and if that exists i'll make sure that its nested property exists and if that exists we can access the property in the in the simplest case you might use something like a ternary so if foo input has a value let's access the value property otherwise undefined optional chaining gives you this nice little question mark so basically you could say okay we know that user exists but the address property on user might not exist if it does exist access the street property that's nested inside of that otherwise street just gets the value undefined so this is really good for like nested undefined checks it actually does exist in c sharp right when i left my last job i think c sharp was around version six and they had just introduced it but it's really convenient and it has not made it into the language yet right now it is a stage one proposal so until this makes it to like stage three we won't see it in ecmascript hello amy welcome to the stream uh thanos is saying i just read about this let's take a look next generation full text javascript search library for browser and node.js yeah a lot of link zeno says i really like your stream thank you very much hello the moon tory my day is going okay i i slept i slept decent hello jake welcome to the stream uh oliver says i can't say that tricaster without error excites me it'll lead to more people doing catches that just ignore the error which is a good way to hide bugs that is very true um we call that like swallowing errors so someone will throw a try catch in there just so you don't have to like see the error logs in the console when actually you probably want to see that and now the application is in like some weird state so yeah it's true hello jt welcome to the stream it has been a very long time since i've done one of these um i think i'm gonna try to stay consistent and do it every saturday morning you know what right here right now i'm gonna schedule the stream for next saturday um let's do it just because like i don't know i've gotten really off of being consistent on my streams and i want to i want to get back into it um actually okay live streaming you're seeing behind the scenes events um what can i do new live event can i copy an existing live event really i just want to copy this leave new live event next saturday uh what is next saturday the 9th february 9th wait did i put 2018 in the title or is it 2019 in the title okay i didn't put the i didn't put the year so next saturday at 10 30 6 a.m tune in again for another morning tea with cj uh create it i'm gonna stick to it next saturday you'll see me hello ko tech welcome to the stream uh hello domenico where it's almost dinner time in italy it's not even lunchtime here yet i don't know what i'll eat for lunch maybe some soup i got a bunch of soup um jimmy asked hello cj who is making evolving the javascript language so it's a committee so if you search for um here just let me just do this really quick i'm going to add this to the upcoming live streams and morning tea cool but if you search the web for tc 39 you'll learn about the technical committee 39 they're a group of people that basically decide what features will show up in ecmascript um a lot of companies are represented there so google facebook microsoft adobe any company that cares about javascript typically has some of their more like senior technical folks on this committee that are representatives of that company because certain companies might essentially want to like lobby for certain features to be in the language so it's a collection of all the javascript giants and influencers that ultimately decide what will will be in the next language anyone can make a proposal but it needs like a champion on the committee meaning someone on the committee needs to help see that proposal through to actually get added in but ultimately it's like a somewhat democratic process and i believe they have they have open meeting notes so you can see what they talk about in every meeting you can comment it on it on github but yeah it's basically a meeting of the minds ahmad is asking will the stream be saved on the channel yes it will at this very link that you're at right now the video will be up right afterwards hello andreas welcome to the stream uh jiraj is saying wakata.io am i gonna regret this you can finally understand how javascript is read by the computer interesting i'll take a look at that in a bit um what did oliver say connor what did i miss not much um all of the the links and stuff i think i clicked two links so far i'm just there's a lot of people in the chat we're just saying hello but i'm gonna upload this to github and you can see all the stuff that i found kotec is asking what college did i go to i went to louisiana tech university got a degree in computer science thanos is saying lodash does a great job in optional chaining let's take a look gets the value of the path object if it is resolved interesting so this is kind of like a work around because you're basically passing in a string of nested properties which i don't really like because like if the property name changes you have to update the string but that's this is essentially a way you could implement it like you could parse this string try to access each property but if it doesn't exist return undefined that's pretty cool kotek is asking any boot camp i would suggest not really i mean um if you have the time and the money really just like look at online reviews and stuff like that um i've heard of this one called is it thinkful they seemed pretty interesting it's it's online um and i don't know if this is the one there there are certain boot camps that will allow you to go for free and then you just have to pay for it after you actually get a job sometimes it's not worth it because the amount you're paying them is so much more than you would you would have just paid up front but i don't know do some online research ask your friends i don't really have any suggestions hello akin welcome to the stream all right i'm about to stop reading the chat but i mean we're catching we're here we're hanging out it's morning tea time normally i'm like trying to build something so like i can't really look at all of the chat melissa says hey cj i just found your channel enjoy your teaching style thank you very much hello andrew lewis welcome to the stream oh andreas uh just wanted to tell you i got my first web dev job at the end of last december it's not in small part due to your streams which kept me motivated to keep building stuff hell yeah can i say hell yeah this is a family stream i don't know but that's awesome andreas glad to hear it uh raphael been watching a lot of videos to learn angular and vue but still don't feel confident to start coding because there's still stuff i don't understand any advice um rafael my advice is to try and just do vanilla javascript like try and understand as much as you can the language itself because all these other things like angular and vue they're just using javascript under the hood so the better understanding you have of javascript the easier it's going to be to use those other things which essentially provide a lot of magic like they hide the details from you i actually did a video a while back where i i wrote my own little framework using vanilla javascript it might be fun to watch it also is pretty fast paced and i use some like newer features but if you scroll down in playlists and look at the noob streams javascript stream uh playlist this very first video vanilla jsnbc in about 20 minutes i implement a quasi-front-end framework to kind of show how things are working so that might be fun to check out cool andrea says i'm doing front end mainly react our stack is basically droop or wordpress on the back end and react on the front end very cool so i guess does drupal um have like a headless cms now like an api kind of thing kind of like wordpress did because i see that as like a new stack people are using where wordpress used to be like everything was php and you had to build your views in it but now they created an api where you can use basically whatever front end you want for it let's take a quick stretch uh snail is asking do you have any interest in doing lectures outside the u.s it would be fun um maybe if people paid for my travel fees i don't know i do have a day job right now so i could potentially work remote but connor i just got my first web web chat web job last week and i start on monday congrats uh take deep breaths um don't try to be anything you're not let people know when you don't know try to be self-sufficient and figure things out yourself but don't be afraid to ask for help you can do it um okay i'm gonna like leave my spot in the chat like right there and then i'll catch up in a second let's keep reading so we were looking at this article on um what's new in ecmascript we just learned about some updates to to the tostring function on the uh on the function prototype don't really know what it does that's okay object dot from entries a very handy handy way to convert a list of key value pairs into an object that is interesting um this would be a fun little like code challenge but basically you're given an array of arrays and you want to turn that into an object that looks like this now you can and it's built into the into the language so you pass that array into from entries and it creates that object that's pretty cool all right a well-formed json stringify by richard gibson actually i i really like i really like this from entries thing someone tweeted about it i think i'll tweet about it and you guys can like it because that'll be fun um but let's just do this okay it's a fun little code challenge right we want to we want to create this function called from entries let's let's do it right now okay so um if i were to run this code right now it would break because the the version because um this feature from entries is not in the language yet so like if i tried to run this code break from entries is not a function let's make it a function so i'm going to do something you should probably never do really you should do a check so like say like if object dot from entries does not exist then we're going to create it so we're going to say sorry object.prototype or is it no no it's not on the prototype it's just a function so then we'll create it so it's going to be a function really we could just use an arrow function i don't think it does any binding it takes in an array and ultimately it will return some object cool so how are we going to recreate this thing um let's just do it with like some simple for loops first and then we could like reduce it but basically we need a place to store the properties right we need some object that we're going to build up and then we'll need to iterate over the array and as we iterate we're going to have to look at both values in the sub array so we will set a property on the object with a key of um current array at zero so the key is going to be name and a value of current array at one so the value will be pavel and we just do that a bunch of times and by the end of it we have an object with all the properties so let's do it so a place to store the properties we'll just call this object we'll initialize it to just an empty object because it doesn't have anything then we'll iterate over the array and uh so this this loop is looping over each item so this is item one item two item three um and then each item itself is an array so let's call it current array you can literally you could call it um whoa whoa just a second you could call it anything you want but we're going to call it current array or we could call it like inner array let's do that because it's like an array inside of the array and then we want to set a property on the object with the key of inner array bracket 0. so we could say object at inner array zero equals inner array at one so basically we're creating a property on the object and setting it equal to that value now there are like a million and one different ways to do this um let's show you all the ways actually let's let's make sure that this works and then i'm going to show you other ways that we could do that and then after this we just return the object and uh we're done easy as pi let's run it boom we did it so we have implemented that function um but let's talk about other ways to do this so this is kind of like really weird syntax if you're new to javascript when you see this you're like what the heck is happening here there's brackets inside of brackets let's just store these things in um in variables right so we'll rewrite this code but we'll say property or let's call it key is going to be inner array at zero and we'll say value is going to be inner array at one and so now we have these these two variables key and value and we can just replace this we can say object at key equals value just like that so these four lines of code are basically doing the exact same thing as these two lines of code but it's a little bit more readable because this inner array we're talking about would be something like this 0 becomes the key and 1 becomes the value and then we're using dynamic property access to take the value of key and create a property on object and set it equal to the value so this should work in the same way great but there's more so this is like manually grabbing each property we could use destructuring which will just pluck those things out and we can uh pluck these things out of the inner array and we can give them instant variable names so we could do this we could say key comma value so destructuring works by if you're destructuring an array the left-hand side has brackets and then you basically say okay the array at index zero let's create a variable called key the array at index one let's create a variable called value and on the right hand side you set it equal to the array you want to pull it out of like that and then you can just say object at key equals value isn't that sweet so this is uh destructuring which is introduced in es2015 um and this will work in the same way and this is a little bit more readable if you understand how destructuring works it's pretty clean look at that um so that's fun the other thing is we could use a reduce so right now we're just looping over but basically what we need to do is we need to reduce this array into an object so let's show how that would be done um first let's just convert this to use a for each right it'll be very similar but i could say array.four each inner array and then this code goes there and all of this goes away and now um should be inner oh sorry this was that right no yeah that's right this should just be inner array so all that code goes away we're iterating over the array with each inner array we're grabbing off the key and the value and putting it on the object great but now what if we wanted to instead of doing a for each just reduce this thing to an object fun fun let's do it okay so i'm gonna comment out basically all of this code these are the two things that we need but all of this goes away but ultimately we want to return array.reduce uh reducer gives us first the accumulator in this case the object we're creating is our accumulator and then each value will be called an inner array and the second parameter to reduce is what should your accumulator start at and you'll notice before we started it out as an empty object so right here we'll start it as an empty object then inside of your reducer you modify the uh the thing so we'll say we'll do the same thing we'll set the property and the last thing you need to do is return your accumulator so that in the next iteration it has access to the object that it's been building up and now that's a nice little four line function that does the thing nice okay that was fun probably did that for way too long but it was a fun little challenge let's catch up on the chat because i have been talking for a while hello michael cop uh good morning good evening hello nicholas welcome to the stream um yusuf asks what's the chances of getting a remote job for a software engineer graduate um it's possible but the thing is being a new graduate being a junior developer it helps to be in person it helps to be able to just turn your chair around and ask someone for help and when you're working a remote job it's really easy to hide or not to not get help so it's definitely harder and you'd have to work really hard to make sure that you're um you're getting the help you need and you're reaching out to people but it's possible and especially if you work at a company that is remote first meaning they care about remote employees where every single meeting they make sure that they have a video chat um people are online all day sometimes they do video chat all day but it's just like muted so you know people are online if you can find a company like that it might be a good first choice but there are a lot of challenges of being a junior developer and when you're just working remotely sitting at home and you don't have anyone else around you it can be pretty tough um urzanas do i recommend udemy courses i haven't watched any myself so i can't recommend them recommend them yeah jt is giving a call back to the uh what did i do the 101 ways to deploy react i was using a jiffy api and i set the rating to pg-13 and then some risque gifs popped up i don't know jimmy's asking do you believe that you can be operational as a developer and only three months of a bootcamp i don't think so it depends like if you're just doing front end html css javascript work it's doable like you can learn the basics of that stuff and you can fix bugs on websites you could even work like on red wordpress and stuff like that like with only three months of training you know enough to build websites and potentially fix them now if you want to be like a full stack developer and like build back-end applications as well or work on mobile apps it's going to take a lot more than just three months of learning because there's so much to learn um but i think with with three months you have the ability to get just like a basic front-end dev job um potentially full stack if maybe you have some other background but it's iffy but it's doable if you really want to do more then go to some some of the longer programs and learn about the full stack and other things as well but yeah jonathan is asking it's been a while since you did a view app what do you think um i really like vue i've just been coding in react at my job for like the past three months um but i like you view is good cool oh oh we lost it did i go too far uh ishvan is saying great teacher i have it's 11 p.m in pakistan you should go to bed soon actually so like i've been staying up way too late i think last night i stayed up till two i actually stream myself playing games on twitch but i i recently set a calendar reminder for 11 pm every single day from now until the end of time go to bed just so just to remind myself that i should like stop playing games or stop watching tv and just go to sleep yeah oliver's saying the from entries is so desperately needed i always have to write a bad reduce for it um this isn't that bad yeah i mean um i'm trying to think like what kind of error checking you could do as well i don't know if you'd need to you'd probably want to make sure that key is not an empty string um i don't know and make sure that key actually is a string otherwise you do like two string or something like that cool uh venuma dove is asking what do you think the future of react.js will be i think it's it's looking bright um the stuff with um what are they called the use effects use state what are those things called use state hooks react hooks this makes it a lot easier to create like very simple components um so that's cool i think it's like way behind the kind of cool stuff that you can do with ujs but so many people are using react at least if they start making more readable and easier to understand apps that's a good thing rafael is asking what's morning tea about we're just hanging out i'm drinking tea you're drinking water tea coffee whatever it is we're browsing the web we're answering questions it's a good time if you missed it i'm drinking yerba mate revel berry if any uh gayaki reps are out there please sponsor me let's take a quick stretch um cotech says i really like your videos building new things using new technologies so do you look forward for making programming tutorial on particular language or framework videos like other youtube channels um potentially i think when i first started this youtube channel um i i didn't have a job so i could kind of just code all the time and i had time to prepare new things now i have a day job so i'm pretty much writing react on the front end node my sequel on the back end um so i don't really have as much time to look into new things but i'd like to like in the past i've talked about learning rust talked about potentially doing like python streams i did c sharp for like three years in a past life so it'd be fun to do stuff on other things as well but right now i'm like super deep in the javascript ecosystem hello kim welcome to the stream matteo happy birthday and happy super bowl um who here is gonna watch the super bowl if you're gonna watch the super bowl put a super bowl emoji in the chat if you're going to have a life put a tractor emoji in the chat uh yeah julian saying this is a classic reduced one-liner let's make it a one-liner okay so we have this function right let's put it into one line so um let's come with this up to make it a one-liner we need to return the object all on one line so basically and we can't really create these variables well actually ah even cooler we can destructure in the function parameter so we could take this destructuring and put it right there that way we don't need to do that that's great now how do we turn this into a one-liner we can use the the comma operator so if we wrap this in parentheses and then do comma obj what this does is it evaluates this and then returns the thing after the comma so now that we have this we can just turn it into a nice little one line function boom let's try it it works cool that's a nice little like tweetable function cool yeah connor is saying i'm considering taking a mechanical keyboard to my new job because i can't stand my mushy five dollar keyboards if you're new wait because uh these things are loud and especially like if you're in an open office environment or in cubicles people can get really annoyed by the sound of a mechanical keyboard so look into like more silent switches i think like the mx reds are pretty silent um they're not totally silent but they're a lot quieter than this just be just be wary of your co-working neighbors yeah oliver where's the one liner at there we go uh that's basically what i did but with shorter variable names awesome leona's asking are you self-taught or did you go to school so i went to school for computer science which is very theory heavy like i learned about data structures i learned about programming languages and compilers and operating systems i learned about like really low level stuff but ultimately like the first job i got i was building desktop applications on windows i am self-taught and that i taught myself web development um because i learned like computing concepts in school but not really web development so i taught myself javascript and jquery a little bit of php i taught myself node um but i do have a formal schooling in computer science is asking can you make a video about your ide and text editor um yes i i want to make a shorter one because i did do one if you search my channel for um setting up a mac search search for like coding garden setup mac yeah this one so this video is like an hour and a half long but you can check out the links i show all of the vs code extensions i use i show all the apps that i installed so you can check that out but i would like to do like a shorter maybe 30 minutes or less video where i just talk about my process i also want to do one on specifically the rules that i prefer in eslint i inherited a project at work recently and it really made me realize what things what what rules i prefer when writing javascript so that would be fun to do as well hello anand finally found me live this is really just turning into like a q a hangout but that's fine uh hello rabbitworks welcome to the stream oh just stopping by that's cool though uh orland orlando is asking what keyboard am i using um this is like a 30 mechanical keyboard i found on amazon really just to try mechanical keyboards and it works for me and i have not become like a mechanical keyboard head where i'm like customizing my keys and stuff like that yet but i really like it um i don't even know what brand this is it's like some cheap brand cost like 30 bucks but it has decent switches they're swappable if you just search for rgb mechanical keyboard on amazon actually let me do this i'm going to hide my screen real quick i'm going to create an affiliate link and if anyone wants to buy a mechanical keyboard please click this link um rgb mechanical keyboard main thing is i created an amazon affiliate account and then i have not um i think maybe two people have clicked my links and they're going to shut down my account if no one clicks a link so if you want to support me you can click this link yeah that's the one cool uh there's that link um this is the keyboard i use i paid i paid 35 for it it's on amazon prime the keys are swappable it's got good reviews like it's potentially a good entry level keyboard if you just want to see like do you even want to use a mechanical keyboard keys are swappable it comes with a nice little key puller tool a detachable usb cord which is nice but if you click that link in the chat you can potentially support me by ordering that off of amazon shameless plug shameless i'm selling out i'm basically selling out that should be the title of the stream cj sells out uh vyas is asking one quick question what's your opinion about webassembly i know what i have to know i know that i have to know c plus and rest for it is it worth learning so potentially you don't necessarily learn webassembly you use some native language like c plus or rust or i think even go and you write your app but you run it through a compiler that turns it into webassembly so you potentially get like near native performance in the browser having written it in some other native language but no one is really going to be writing webassembly by hand it's just a feature that's now available in browsers that you might use a tool to convert your code to run in webassembly um is it worth using if you have like performance intensive applications like data visualizations games number crunching you might want to use something like webassembly michael is saying i'm a full stack dev and truthfully i only feel comfortable saying that for the last two of my seven active years yeah a lot of people throw around the term full stack developer um i i say i'm a full stack developer and i i feel like i can back it up but like can you really debug the full stack can you be dropped anywhere in the stack and be able to fix an application or create an application a lot of people maybe not maybe you know a little bit of front-end a little bit of back-end do you know anything about servers or deploying or continuous integration um do you know anything about security it it takes a lot to really call yourself a full stackdev hello quran from india welcome to stream all right let's see the emojis after we look at the emojis i'll keep looking um how long have i been streaming almost an hour you know what maybe we should just call this cj catches up with the community and answers questions live stream every saturday at 10 36 a.m mountain time um because this is fun i love answering questions uh alex is saying how did you get into coding um i was always really good at fixing computers i built my own computer when i was 13. i was the webmaster in high school i worked at the computer fixing help desk in college i always loved computers and then because i fixed them and knew how they mostly worked at from like a superficial level i wanted to create the applications that were running on them so that was my my goal so i got a computer science degree learned about all that and started building apps uh but ultimately i love the technology and always have um tractor but i will watch the halftime wrestling is there gonna be a wrestling match at halftime because that would be great super burrito bowl oh yeah i got a i think i got a message from chipotle uh because of the super bowl you can get a burrito bowl but you get free guacamole free extra protein free whatever else normally costs money uh yeah so go to chipotle on the super bowl day um let me catch up uh josh is saying can you make a multi-student quiz app that'd be fun um actually we uh myself and mr chad also known as cheddar did a pairing live stream with feather.js a while back we actually didn't get too far and i don't think we really finished the app but if you take a look at this build a real-time question answer app with feathers.js we kind of create the basis for it but i don't think we ever finish it but the idea is you can create classrooms classrooms can have quizzes and in real time students can answer them and teachers can see the answers coming in so if you check out that stream i think we did two parts like i said it's mostly like set up and learning about feathers um but yeah you can check that out hello yes sir welcome to the stream uh kotec is asking any updates on the coding garden community app um if you're not um aware of what happened or what is happening um you can check out uh two live streams ago coding garden community at planning meetings so myself and some of the core contributors actually did a live stream they were on video chat where we just talked about and planned the community app that we're building if you want to know more about it you can go to github.com coding garden community and if you take a look at the wiki you can see if you go to the wiki what it's all about and basically we're building a mobile app that has coding garden info in it but we're going to build it together as a community so anyone can contribute anyone can add ideas and really right now we're just in the planning phases and we have like the initial versions of the app it's going to be a react native mobile app deployed to the app stores and we're going to have an express back in so if you're interested in it check that out we also have a discord all that good stuff we ask that you really only join the discord if you plan to actively contribute um but yeah it's a thing so yeah any chances of making videos on python potentially maybe not anytime soon but i actually did python years ago at my last job um thanos says i would suggest solving one of the greatest mysteries redux react api edit an entry of something in 2019 like an edit page with a react app is that what you're asking uh yes sir is saying i tuned in yesterday and watched the newbie tuesday message board stream yeah so if you check out the channel and scroll down to um i think we have a new streams section yeah new streams if you look at uh i think it was on newbie tuesdays build a full stack message board so myself and tony who's a complete and total code noob we pair and we build a simple messaging board app that has a front end and a back-end and you can really learn a lot about how it all connects together cool hello tucky dean tuckadee hello sadcarsom um will you teach us the spring boot framework and use it with ujs that would be interesting as well um i've had like a little bit of experience with spring boot helping students and helping co-workers just like figure it out but um you can create json apis with spring boot that would be fun i don't know can you use the node domino's pizza api to order pizza that actually reminds me um if you've seen the youtuber um jarvis johnson i think his name is pizza i wrote a program to order pizza so he did this video but he actually used python to do it and just kind of just to show how programming works um so that would be fun uh youssef says i appreciate your efforts wish you the best thank you so much uh quran is saying any good sight to learn vgs to step the docs the docs are awesome but check out uh view mastery let's take a quick stretch really this has just turned into a q a but i'm okay with it i mean it's fun to talk to everyone um let me know in the chat how do you feel about this format of the live stream yeah so view mastery is cool i think they have some uh free videos my privacy blocker is blocking it um if you look at their courses intro to view 11 lessons they're all free to watch and they're really good they have really great animations um i believe one of these is actually taught by evan yu the creator of uh view himself yeah advanced components him and greg pollock are teaching him that one so check that one out oh no i closed the chat that's not good they're all freaked out um yeah anand is asking to cover test weights like just mocha jasmine i i probably will do a a video on testing with react uh just an enzyme and potentially also redux sagas because i've done a lot of that recently at work you talk about some of the things that i've learned extreme extreme pulsing 24-hour livestream i don't know if i could do that for one i'd have to be sitting down i could not stand up the whole time um and parts of the stream i'd probably just have music playing and me coding and not talking because this this gets a little exhausting just constantly talking uh fred is asking can you do a live about web app security um it would be fun to do a live stream i have done um i did a talk uh a year probably two years ago at this point um search security best practices with no js cj this is the one yeah so i streamed this uh from a live meetup february of 2017. we are now in february of 2019 2017 two years ago i did this two years ago but um it's a fun talk i have a github repo with all the stuffs and i show uh basic security concepts and demonstrate how to exploit them and how to fix them with node.js so you can check that out it would be fun to do that live though um to like deploy an app and see who could hack it and then like try to fix it that would be fun oliver koa is greater than express um it seems really cool uh i i tried it and it just seems like it requires a lot more setup than just express like you have to add a lot more middlewares and plug-ins to get things working in a similar way which might not it's not necessarily a bad thing but it's just what i found i have heard about flutter it's basically a way of writing native apps i have not tried it s harp is asking what's my country i am in uh denver colorado in the usa it's currently 11 49 a.m so it's it's about to be like lunch time apparently you are 12 hours ahead of me what do i think of react native i like it um i think if you're doing more like seriously native things like maps or potentially camera or various things that require native features it could get a little iffy when you're trying to do a cross-platform but overall it's pretty cool bob's paradox is asking when will tony not be a noob uh i don't know never like uh he ha he's he's still he's he's not actively working as a developer yet he still works as a surgeon's assistant doing like coding on the side every now and then i think once he gets a job doing it he'll no longer be a noob because he'll just be doing it every day anyone hear that music person driving by is playing it way too loud uh leon is asking do you always stand when you code even at work i do i have um it's not a technically a standing desk it doesn't adjust but i have a desk set up at work where i'm i can stand and i have like a bar chair that i can pull up if i ever want to sit down but i stand for most of the time more links i guess i should i should be putting these in the in the readme as well okay ellie is asking seriously what do you like better react review i like vue better it's it's easier to understand it's easier to get started it requires less code i like vue.js react somehow not somehow in the historical context react came along and it was great and it was a great way to build apps but i like that in vjs you can mutate state like mutating state is not a bad thing even if you're using vue x you still mutate state but because of the way they're doing things they can keep track of state mutations whereas in react everything has to be pure and you're not supposed to mutate state i actually like that makes things easier to understand um yeah cool um i guess no one really commented on it but how do you all who are watching feel about the format of how this show has gone so far um it's just a lot of question and answering i think i've clicked like two links at this point um and i've been streaming for a little over an hour now um let's let's click two more links try to implement something and then i'll end the stream all right let's move on from our slash javascript i don't think i'm going to do learn programming or learn javascript because that would take a while to answer questions let's look at our slash programming and look at some news um ascii generator written in python let's check it out so you give it a video and it gives you back an ascii version of the video that's pretty cool can we look at the github repo let's look at the github repo video to video by running the script video to video dot pi with different values for background we'll have the following outputs input video image to text interesting requires python 3.6 cv2 pill and numpy this would be fun to just run locally on like an image of me or something like that it might take a while to get set up because i'd have to have all those dependencies maybe i could do it in a docker container i don't know let's hold on to that that's fun like i wouldn't write it myself i would just use the library that he wrote and try to get it working but that's cool uh netflix engineers share the technical challenges that the ui and playback teams face making the black mirror banner snatch internet interactive film so i don't think i was streaming during this time but i was absolutely obsessed with uh black mirror vandersnatch if you look at my reddit history um i was posting in the the bandersnatch and black mirror reddits uh i was like detecting uh watching the network traffic and trying to figure out how they were choosing the different scenes if you haven't heard about it check it out but they actually talk about wow it's an hour long uh technical talk that is awesome i'm definitely going to watch this so basically they're just talking about how they did it um so if you're not familiar black mirror uh is a show it's a show it's a tv show but um they came out with a special episode called bandersnatch where when you watch it on netflix as you watch the show there are certain decision points and as a viewer the decision possible wrap paths for that decision will pop up and you get to click on a decision and it'll play a totally different movie so it's a choose your own adventure tv show um but what's cool about it is there are millions and billions of different paths because as you go down a path if you ever go back in time the character is like aware of what happened so it's actually like playing a different set sequence of the same things happening it's amazing um i'm definitely gonna watch this later let's check that out cool um all right let's let's let's try to let's try to get this ascii generator working i feel like it's going to take me like an hour because it's in python and there are certain dependencies um but i think i want to get this working and like convert an image of myself into ascii art or like take the coding garden logo and turn it into ascii art that would be fun let's see is ux the best state management it's the best state management for vue and you can actually use it with other things i really like it opinion on syntax youtube channel i don't think i've heard of it or seen it before let's check it out yes 600 000 subscribers he's definitely doing something right um i've never seen his channel but i'm sure it's sure it's fun does he do live streams as well don't know a random question why doesn't emmet work in jsx i think you can get it working it just requires some configuration this is amazing it could be a cool stream to integrate that into a view or react web app so are you talking about this ascii thing where potentially you have an app where you can upload it maybe it calls a python backend and then shows you the result that'd be cool i have not done any tutorials on docker but i definitely want to and i have a friend who works as a devops engineer and i'm thinking i'm gonna get her on here to do a pairing episode so that would be pretty fun to learn about docker and containers and kubernetes and stuff like that so try to make a text adventure in it a game like twine that would be fun too uh leon have a good day cj hockey is on enjoy that hockey see you later uh see you josh thanks for tuning in okay here we go i am going to attempt to get this thing working this uh ascii generator all right minimize the chat for now um doesn't have any issues or pull requests if we look at the requirements it just says this okay let's just clone this thing down and see if we can get it running i think i have i might have python36 on my machine if i don't i'm going to have to install it um okay so i'm just going to clone it into this directory i think the ultimate goal is to take the coding garden logo like this and turn it into ascii art using this python thingy that's taking a very long time to download wow why is it so big because we have data oh they have like a example mp4 in there yeah that's why this repo is so big cool all right it cloned if we open up vs code we can see what we got um the readme tells us we need python 3.6 let's see if i have python 3 i do have python 3 3.7 so i think we're good there uh cv2 i'm curious if that's like a native dependency um which one of these do we want do we want image to image image to text video to video let's see given an input image you could generate ascii art stored under the text format even an input image you can generate ascii art started and stored under an image format okay so i think um basically this this converts an image into text this converts it to text but saves that text as an image so let's just do it image to text first so i think this is the one that we want to use it's importing cv2 and importing numpy so i think we can just pip install those so if i do pip install cv2 um go into that directory so pip is i think the the python package manager or something like that you're using pip version 10 however version 19 is available you should consider upgrading pip let's do that let's take a quick stretch okay let's upgrade pip also it couldn't find cv2 so we'll have to figure out how to get that but let's do um python 3cv2 how to import cv2 in python 3 how to install opencv 2 for python in windows i think i might have to actually um ah so it's called opencv python and i have to use pip 3 specifically because we're we're using python 3. um your screenshot shows doing a pip install also the package i believe you want is opencv python yeah we're going to try this pip 3 install thing i might have to update pip 3. okay so that just installed numpy and opencv python that's great um are we gonna just be able to run this thing so um they don't exactly have a readme or a like a description of usage maybe they print it out um my guess is we just run the python command from the terminal and give it some parameters so um not now so input the image we want to use output yeah so we could just try to run it with default let's do it dot slash image to text we're going to do python3 image to text.pi apparently it worked so it it took input.jpg and gave us input.txt wow it worked okay so here's what we do we're going to grab the coding garden logo and convert it um let's let me hide my screen for just a second let's save this locally uh morning tea today [Music] okay so i saved it um now in the directory we have this coding garden image oh i wonder if it supports png i hope it does but if not maybe i'll have to convert it or something so i want to convert this to ascii art text so i think i can run it and do dash dash input so we'll do this dash input um should i add a space i think a lot of space and then output will be cg.text anything else let's go no way whoa it worked okay here's what we do um can we open that and then like go way down hey look at that it's not that great but it kind of worked sweet uh just for kicks let's put it on the internet um i'm going to make a a directory just like deploy this as a static app let's call it um uh cg text logo or do ascii logo um we're gonna create an index.html and in that we'll just paste this in in like a code block that's really small coding garden ascii okay so in html you can use what's called a pre-block and a pre-block maintains all of the formatting so it maintains the the spacing and everything and it use uses a mono space font meaning every character takes up the same amount of space because that's what you need if you want this to um to do do the thing so let's save this and then just run it and see what we get in the browser nice it's kind of messed up i think if we if we zoom out does it do it no it's a little messed up i think because it's saved yeah it saved the the tabbing we don't want to save the yeah we want it to be all the way to the left what is it doing there are also other options for outputting it like if we look in here number of colors oh no number of columns for the outputs with it defaults to 150 columns um and it's using complex mode let's see if we if we do simple mode if it looks any any different okay look at the simple one oh it's honestly a little bit more legible let's try to use this one right because i don't want any spacing before or after i want it to be all original spacing just like that oh okay that's it that's good that's what we want um all right let's give it just some basic styles style style style let's say body has no margin let's say let's make it a flexbox so this thing is centered so we'll do display flex justify content center align items center width 100 view width height 100 view height uh background will be black and uh color will be lime let's see what we get nice um we can also let's make the font size relative to the view width so it actually resizes so let's say font size is i don't know one v width let's see what that gives us okay but now as we resize it resizes with it which is cool let's go a little bit smaller so that the whole thing is visible yeah and so now as we resize it resizes with the window so that's great i like it it's actually pretty weird i don't know if it looks as weird on the on the on there i don't know okay let's deploy it um here yeah i'm just going to use the old version of now because it does like a static deploy sweet we're on the internet all right uh let me catch up on chat and then i think i'll end the stream there i'll push up all these these links and everything cool uh oliver saying implement the image ascii algorithm in rust compile to webassembly and then deploy it as web app that would be fun actually so basically um take what they wrote in python but write it in some native language like rust or c plus or something like that basically take this code rewrite it in a native language compile that to webassembly so that it just works inside of the browser and then you have it working in a web app that would be fun uh people are telling me to use a virtual environment like yeah i don't use python on a daily basis so basically what happened was uh when i did the pip 3 install this installed it on my entire computer and you may not want that because in certain python projects you might want to use different versions of the same package so what you can do is create a virtual environment like in this directory where that package is only installed here and not on my whole system very similar to the node modules directory in npm um yeah so mayor saying do pip three eventually i figured that out um chop away is asking basically what is my break timer um i use um timeout by dejal it this one is only for mac um you can check out uh i leo for windows and there are other things for for linux but i have it set up so every 15 minutes it tells me to take a 10 second break and every hour it takes me it tells me to take a five minute break but uh keeps keeps me uh moving prevents repetitive strain injuries all that good stuff yeah so it worked yeah um oliver's saying i should use v min rather than vw for the text lines what is v min i've never heard of that i don't think 1 100 of the minimum value of the height and width of the viewport oh height and width instead of just width i like that okay let's let's try to use that so in here let's say v min instead yeah but now regardless of the height or width it resizes i like that a lot okay let's go a little bit bigger though 1.3 too big one point two two two big one point one yeah okay so now now you'll notice it doesn't doesn't scroll it always it always always always is in the viewport except when it's just a little bit too small yeah that's great thanks for the suggestion oliver let's deploy it again i don't know if it it might have cached no it got it it got the latest version sweet i like that hello edgar welcome to the stream uh makabra is saying thanks for the cool teaching i have questions how to solve or call the api and using fetch but there is issue with cores and core but i've never heard of core it isn't misspelling but um typically if you're in control of the server you can add uh your cores headers if you're using express there's a package that called cores that will just do it for you but ultimately there's a header that needs to be set called access control allow origin let's see if it's in here maybe it has dashes yeah so basically your server needs to set this header and if it does star that means anyone can make the request but if you know exactly what client origin is making the request you add this header with the client origin um if you're using express there's a package called cores that just does it for you anything else basically look up how to set headers in that back-end language so this is the one you want um and that's in if you're in control of the server if you're not in control of the server then you'll probably potentially have to create a proxy so basically you'll create your own backend server that makes the request to the other server and then forwards that response back to your front end and on the server that you create you add course um i think i've had i've done some videos just basic videos where i create uh basically a proxy server let's search for a coding garden proxy yeah so a youtube api proxy server um because basically the youtube api you can't call directly from the front end because there are no course headers so i make a very simple node app that calls the youtube api and then sends back the response and then my front end api talks to my my proxy so you can check this out it'll be probably a similar idea for what you're trying to do cool yeah ed used to tune in all the time for morning tea back in the day um i used to do it like twice a week and then i stopped doing it quick stretch okay i think i'm gonna call it there i have been streaming for an hour and a half which is which is a decent amount of time i appreciate everyone tuning in thanks for all the questions thanks for all the kind comments um i will throw it out there i started a twitch channel gaming garden with cj um and every now and then i will stream uh games on here i streamed myself playing uh rocket league and paladins last night i'll warn you i'm not any good at games but it would be fun to like get some parties together and like play play various games on the interwebs cool all right uh i am going to end it there all of the code that i wrote i'll push up to github you i'll also push up all these links and that's it thanks for tuning in everyone wherever you are in the world have a wonderful morning afternoon evening or night we'll see you next time here's this [Music] you

Channel: Coding Garden

Views: 1,720

Rating: 5 out of 5

Keywords: programming, full stack javascript, live coding, debug, css, javascript, frameworks, vscode, learn javascript, mechanical keyboard, coding, educational, learn web development, learning, full stack web development, html, learn node.js, backend, learn to code, debugging, web development, beginner, frontend, node.js, live streaming, full stack, how to code, lesson

Id: umFBMD2s9uA

Length: 96min 23sec (5783 seconds)

Published: Sat Feb 02 2019