Live Stream #137.2: Promises in JavaScript - Part 2

[Music] good morning again it's a second coding trained livestream of this week so I'm really gonna try to just jump right into things as opposed to what I did yesterday which will spend about 45 minutes talking arbitrarily about all sorts of random topics like schedule and that sort of thing I do have to say something important here which is that as many of you might are interested in I know I don't know whether there's many of you are just the loudest voices of you are interested in more tutorials on machine learning in particular in the browser with tensorflow yes I'm getting tonight and I'd hoped that that would be the primary topic of today but yesterday I started doing some tutorials on promises and I want to finish that sequence first because it will lay the foundation for certain things that I will need when making some examples with tensorflow das for example in particular the async keyword and the await keyword now something very strange has been going on in here in the studio and which I can't really explain because I I don't this room gets used by other people and of course other people should use this room and I try to as much time as I might have looking for my marker help other people make use of this room but usually I hear about it and also it's the summer so I didn't really think but there's a marker down here is this it strangely the whiteboard was a race actually had some other writing on and I erased it before I started live-streaming I'm just gonna check to make sure everything looks and sounds ok ding - - nobody seems to be complaining so yep alright so um I don't know who was in here yesterday if you're if you are watching this and you were in here yesterday please so let me make a list of what I want to cover today so yesterday I just did the basic you know what is a promise and I looked at it in the context of fetch fetch so using the fetch function to retrieve data from URL and resolving the promise when the data comes in that might not have been the best way to explain that but so be it so and then I went off off and off and off and off trying to explain promise dot all and so many things I got wrong but one is I just kept saying promises all and its promise not all number two is I got into this thing when I was like I have an array of promises and then I need to get a new array of promises from that array of promises and there was a whole extra sequence and then I used a loop and I tried to use the map function it was kind of a mess it was good it was really good for me I learned a lot and I also learned what people think about that the way that I code just often that's terrible why are you doing it that way and then there's some people who have some other feedback like yeah you know maybe it's not the best but it kind of explains it it works so anyway I'm gonna take a mulligan on that but I'm thought about this and I actually did some coding this morning before I came in here so what I'm gonna do next I'm gonna get to promise that all but next I'm going to look at how to make your own promise I promise you how to I wish I had I have my keyboard over here if I had really thought better of it I would have I would have come in with some promise related music maybe later how to make your own progress I think the joke I made yesterday is this still am I still on the board was that if I title a YouTube video or how to keep your promises maybe like people who are looking for self-help videos will come inside what is a promise fetch how to make you promise okay that's a weird thing that I wrote how to make your promise I don't know how I feel about that but I'll leave it there it's a little bit weird but fine then I want to look at a sink and a weight and this is really what's often referred to as syntax sugar so there will be no new concepts but there will be a less verbose way of a function that returns a promise using a sink and a weight and then the last piece of this I think will be promise dot all so this is my new plan if I can get through all of this today I'll be amazed if I could get through all this today and start to talk about yes the more that will be a miracle but have no fear whatever I don't get to I will get to next time I am here every week throughout the summer I did say yesterday that I was gonna do twice a week live streams and that's sort of true but then I started looking at the calendar and there's a lot going on and also um this here I said I was gonna get started writing the material now I'm just rambling but one thing I want to say is that I I think and I'm sorry for using my YouTube channel as a personal therapy session so but I'm realizing that there are some things I really want to accomplish this summer two of the these are the things I really want to I really want to have a second edition of this book out and a version of it within JavaScript so right now this book the nature of code is written with in Java using the processing programming environment I want to I have many updates that I've actually made to it but I just never gotten them onto the website and into the print version of the book so I want to make that happen I want to add a new chapter which is about neural evolution and then I want to once that's done have a JavaScript version in the book and if I'm live-streaming all the time I'll never have any time to work on this so number one is wants to help me with this you know on the one hand I just kind of need to go off and work on it but if you have some clever ideas or want to look through my various github repositories and help I'm open I'm open to that and then I think that I need to at some points limit myself as much to focus make sure I work so keep me honest here so this is the number one and the other thing is and let's see if I can get there now the new URL I haven't gotten HTTPS working yet so we need to get HTTPS working for this domain but ml v jf which is a a friendly machine learning library written in JavaScript built on top of tension float is um this is a project that I would like to spend a lot of time working on the good news about this is this has a whole group of people who are developing it and it's an open source project and you can see some of them here people who are contributing to this project so this is even if I broke my other elbow and stopped working this suffers this would still happen but the nature of codebook is something I really need to focus on a live stream working on it problem solved huh I don't know what that refers to all right looking at the chat it's spring yes it is oh you know the other thing I really should do is I really want to update my workflow this summer so I want to want to start playing around with using Visual Studio code I might use Adam here and there still I want to use I term it's a different terminal and I want to start to also also I'm gonna go back and start to do some very beginner videos again because it's been quite a while since I did my beginner learn to program from scratch videos and those needs some refreshing interfere interference something and why heat rights will you make some project Euler problems is it's pronounced Euler right it's very interesting thing check it out I am familiar with project Euler I would have fun doing that so that's not a bad idea Oh problem solved working on the book I mean oh livestream working on the book I get it me I am so Mia is making a good point that I could just live stream my work sessions it's not the worst idea definitely would consider that all right the stream title says async instead of async let me fix that let me fix that thank you for pointing that out where do I find that info and settings a wha a s why thank you whoops asy NZ okay thanks for all the nice cuff him I'm not really a vin per I wish I I wish I was like a vim person but you know me I'm not a vain person like mmm I didn't grow up programming and and so I never found my way to those kind of old-school tools okay alright so thanks everyone saying hi in the chat appreciate all those messages I think I think I'm just gonna get started so um it's gonna be how to make your promise alright let's come I didn't buy new microphones and buy a new microphone I still haven't found the old microphone I think this one might be a little bit better though I know you tell me ok so let me close a bunch of stuff and promise you what is that song and if I do my like terrible singing I don't think I get a copyright violation mostly because I think it's only if it's like exactly the original track but also because I'm terribly out of tune it's an advantage to being out of tune let me move to the side desktop I want to be working on promises I'm gonna move this away let's pretend we never did this let's go to desktop promises let's put this away in the past it's in the past we're moving on to the future and we're gonna say oh - promises make your own and I'm going to do this make your own quadrennial and then I'm going to I must have Adam about this open somewhere and check the slack channel mike is way better okay that's good to hear so maybe I'll just keep using this mic old mic is better okay well I could do a straw poll for that I'm not going to alright let's go here alright we don't need any of this stuff one thing is here's actually I shouldn't talk about this yet I have a maybe possibly almost tentative plan to also live stream from home that's a terrible idea I think but stay tuned I need to buy a new computer to do that though that's the issue and that is expensive but I'm waiting until WWDC is that what it's called and maybe they'll announce all the new stuff there so then I could just be like on Saturday morning at 9 a.m. we work on nature of God but of course it's complicated anyway all right so let's do this I'm gonna keep the p5 library base almost like as a security blanket I'm gonna just do something I just want to have this video start so I just want to have an example some example code ready to go and say hello is not defined oops I should say say hello all right um alright here we go oh this is really not good today that's a little better yeah cuz I can't really see it by the way if people have equipment suggest the good if people have equipment suggestions for things that I should get to improve this livestream I'm definitely a all ears and the nose and a mouth but I'd be happy for suggestions all right let me cycle the cameras so that we'll all right you know I'm also having this like lower back pain on this side that's not gonna mess up my lives here I don't think it's from I think it's probably from sitting thing is like I don't actually sit and work very much because the I just I'm either like standing and talking or I'm like running around like talking to people or doing stuff I don't actually sit and work at the VA but yesterday and the day before I was kind of doing that for hours at the time and I think maybe I need to get up get a sin Heiser lavell ear mic I think that's what my other thing was but I will check so I'm gonna answer one more question that I'm going to move on couche in the chat asks can we have a discord where we can discuss our problem the coding train so let me just quickly say a few words about community I while I'm here so there everyone watching the channel is welcome to self-organize and create their own forums or dis cords or reddit threads or whatever to talk about coding and and you're welcome to do that I am currently keeping a I have an official coding training slack channel but the best way I found to manage that right now is through a membership to patreon or sponsorship on the YouTube channel so I don't want it I've gone I've talked about it in several different videos already you find it but that's basically that's the one official then of course there are the official coding train github repositories and I do want to mention it I really am remiss in not having done this sooner but I just want to mention this III maybe I'll come back to this one it's more finalized but I also now have a code of conduct repo so this code of conduct applies to interactions in the YouTube chat YouTube comments slack channel github participation in the coding train community so if also what this isn't really is in the present is a copy of the p5.js code of conduct and so if anyone has experience with online communities and codes of conduct and wants to contribute and help make this better and help me do better managing the community I am again all ears and no you know I I need to get new lenses because even though I'm eyes I my lens is all scratched up right there and I can't actually see and I have tickets to go see solo this weekend and I if I don't have good glasses I'm not gonna enjoy the movie I don't know how this is gonna happen huh okay I got to get started so that's what I have to say all right hey we've got a new sponsor or Moebius thank you once again if you once again if you choose to sponsor this youtube channel on youtube you will get a big green thing in the chat that's this new sponsor and I will say huh new sponsor and then some - appears next to your name why not subscribe today you will get a piece of graphics that appears next to your game why you would want that I don't know but hey it's possible for you alright thanks everybody that was my sponsored by the sponsors of the sponsored coding train sponsors all right let's move on Anabelle by the way the in it's also a thing this is one thing I really like to explore I know twitch has a lot of us but I think there are ways that I could hook stuff up into the chat to like various devices and things here and I have to go would be fun but I also could do tutorials about you know getting a light to turn on or something so if anybody has experiences with that in particular with YouTube streaming let me know ok hello welcome to a second video on promises now what I think if you watch the previous video I talked about the idea of a promise how to use a promise with this function called fetch which retrieves data from URL and a variety of other things and I looked at how you how you when the promise finishes how you use then to execute code and how you use catch if there's an error and you can chain promises if there's a bunch of things happening in sequence that's what I tried to look at so far in the previous video now I'm actually gonna take a step back here and in a way do something much simpler and probably less important but maybe will give some good background foundational knowledge so I'm going to talk about how to make your own promise and just in case maybe you're here for like how to keep your own how to keep your bra to keep your own profits and if you're here for like a self-help video unfortunately somewhat this is but maybe you want to learn about coding you might want to go to the beginner ones though it but maybe this could be the first video watching anyway how to make your own promise so let's come with me over here and so this is more relevant probably if you are the developer of a JavaScript library and you want to support promises in your library most of the stuff that I'm going to do will involve making use of other libraries that give me promises and I take those promises and hope that are kept and also I'm actually eventually gonna get to this like new I think these are a part of yes I think it's a 2793 and 402 it's not even a number that's anyway I think it's actually just es 7 I was trying to make a joke there um but I'm actually gonna use a sink and a weight await the key words to write an asynchronous function that returns a promise but I'm stepping through this stuff one step at a time so come back over here with me and so I've got a little p5 Sketch there's nothing about this that you need p5 for but it's my comfort object you know when you're small and you have your little lovey that you sleep with B 5 was like a little lovey that I code with and so what does this do this in setup I don't make a canvas I call set time out if you don't know what set time out is I've whole video about that um which executes a callback to say hello function 1000 milliseconds later and that makes a paragraph hello so let me go to the browser and you can see 1 second later boom hello and if I made this 5,000 or 6,000 you know 6 seconds later that hello is gonna pop up so this is the old the old way of doing it in JavaScript we have a function that's asynchronous that we pass a callback so what if I wanted to create a version of set timeout that returned a promise instead so I'm gonna write my own and again this is really I don't know that this is something you need to do in a program but this is gonna give us some background so I'm gonna write a function and I'm gonna this by the way is not my original idea sure you can find lots of tutorials that show this exact same scenario I probably read a few of them so I'm gonna write a function called delay I could also call it like set timeout promise just to be explicit about what I'm doing but I'm just gonna give it a different name called delay and what I want to do is I want that function to take an amount of time so that function is going to so really what I'm doing here is like just this to start set timeout so at first I've just like basically I mean this is completely insane what I've done but I've written my own function delay to just call set timeout and if I give that you know 1000 there we go but what I want to do is I want to do this I want to say delay 1000 dot then and I'm gonna use the arrow syntax here create P hello so again if the arrow syntax in is not familiar to you a new part of es6 javascript I have a video on that and then I'm gonna say catch console dot log error so I won't and I'm missing some stuff here this doesn't need semicolon there we go so this is what I want to do I want to write I want to write my code like this I want the delay function to delay for one second return a promise when it's done create that paragraph and if there was an error somehow console.log the error and yesterday someone was saying to me I should say console dot error or I could put the error in the in the Dom as well so okay so this is what I want to do now this won't work right now because it's gonna say cannot read property then of undefined because there's nothing there's no promise that's been returned so what I need is my delay function has to return a promise do I have to say new promise yes eight hold on timeout I shouldn't look at the chat in the middle of these tutorials oh and you can't even see this I went off the but is this is this is async away part of es eight or es seven uh who cares yes new promise catch console I know I don't need the error function for catch up I thought Gannon writes catch console player I thought that's a little gonna be a little bit confusing for beginners but okay let me come back oh it's yes 2017 which is es8 yes oh oh I'm gonna get flooded in the comments for that crap crud I mean I don't you know how I was using the giffy API and I like set the PG rating can I set the PG rating for myself all right yes the wrong camera I know I know I'm 20 seconds ahead of you in the future all right all right so I forgot I need to return a new promise so this is sort of I'm kind of getting closer let's just see what happens now well promise resolver is undefined so if I want to make my own promise how to make your own promise in addition to just promising something I have to provide pathways for resolution of that promise or rejection of that promise so when I create the new promise I have to say what happens when it's resolved what happens when it's rejected so first of all something that I could actually do here just for fun actually lo hmm I'm thinking here how did I do this well let me okay so what goes in here we need a function called deal with it till with promise resolve reject right oh this is so weird I'm totally blanking for a second I did this this morning I should go look at what I wrote just timeout for a second I just look at what I wrote this morning I have it on this new promise oh yeah yeah this is totally right ah I'm there okay I don't know why okay I'm doing it the right way I just got confused for a second okay then I want to pass that deal with promise function into the into the new promise so the deal with promise function is a function that I'm defining to handle resolution and rejection of the promise and that function is put is returned with this new promise but again even though I like to write no one's really gonna write it this way you're mostly gonna see it as an anonymous function written right in here and then you know if we're sticking with this es6 arrow notation we would see it look like this so now this is most likely what you're gonna see I want this delay function to return a new promise and I need to provide pathways for how I resolve and reject those promises so here's what I could do I'm gonna put this set timeout say hello time then I'm actually going to so uh sorry I need to do really don't look up my code because I'm usually figuring out I just want to look it up oh yes a timeout a function I just call resolve okay all right I'm sorry I got so confused let me just go back though the least I need to return anything just called oh right right right okay all right so what do I want to do what I want - sorry is I want to call set timeout what I want to call set timeout with that amount of time so I'm going to use the call back but what is the call back the call back is actually just resolved so and I don't need this say hello function anymore because I'm gonna handle what I want to do I don't have a call back anymore I mean I handle what I want to do with the then so here what I want to do is say after this amount of time resolve the promise okay so let's just see if this works yeah it worked now here's the thing I might want to do more stuff in here and so this could actually be I could actually also write this like this as a function that executes to resolve and then other things could happen in here but I think that's besides the point I just want to recall resolve because all I'm doing is waiting for a certain amount of time but here's the thing what if I were to say also in addition to delay 1000 delay you know um promise sing like this doesn't make any sense right you can't pass a string to the delay function it doesn't know how much time it's supposed to wait so if I run this now it's sort of just worked weirdly but I want to make that an error I want to reject the promise if I don't get a number so one thing I can do here is I can say if there's a function actually in JavaScript I believe it's is n a n so is n a n stands for is not a number so if time is not a number I now want to reject that promise otherwise I want to resolve the promise after a certain amount of time so this is me taking the non promise function set which has a callback and wrapping it in a new function that handles it with a promise but better than just car so list this should work now in other words we should see we see this like undefined sketch ojs line 9 because but I should really give it an error so I should be able to say I believe reject new and pass an error new error you delay requires a valid number or something so if I do this and now let me just take this out here right so this now is the full promise of a 5 promise of a fight that's not a word delay function it returns a new promise which is a function that handles resolution and rejection and it's if it's if it's passed not a number it calls reject otherwise it just calls resolved after a certain amount of time so let's run this this is my this is me calling it now delay 1000 there we go hello and now if I say delay blah blah we should see error and you can see my error here delay requires a valid number so again this is more likely something you would be doing as the author of a JavaScript library and your library has asynchronous code that supports promises again though and I think I'm gonna do this in the next video I am going to actually completely rewrite that using and I got it wrong apologies to everyone so just to be clear this is es is so confusing so let me think about this yes 5 I don't know this stuff I'm gonna write this out that I'm gonna go check the chat and I'll come back and correct it so let me go backwards this async an 808 is from es 8 which is JavaScript es ECM CA or something MCA a specification 2017 this is es 8 es 6 which promises are a native of JavaScript as a yeah six is es2015 I think and then es5 I don't know when yet that's the kind of old JavaScript that with var so things that are in es6 are like var no sorry let I'm totally off the board here I don't think you can see what I'm writing hold on let me just or like let const arrow a yes five is you know var callbacks promises so jobs could visit the thing JavaScript is like and always changing an evolving language and as you know watching this video in the year 3122 none of this is relevant anymore but thanks for watching anyway about because you were here for a little self hip help video about how to keep your promises alright what was I talking saying I'm gonna come back I'm in the next video I probably got this wrong so in the next video check this video's description for a link to the next one I will come and correct anything here and talk about async and a weight thanks for watching be sure to reduce or return reject did I get something wrong here I'm looking at the chat yes latest yes did I get anything wrong about this ecmascript East ECMA script yeah script no just call the reject okay good great alright so now we are done with this so now I'm gonna talk about a sink and a weight everybody ready for that oh great okay all right you are still setting the time out in error case is all uh-oh that's a little that is an error yeah so interesting no reject oh that's interesting but but it never it stops this it's the JavaScript program quits so I really should oh I see so I should technically have this here this is more correct yes I see so maybe I'll just mention that at the beginning of the next video okay I'm waiting for the chat to catch up with me to tell me if there's anything else important that I'm forgetting it's not even noon yet look how well we're doing oh you can only reject resolve once so it ignores the resolve after the reject but you are setting a weird time out right so this code still it it runs through this code but it won't actually call resolve because it's already been rejected I see so I probably this would actually make more sense to just write it this way I think this is the way that I would choose to write it okay yeah um egg Yi in the chat rightz Dan can you explain what is new and es8 no I mean not because I don't want to but I'm kind of catching up so that what I'm about to do is talk about a sink and a weight a weight I keep saying a weight because it's a sink a sink a weight a weight in a sink async/await but I will I'm at least gonna talk about that all right so let me at the beginning of the next video just fix this all right hold on one second here by the way matsya when you watch this I wonder and all of you watching at home I part or wherever you are I wonder if because I have on my channel if I go to youtube.com slash the coding train and I go here go here go here topics right so this kind of fits in let me look at this playlist so this is what I've got in this playlist so far let versus VAR Const arrow functions for of Ohio order functions but those aren't es6 are they are the higher-order functions es6 oh they existed before didn't they oh but maybe I'm using arrow functions with them anyway so this would make sense this stuff would make sense to go in this video series but I wonder if I should have 17 topics of JavaScript yes 8 may be so let's think about that return reject I could also do okay thank you [Music] alright here we go Oh someone who's mentioned in the chat is mentioning Bluebird das is a nice promise library in JavaScript ok oh I muted am i muted no I'm not muted okay I'm not muted sorry [Music] all right it's time yes 8:00 I have never talked about es8 before but this video I'm going to look at something called a sink and a weight and it's part of es 8 which is es 2017 but anyway this is really what's often referred to as syntax sugar so basically we're not gonna get any new functionality but we're going to have a different way to write in asynchronous function that returns a promise that just makes things easier to follow and nicer I think I mean we we you can you can choose to decide whether it's better or not but I I think I like it it's new for me I haven't really worked with this until yesterday so let's see how this goes alright so just your review if you watched the previous video I wrote this function called delay this function called delay returns a new promise and uh-oh ID there's one mistake here so this isn't that big of a deal once the promise is rejected I really should stop and not do anything else but this code keeps going and calls this set timeout it won't resolve the promise but still doing this weird set timeout so I could there's some options here I could say like return I could also I think what I'm just gonna do for my the way I like to do things has just put an else here so I'm gonna add that so this function receives a number creates a promise o receives an argument if the receives a parameter if the parameter is not a number it rejects the promise and throws an error if it is it calls set timeout and resolve the promise that way I can say after a certain delay like 1,000 milliseconds create a paragraph or catch the error so now what I'm gonna do is I'm gonna write delay es8 so here's the thing if a function returns a promise if a function returns a promise and what returns a promise the delay function returns a promise I'm gonna I'm gonna do something weird here so I'm gonna what I want to do is called delay es 8 so I'm just I'm writing a new function I'm gonna call that this is gonna stay exactly the same this is gonna stay exactly the same now this is really weird and you know it in the next video I'm gonna do this with the word Nick and gif V example that's gonna make way more sense I probably should just do that now but I'm already going down there you can skip to the next video if you want this is a little bit weird you almost want to forget pretend that delay isn't a function that I wrote but delay is a function that's part of some JavaScript library that I've imported and delay returns a promise so and I'm trying to think of a better name for this then delay es 8 but I guess I'll keep that right now so what this allows me to do right if a function this function I'm taking a long time to get to this returns a promise if that's the case I can suddenly use this keyword a wait meaning just wait for the promise to resolve it's almost like it's kind of like writing blocking code so I can say a wait delay time a wait delay time then I can return now this is why I really want to do this with the fetch function because there's so much more so this is like a very tiny little bit but this now should it's going to make much more sense when I actually have to do more steps don't do anything just awaiting that I don't do anything after but this now will automatically return profits now I'm missing an important piece let's just run this and see what happens I don't know if I like this video so far I might have to rethink this but I'm going I'm going I'm going with it let me refresh a wait is only valid in an a sync function oh dear so here's the thing the oh wait keyword kit just use it anywhere in your code like oh wait for this then do this then wait for this you have to write your own asynchronous function basically you have to write a function that returns a promise but rather than having to say new return return new promise the async keyword just says hey do all that stuff kind of invisibly behind the scenes for me so now if I come back over here and I tag this function basically attacking is the wrong word but I modify by giving this function a modify or async I say this is an asynchronous function it's going to execute asynchronously and and when and return a promise after all after however many calls to a weight that I want so now let me just hit refresh here oh shoot so now let me just hit refresh here and this works again so this now is an asynchronous function so this and that's the reason why this is exciting is I can start to do this so I can sequence a bunch of things that are asynchronous that and and and some of these might actually return something and this now instead of having to chain all these different promises with then dot n dot then dot then dot then catch this catch that I can just do it all in one function and that function will return a promise so I think I don't know how much I don't know if this was that useful to you hopefully gives you kind of a sense but I think a practical example will make a lot more sense so if you remember this particular example look at what I had to do here I had to fetch from Wernick then get the response converted to JSON then convert that then get the word out of that then go to another API I'm gonna rewrite all of this in an asynchronous function using await and I think that's going to help make things make more sense so that's what's gonna be in the next video okay see you there maybe maybe not Oh actually hold on no no maybe I should i that marilyn is is doing is is making a good point that I could actually like wait multiple things but I think that's I think maybe that sort of understood don't forget for await all right yeah bad example since delay doesn't return any value I agree I don't know what well you till you tell me do you think I should just cancel the idea of a separate tutorial I don't know I'm thinking the good news is I'm turning through this we won't we don't have too much further to go let's see people are giving me some feedback here so let me think about this does something else helped okay all right I think actually because I added this stuff in this is okay I think I'm gonna keep it don't cancel okay scripted types of love jazz I appreciate that feedback alright I'm gonna keep going so now what I want to do oh and you know what I forgot to make a I'm when I upload all this code I kind of forgot but that's okay alright so now what I'm gonna do is I'm gonna go to oh one promises oh three async/await and that's what I want to be editing now okay and here should be again just over and over again refresh okay that works for me water drip okay all right here we are now I'm ready for the next bit of this let me cycle the cameras all right here we are now I am going to once again in this video use a sink and a weight but I'm gonna use them in a much more practical way that will actually show you something hopefully that you might at some point want to do in your own javascript thing so back over here um this is what I made in the first part of this series about promises I made this particular JavaScript program it asks the word Nick API for a random word water-drip then once it receives that random word it goes and fetches a gift from the gif gif II API and shows that gift so every time i refresh and sometimes no gift comes back and i get an error which is good I feel like something was up weird with those gifts and I'm gonna regret showing those don't do I still have the PG thing in here no I still have it rated PG maybe I should just rated G let's try that let me come back I just like this kiss you really haven't whoa what the no no no no okay oh no no why I get such long alright whatever that is I have no idea let me come back all right I'm just gonna start this over hello alright in this video I am once again going to talk about a sink and a weight but in this case I'm gonna use a much more practical example so I'm gonna return back to what I did in the very first video about what is the promise and using fetch and I'm going to revisit this example so what this example does is it goes out to the word Nick API goes out it calls fetch on the word Nick API gets a random word once it has that random word it then requests a gift from the giffy API and we can see fetch returns a promise and so I've chained a whole lot of promises fetch from the word Nick API then we'd get a response convert the response to JSON then once you have the JSON put the word on the in the Dom then go to gif e then convert that to JSON then make an image and if there's any error anywhere on there log the error and I you know maybe I want to say console dot error error here all right so now I want to change I want to do this in a much nicer syntactically sugary way with async and await so how do I do that well the first thing that I want to do is just take all of this code and put it in a separate function so I'm gonna say whoa I don't know what this is like I'm gonna call this function word gif and I actually want to change a couple things here I what I want to do is I want to give it a because I actually this isn't important right now I'm gonna add this in the next video I want to show you what happens when you then need to call I have multiple promises but I'll come back to that so I'm just gonna call this function word gift so if I go in here and set up and call this word gift function we are gonna see some gifts and sometimes there's an error right okay so now I want to make this I want to use a weight instead in other words I want to say a weight fetch word Nick API and I'm gonna say let data equals weight so this is by the way I can do this now this is the idea instead of all of this stuff all I have to do and I guess I call this response I can actually just await the result instead of having to fetch and call then that's the new thing but remember if I'm writing a function that uses a weight I must make sure that I label that function async so that's my replacement here and then guess what look at this oh my god I can just say then a weight response JSON so all of this stuff that I had to chain with vens I don't need to do that anymore I could just write them line by line by line in sequence and though all wait this will happen asynchronously because I've made it an async function so I'm just gonna keep going here then I'm gonna send I'm gonna call this response one I don't love that but this for the sake of argument here I'm now gonna say this now a weight fetch gif ei PI plus that word then I'm gonna and I'm gonna call this JSON one then I'm gonna say let and these should all be constant and this is response one response to JSON so that's all the steps right and then and then I want to say let image equal JSON two dot and all of this stuff I want to get that gift and now and I'm gonna also say I think what I want to do here is say let word equal JSON one word these are the things I want to get during these steps so I'm gonna put words here and then I could just return at the very end an object with a word word image image yeah this should be like image URL probably so let's um let's call this and I guess I'm going to be I I guess I'm gonna let's let me just do this I think this will be simpler JSON one dot word so now I've made this a sinc function we're called word gif that oh wait oh wait oh wait oh wait oh wait just go through that all those steps and when it's done it returns an object with the data that it's retrieved guess what I don't need any of that anymore none of this and guess what this remember this is just syntax sugar to wrap all of this stuff in a promise so all I have to do now is say word gif dot then and then I can say results right what comes back an object with these things in it and I can say create P results dot word create image results dot image URL so then and then I can catch any error the same exact way console dot error error so look at this so look at this oh my goodness is this right could this possibly be right whoops I'm looking I'm looking sort of seems right sort of seems right all right here we go okay so I can't believe I just did this are you following me I guess I got lost in my own thoughts there let's just run this and see what happens cannot read property data of undefined sketch that you asked line 20 let's see what did I mess up oh hold on maybe actually oh this is right it works actually this it's just printing out the error it there was no image so I need to be better about handling the error which I'm gonna do in a second so let me change this they let me change the word Nick API to give me a word that's between three and five characters cuz so I really make sure that I get a gift okay well let's just see something is missed something's going wrong here let's take a look at json one huh no the word came in there's just no it's just no gift associated with any of these words really no there's got to be a gift associated with fried I think I might be missing something gif tapi let's let's look at let's look at json - oh look at this I just have this extra nonsense here uh I had that in there by accident I when I was recopy pasting things I made a mistake so hopefully that little debugging helped you sort of see what to figure out here it's nice though that it was this is so much easier to debug that if I had all that Venn stuff and all the functions in sinner like anonymous function stuff I can just really debug this much more easily now alright let's try this again there we go so we haven't gotten a gift yet so why not let's look at let's look at this now all right data index 0 images so data index 0 images fixed height small URL why why is that oh I just called it image Oh another mistake eventually results tough image so many little tiny errors because of all my naming weirdness okay here we go ready so I called it this variables image URL and that's what goes into the image property of the object I'm returning so that's the property need to get out here all right here we go feeling pretty good about this let me hit refresh all right we did it everybody so this was now an example of writing a function called word gift and what that function does is it asynchronously steps through all of these different asynchronous calls one at a time using the await keyword so that I can sequence them and when it's done I have the data that I want and I can send it back if I'm gonna write a separate just put a weight anywhere in my code I can't just suddenly put a weight in setup for example in p5 because I can't make setup an asynchronous function if I put a weight I've got to modify that function to make it a sync okay so what's left this is my chair I say that this is maybe a useful tutorial I don't know you tell me but what's left is I'm now going to show you what if I want to have 10 words and get all 10 words and gifts all together and I want to have something happen when they're all done that's what I'm going to need promise all for and that will be in the next video and that's the last one of this series on promises and async and weight all right thanks wow I'm like a chef MA ok can't you use es6 enhanced object literal syntax there probably I could just do word yes I absolutely could do the create P and the create image stuff inside of here I just don't really want to I want that to be like a thing that's handled elsewhere just for kind of sanity sake like I want this function just to be about retrieving the data and not using the data but yes that's absolutely correct I don't know what an es6 enhanced object literal syntax is oh oh that's a thing you can do yeah I see I see okay Wow we actually might get to tensorflow j/s today because I have till 1 o'clock and I don't think promises about all it's gonna take very long now that I have this already let me look up what this is es6 enhanced object literals yes 5 although you could just do that wow that's really interesting I did not know that okay good to know maybe I'll mention that a fractional asks coding train you planning to start any open source GS related projects that all viewers can join and contribute to a small app or something so let me take a minute to answer this question before I go do promised all because this is a great question fractional so I have in the past and in fact you can go through if you go to code github.com slash coding train under I got it under repositories you can actually see there are a lot of repositories and all these are open source projects that people can contribute to this was done one that was done officially for processing community day as far as I know there's gonna be another processing community day next I believe probably in next January 2019 but don't quote me on that there's the twelve O'Clock project which was a port of john midas twelve O'Clock design i there's an issue that i have which is that it takes time and work to manage an open-source project and i have in the past employed people to help manage github repositories i also have had people just volunteer to do it and there are plenty of volunteers like me I am so me and Neil's web and Alka ADA I'm mentioning just top off top of my head some contributors from the patron community who have done a lot of work a website being like kind of like a primary one that's you know has a lot of activity so I don't have a good system and but you can see this is what happens I have this github tutorial and on on github and I think a rainbow poem this has 313 open pull requests because it's a video tutorial about how to make a pull request and then I ask people to make the pull request and then you know for a while I was merging them and checking them every day and then I like I think actually I was doing this all the way up to last summer when I broke my elbow I might not I might this might have already happened way before last summer but I just like didn't do it for a few weeks and then once I came back to it I was just like oh I can't I can't it's too much so I don't I need a you know a way to vet people to to enforce the code of conduct and volunteer to manage some of these repos so anyway that's my example slightly bad example as none of the code subsequent to each oh wait runs async because each relies on the result of the previous oh wait so execution still held up until that results arrive writes David Smith that's interesting so David Smith are you saying that my example is slightly bad [Music] so I I oh and Madden ah sorry Meriden has if you're in the slack Channel I forgot your name it's only because I'm afraid of mispronouncing it yes I certainly could in the same way I mean one thing I don't want to go off to off-topic here but I not opposed to Valen for volunteering out stickers to people who help contribute a certain amount or even you know membership to the sponsor group or whatever as well but okay you should do something that can run while the request is running oh yes right so the idea here is that what I could do is you know I could show like a loading screen that then finishes once it's done so like I don't know that I need to do this but like like I may be what David Smith is suggesting if I say like loading is true and then if I actually had a draw loop if loading I would like draw a loading bar and then I would set loading equal false here and then I would show something else once it's loaded okay so but point points taken that I didn't go the next step maybe I'll mention that is an exercise okay all right let's do promised on all all right and then I could do a loading bar with promise dot all that would actually make sense does I have to do a lot of them but anyway okay it's a stage before the all makes sense means if you do away oh yeah I got a move off from the chat and to I'm very interested which is kind of the issue let me just check to make sure there's no emergencies going on here that I need to respond to Oh coding train tweeted I started a live stream on YouTube okay yet that is a good point about sequential asynchronous versus parallel asynchronous like if I wanted to do during but but I'm just I'm not gonna there's a lot more to this and I'm trying to stay in a friendly place all right all right welcome back this for the moment for the time being is the last video in my series on promises in es6 and a sink and a weight in ES 8 now many people who are watching the live version of this you might be watching the recorded version or making lots of excellent comments about things that I'm not demonstrating for example what if I want things to happen like on the interim during various stages of this or why I want to show like a loading bar oh you know I want my asynchronous calls to be happening in parallel instead of like waiting for all this to be done and then just showing the results those are all really good questions so I'm trying to stay in sort of a simple place to demonstrate the basic idea but I would leave some of those as exercises to you and maybe I can come back and continue this series if there are some key things that I've missed so please give me your feedback in the comments but what I want to show in this particular video is what if I want to make multiple calls to word gift and I want them I want to be able to retain sort of something about the sequence of those calls so for example something I absolutely could do is I could just do this twice right and in fact I can still leave the catch at the end so I can actually do this I think right because this returns oh no I would have to say right this is a little bit goofy but I could say return word gif sorry word gif inside of here and then I could say then do another one right so this is just me doing - this is a little bit weird and I'm need to finish off the code here and I need a dot here so this is the way of chain this is kind of without the await thing this is the way of chaining promises so first I call word gif I show the results I returned the next call to word gift which is a new promise and then I show those results so let's run this and see if we get two up sorry I'm in a different place we see two and they happen one after the other and sometimes I'm gonna get an error if there's no gift okay now here's the thing I want to change something about the word gift function I want to make this have an argument numb and that's going to be the number of the number of sorry I'm spacing the number of letters that I want so I'm gonna go to the word Nick API and hmm I'm gonna take this out and I'm gonna say when I'm calling that I'm gonna say plus and so I'm just adding and um there's a nice way I should use those what's that called in es6 the string thing I'll have to make a video on that but I'm gonna do it my highly manual way I'm just adding in the minimum maximum length as a number so hopefully you can follow what I'm doing here because I'm all right so what I'm doing is I'm just modifying the call to the word Nick API to specify a number of characters so I'm gonna say word Nick for and then word Nick five we're sorry not word Nick word gift for word gift five so I should get a four-letter word and then a five letter word four letters all right I got an error four letters five letters okay so that this works for letters five letters in sequence so so why am I doing this so one thing I want to point out about sequence versus parallel I know I'm gonna get the promise that all interestingly enough what if I didn't chain these so let's take out the second one and just leave this first one and now I'm going to actually just completely duplicate this code and say I'm gonna say three and four three and four let's run this now so now they're not chained so I'm not waiting to do the second one until the first one comes back I'm just saying do these in parallel do both of them and when they both come back create the paragraphs in the image so let's look at this three four three four three three four so interesting enough let me let's I'm sort of surprised I want to just try now with a five as well I look at this for three so when they're happening in parallel what I'm saying just like do this do this do this just start them all I'm not necessarily going to be sure about the order that they come back in so one way to deal with that is to chain them like I did there's another way to deal with that if I want to say like wait till everything is done and then show the results and that's where promise dot all comes in so promise dot all requires an array so let me let's just so let's just pretend I have something like called promises and it has it's an array of three promises if there is an array of three promises I can write promise dot all pass in promises that array and then add sorry it's a then and catch so hold on I'm I'm this is hard I have to think about this while I'm doing it promise dot all promises then and this gets a function of what to do when it comes back and this gets a function which is pretty much you know if there is an error okay so I think this is the skeleton of what I want I have some syntax errors here maybe I you know semicolon looking looking looking oh well this should say error console.log err what's wrong here what am I missing ah this needs us there we go no so just one oh there's no yep what's wrong let's see now I know that's not the problem come I don't see what it is oh no this is right that's where that goes that's the clutch closing setup okay this is actually correct this curly bracket I don't know why I was I had a little brain malfunction there where I thought it was supposed to be there but this is actually closing setup so this is in the correct spot so this is the skeleton the idea is and by the way this this is really a problem this needs to have an argument the idea the skeleton is if I create an array of three promises I can say when all of the promises are complete and resolved give me the result of all those promises in an array of the same order as the original promises that's the idea of promise doll so what are these promises well they could be this word gift three word gift for and certainly I could create them in a loop or with separate variables but just to do this word gif five so this is the idea here I'm gonna give myself a little bit more space that what I can do here is just say hey I want to make three promises I want three word gift things when all of those are done show me the results and now this is I'm just gonna use a like a regular loop because instead of a four of loop I'm not sure why but that's how I feel right now so now I can do a loop to go through all the results and then I could say data equal results index I and then what do I want to do actually let's just put this in here the difference is I'm saying results index I results index I right so the idea here is now this is exactly what I had before starting took me a little while to get to this this is exactly what I had before the difference is I am putting all the promises in an array I'm not handling them with our each their own then or in separate blocks I'm just putting all the promises right word gift returns a promise remember this code of this I can totally delete now remember this async function we wrote the async function with awaits returns a promise when the promise is resolved you get this particular object so now when all of the promises are resolved then I have all of the resolutions in an array called results and I can go through them one at a time and they should be in the same exact order as the array original array did I do this correctly did I do this correctly ah shoot gets that to have slide 49 what did I do wine 49 am I even in the right yeah I'm in the right 49 hold on let's not I didn't save I didn't save save this is like wasted time in the video but well I'm 20 now should never use that drum sound effect oh I just have an extra curly bracket thank you there we go so when they're done all three of them happen at once and they're always in the right order three four five three four or five let's get an error I'm sure we'll get errors if we give longer words so let's just see what happens with an error didn't get it how are we not getting any errors there we go now interesting enough is that I really should stop because this video should be done but is there a way that I just want to look at that results array if I get an error whoops do I at least get yeah I guess I don't was time out for a second so here's the thing I guess if I want to handle these individually and have the ones that succeed succeed and the ones that fail fail I can't use the solution is that correct I need some help with this question twelve twenty I'm gonna have to get some water you don't get results on the air ever so if I wanted to do if I wanted to do like a hundred of them this doesn't really make sense right I would really want to sequence it not use promise dot all right okay so I think I would say oh I forgot to show try and catch in here but that's fine that could come another time all or nothing okay all right so I got an error so here's the thing this promise that all might not actually be such a great solution for this because promise dot all is all or nothing so if any of those promises have an error then I don't get any of the results so if what I wanted to do here was create a for loop you know let I equals zero I is less than 100 I plus plus and I have like let promises equal an array and then it's a promises dot push word gift you know for for I write this is now going to work and it should show me a hundred word gifts but if any one of those words come does not have a proper gift associated with it I'm not gonna get anything so let's see it's doing them all what this is actually a great exercise now for you to do a loading bar because this takes awhile and actually I got lucky I guess like all 100 of them worked but if I want to see them like appearing as they come in I want to do them more in parallel I want to sequence them but hopefully you've seen the range of ideas here so I'd encourage you to take this code play with it maybe back out of the promise tall thing what can you add a loading bar how can you like load them cleverly and try some other stuff with it and I also I think I'm forgetting I guess I'll do this in another video if I can remember I also can use try and catch inside of this async function if I want to handle the errors in a slightly more custom I think that's correct but if that's not correct eventually I'll make a video about try and catch alright thanks for watching this series on oops thanks for what them thanks for watching this series on promises I think I now have made a video tutorial that follows this list leave me your comments and your questions and all that sort of stuff and I'll see you again sometime goodbye alright everybody oh yes Matt this higher-order functions would certainly but I think that I I think I stayed in my lane here like I was very important feel like yesterday I went I didn't I was I went off target and I got to stay in my lane which was like the basics and the fundamental concepts and I think to the extent that it's helpful yeah right tension flow yes I know which is bad for me to start with this as I'm so first light I definitely need to get some water so if you don't mind I am going to leave you how would I was gonna like let this go for a long time but let me oh if I use a try-catch on the image URL you can use promised I'll return a no gif image right I see so in other words like this let me just try this catch because maybe I will so I just want to experiment this idea would this work I need to do this I'm just gonna leave this blank for a second ah interesting so that's a great so I should really do this I should add another video right to give me feedback about this what is there anything particularly weird about this that's like totally wrong so um um err in the chat the slack group asked how is threading handled in Jay s what I mean is what happens if variable is shared in more than one promised action here's the good news good news bad news there is no threading in Jay s is a single JavaScript a single threaded so there is no way to have that conflict and the way this asynchronous stuff works is there's a good article about that that people have been sharing somebody could share it in both chats that would be helpful is this how do people feel about this like should I write this in a last-ditch video that shows try and catch they don't just come back to it let me go get some water let me I'm gonna get some water I'm muting myself I'll be right back i muted I'm not mute I'll look in the slack Channel when I come back so if there was any good feedback about this code put it there and don't chat after it I see it [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] okay here I am back so I've thought about this it's 12:30 I only have till one o'clock and I don't think it's wise to try to do the layers API or the tensorflow j/s linear regression example with time pressure and also my brain is starting to melt a little bit so here's here's the thing I've good news bad news bad news is I'm gonna wrap up soon and I'm gonna not do tension flow yes right now the good news is I'm going to create an event for today and I will come back for an additional hour because I do technically I'm free between 4 & 5 you can hear me now right okay so let me do this right now otherwise awful things my mind about it after I ate so I'm going to creator studio and I'm going to and then I'm going to talk about the try-catch I'll do that before I go bro whoops so bring back the timer hold on I'm Andrea vents ah shoot live streaming events so there is an option to no new live event but I want to create a new event from the settings of the other one it's all that option once in YouTube maybe I can't do that one that's actually live [Music] uh-uh you know well I'm just gonna do it here okay a promise you today 4 p.m. eastern end time 5 p.m. I'm like a live streaming addicts here public advanced settings enable slow mode video according date language is English where's the one where it says like I guess I can fix this I Oh make this archive unlisted once it's finished yet ok so create event so I just I guess I can take off this back in five minutes thing so there should be now if I go to open up here YouTube the coding train I say 1 p.m. oh that's not right info and settings 4 p.m. to 5 p.m. Eastern I guess maybe my YouTube thinks I'm in Pacific time because that's 1 p.m. Pacific time because it definitely says here in the page but anyway so I'm gonna come back so by the way in case you want to know to get a notification when this actually happens you should I guess this is me I'm logged in as myself so I can't click Subscribe but somewhere here you could click subscribe you could click Submit reminder there's a way for me to view as something but whatever let me just go to I'm just curious I'm just curious does this look like if I'm not logged in so yeah sponsor subscribe alarm bell and set reminder okay so this is gonna happen later now go back to the code let me go back to the slack channel okay so I'm gonna read through this comments only one bit of code has ever executed at once so in synchronous lines of code you can early that's that's the answer that other question Maddon writes I would put let imageurl equal no image and have the catch just for logging the error yes that's a good idea I like that you can also catch on the promise returned from word gif which might make more sense from an error catching standpoint oh you mean like catch it here like actually put a catch here and then not add it to the array but if that feels confusing also you need to do catch e with a catch without an argument so this I kind of like this idea also let me just try this oh right that's right that's the error okay like no image for this gift great okay so this makes sense I'm gonna do it this way for simplicity because I don't want to muck with this up here hey just in time coding garden with CJ is on now so when I believe you could go watch that so YouTube channel I subscribes you have some more water alright alright I'm gonna do it my way even though there are other ways of doing it so now what I want to do is go out of this and put it back maybe I'll mention the what was that thing called again what was that thing called when see this is why came to the tensorflow tasvideos now-enhanced object literal or something oh yeah is there a documentation of on the mozilla documentation yeah this is the enhanced okay all right all right Oh property is No yeah I agree I agree with that me I am Sania okay all right everybody I think I'm good right all right okay all right here we go everybody let me recycle you cycle the cameras this is gonna be the last thing for today because I have run out of steam and somehow I committed to coming back for an hour to do so somebody will spot maybe get a few new sponsors this afternoon for doing the extra effort okay Marin is light right about lying 28 now huh oh yeah thank you 26 got it okay all right oh it can't be zero let's do all right here we go I do I am feel sleepy I sell say I need to eat lunch I'm getting a little tired just when you thought it was safe to go back in the water the swim with the promises I don't know anyway I I do want to add something to this list here you're watching this so there's another video here so I want to talk just really quickly and show you one thing about try and catch so if you remember where I left off with promise all what I had is I have this particular and I kind of made some modifications in between the last video in this one but I have this particular JavaScript program using the p5 just library that makes a bunch of calls to word NIC and the giffy API and when everything is done and it's finished with all those calls they're all promises I get back some results and I place them all in the Dom with a paragraph element in the image elements now the problem here and again promises at all promise not all is not necessarily the best solution for this anyway but since I'm demonstrating it the main issue here is if any of those it's all or nothing if any single one of those has an error like there isn't a gif associated with that word available in the gif the API the whole thing doesn't do it it doesn't do anything so just about every time I run this I'm not getting anything now let me just make it work by let me just let me just get like three of them and let me just say they're all gonna be three letter words I think this will probably work right so I got three gifts with three three letter words so you can see that that worked but what I want is I want to I want it to work anyway and I want to see a two letter word a three letter word four or five six seven and so let's do that oh whoa it actually worked so that was the first time that worked but most of the time we're going to get an error so there's a way around this and it is not a way around this but there's another concept that could help here that's important which is try and catch so a place that I could use truck what I want to do is individually handle error messages differently and a way that I can do that here is is by I can I can handle the error message myself and not cause it to fail by using a try-catch here so the first thing I'm going to do is I'm actually just gonna say let image URL equal no so I'm gonna assume that I'm starting with the idea that there isn't an image URL then I'm going to try to get the image URL from from the sorry try to get the image your health I'm getting sleepy after making all these videos I'm gonna try to get the image URL from the data now it might not exist that's fine I'm just gonna try then I'm gonna return JSON one word and image URL now this will be no if this doesn't work so I can now go up whoops I can go back up in my code and I could say hey if results index I dot image equals null you know as long as it's not no do this so this now should let everything keep going and it will only just skip making an image where there wasn't one let's see if that works okay ah all right so fine I was thinking I could demonstrate this without a catch and then show you the catch next I thought there might be like a default catch but clearly there's not that makes sense right so and there's a finally thing too off to come back to that another time but what it's saying is like hey hey if you're gonna try something you I can try it but you got to tell me what to do if things go wrong my god you're in charge now like the the error isn't just going to be handled however it's going to be handled so I need to actually say catch and the catch actually gets inside of here it's like a function it's not an argument and I could call that error so I'm actually gonna catch that error I'm gonna say console.log no image found for JSON oops for a JSON one word and then I'm also going to just say console dot error I'm as well as print out that error as well and let's just call it er are just so we have things name differently so I think this is right now now what I'm doing is I'm saying hey let me uh try to grab the image URL if it doesn't exist just spit something out to the console and but keep going so let's see if this works now whoa right it didn't find it for any of them weird okay so I got a mistake somewhere because it only didn't find it for one of them I think I'm I've got something wrong somewhere Oh Oh what did I do here if yeah if this is like total nonsense this is what I need to eat lunch people I should not be making this video tutorial right now that was total nonsense what I wrote before what I'm saying is as long as the results image is not null not not image equal to no that makes no sense at all let's try that again great now they all unfortunately they all worked but you can see now work but no image found for fueler and we should see that fueler is still here but just no image is associated with it so no image found for fueler no image transfer whatever that word is and so now this goes through but I can sort of see what are the things where it doesn't work okay so I have talked to you about now I added this last little bit about try and catch here's the thing we're here because why while we're here in es6 and es8 land there is something called enhanced object initialization is that what it's called enhanced object literals in es6 so something that I can actually do here Oh weird I don't want to talk about it that's it's not it's not that put that in here it's fine yeah Oh too many people use try-catch rather than defensive programming which is lazy hmm weird added point I'm getting some interesting feedback on the chat that's things like people use try-catch too much and that try-catch is is useful but it should be used as a last resort if all your other stuff fails so again I'm not necessarily suggesting that the way that I've done this is the optimal way to create this word gift generator I mean ultimately if I wanted to do that I'd probably want to not just like have a hundred promises that all happen all at once I'd want to animate and sequence and make things interactive and maybe I type in a word all sorts of possibilities but I'm trying to show you the bits and pieces and features so the important thing here I think is that you can write an asynchronous function that returns a promise without ever saying promise by using the await keyword and the async keyword you can use promise all to execute some code when a whole lot of promises are finished and the results will always come in in the same orders the array and but you can also sequence processing promises with denne denne denne denne okay so there's some other things that I should do like I should use enhanced object literals which is like an es6 feature maybe I'll come back and talk about that in a video that's thing with the strings what's the thing with the string strings es6 literals there's like a thing template literals I should use that so so somebody remind me that's our video I'll talk about some other es6 features like template literals and enhanced object literals now just go look up those things on your own little tidbits here good bye alright alright okay I'm done it's 1250 I'm going to answer a few questions that come in from the chat thank you to all the sponsors and patrons of the coding train this really motivates me like a numbers person so the funding also the funding helps but also just sort of like the number stuff appreciate it and I'm gonna come back for today so actually I'm gonna put up a little straw poll and just know I won't because I'm not gonna listen to it probably so the things I want to talk about the things that I want to do tensorflow das wise is I was gonna I think I'm not gonna do this today there's currently a bug in tensorflow GS associated with the from pixels so I think I'm not gonna come back and do that maybe what I'll do is I'll do the linear regression example and if I can do that and talk about the layers API I'll be happy I probably could only do I was going to just do linear regression with tensorflow das that's like a kind of baseline example lairs API the next thing would be X or an image classification and other stuff but I think that's what I'll start with [Music] what's what the best way to sponsor patreon or YouTube I don't know it's really up to you and you could always cancel one and switch the other one if you don't like it I mean probably in theory I would get more YouTube takes 30% patreon in theory doesn't take 30% but the fee structure there is gooliope ache to me so I don't say I'm knowing I almost like it better that it just clearly 30% even though that's kind of high so I don't know a YouTube thing is nice if you want to sponsor for more than $5 you have to use patreon if I also sponsor on YouTube as well as on patreon will that get me the $10 patreon rewards yes ma'am sure why not why not [Music] wait let's let's have an off line slack DM discussion about that but I'm happy to do ours fair how is ITP different from a normal University with some standard courses it's a great question from Joffrey so first of all let me just be clear ITP NYU dot edu there are two programs ITP two-year master's program ima four-year undergraduate program ima is a BFA Bachelor of Fine Arts ITP is some degree that I don't know what it never heard of them is it MPs master professional masters and probably something I think that's what it is so but I would say that and I can speak to more about ITP having been having been being an ITP alum and having worked at ITP for 15 years ima is a new program starting this fall uh I am a in many ways it's probably a bit more traditional in the academic sense as it's an undergraduate BFA program non-traditional probably in spirits and culture I would I would hope so I would say ITP is is a program about making more so than about sort of theory and it's very interdisciplinary and it's pass/fail and a lot of what to me the magic divide to be is not the courses that you're taking it's the community and being here I would encourage you to watch my night to be show videos which will give you a sense welcome new sponsor met in Thank You Mara and double sponsor welcome there are now only two double sponsors me I am so me and Marin no me Ames there's another bug in from pixels I don't want to get lost Oh thy song and they don't know I just paused it let me just look there's another let me just look really quickly there's another from pixels bug it's in just in point 11 yep it's this one this particular bug so this is uh from pixels bug in zero point eleven point one sensei oh one more question since a clock khlo asks hey Dan I wondered how you started coding train alright I've got an answer for this one Vimeo shipment so if you go look at this now deprecated Vimeo channel you will see a lot of the videos that I have on YouTube here so originally I was just making these videos and publishing them on Vimeo and I was really doing it just as for the courses that I was teaching and then putting them online hoping other people would watch and I should try to find somewhere I have an email from somebody who said could you upload your videos to YouTube I want to watch them on to X and I did that I think in like September 2015 and I had I just took all of the videos so I guess to 253 videos I had on Vimeo and I uploaded them all to YouTube and then I discovered that I could also livestream at some point so something that you can amuse yourself with watching is if you go to the coding train and under let's see playlists and uh unlisted live streams don't look at that one I shouldn't be lipo I shouldn't log into my YouTube live stream a live stream archive yeah this one live stream number one September 4th 2015 and this is me I think live streaming through Google Hangouts I think I don't I don't know but this is you can watch this right somewhere there's a live stream that I did through Google Hangouts that's not what this is this looks like it's actually live streamed live streamed but anyway so that's kind of a bit of the history it looks like there wasn't maybe another sponsor is that still just Manning and that's just Mary [Music] thank you everybody for tuning in I have a bunch of think buns web lunch and a bunch of things I have to do today was coming back at four things gonna be tricky but I think it's worth doing it will only be for an hour so if I can least do linear regression with centrifugal Jess how are you able to learn so much programming language I don't know I don't know that I know so much programming language I think it's just draw it to it doing and trying and actually teaching it as it helps me learn a lot okay thank you so much everybody I just just stop torturing me people I'm gonna go now I don't maybe I'm torturing people too much with playing that outro every time so I think maybe I'll maybe I won't do the outro especially since I'm coming back oh the coding train wallpaper I think on the coding train github website issues so yeah I mean it doesn't you have to dig into this issue and find maybe a link that I put somewhere in here oh yeah the files are on github but it should there should be like a more obvious place to download it but yeah so if you read through this issue you'll see where it is do I play fortnight well that's cool that's question I have not my son who is 9 plays fortnight he's up and that is that where everyone does the like pickle thing from which I can't do anyway I gotta go this live chat will be that this live chat the live chats are always archived so you come back and watch the the the archive of the stream the live chats play along okay I gotta go goodbye everybody thank you I will see you I think this afternoon for one hour

Channel: The Coding Train

Views: 8,954

Rating: 4.936255 out of 5

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, nature of code, live stream, itp nyu, es6 arrow functions, es6 arrow, map es6, javascript reduce method, es6 tutorial, es6 tutorial for beginners, es6 javascript, promise, promise javascript, promise javascript es6, promise javascript asynchronous, promise javascript example, promise javascript resolve reject

Id: mETDQDBwOi0

Length: 118min 9sec (7089 seconds)

Published: Fri May 25 2018