Thio a Knute, myMikeWelcomeyouhere A littleknees, Alyextrauneasilysoundofmyvoiceis a littlequieterif I have a littlelessmistakeWaveuveenthusiasmTheenthusiasmisdeepinmyheart I'm gettingover a coldAndactually, nowthat I couldn't speak, I thinkitmusthavethought.
But I wanttocanceltodaybecause I'vegotsomemomentumwiththiseveryWednesdaything.
And I doknow, as a matteroffact, thatthenexttwoweeksor a little, I'm gonnatrytokeepthiseveryWednesdaything.
But I knowforsuretwoweeksfromnow I won't behereonWednesdayonand I'm notsosureaboutnextweekend.
But I havesomeplans, anextrabonuslivestreams.
So, uh, todaymightbe a bitof a shorteratthesothio.
Veryminorminor.
Just a littlebitof a cold.
It's note.
Herewehad a snowdaythatwasexcitingthankstoeveryonewhoindulged a littleextranoise.
Loopedvideowhere I walkedthestreetsofBrooklynon, talkedinto a camera, waswearing a baseballcaptryingtochannelmyinneryouthfulyoutuber.
I don't knowhowwell I did, butitwasanattempt.
So I'vegotsome, Uhuh.
What I viewisexcitingthingstotalkaboutandshowed.
And I alsojustoneof a kindofreset a littlebitbecause I havebeenobsessed, asyoumayhavenoticednoise, differentnoisealgorithms, classicPerlanoisesimplexnoise, opensimplexnoise.
Althoughthere's littletimetowardstheendoftoday, I wouldliketoapplytheloopingnoisetotheterraincode, whichissomethingthat I saidattheendofmyvideothat I woulddoif I don't gettotoday, I'llcertainlyreleasethatcode.
ButMacha, who I workwithonthecoatingtrain, and I areworkingtoo, puttogethereditedversionsofallthetalkswhichwillbepostedsoon, Sometimeinthenextfewweeks.
Consideralso, youknow, ifyouhavethemeansandareabletoifyoucansupporttheworkTheCrossingFoundation, bybecoming a memberonce a year, I'lldodolike a specificfundraiseronthecoatingtrainfortheProstateFoundation.
Butprocessrelationis a 51 C threetaxexemptUSnonprofitsupportedbysome, uh, grantsthatwe'vebeensoluckytogetsupportedbytheNewYorkCityDepartmentofEducationCSforallinitiativeandprobablyalmostmoreprimarilysupportedbypeople.
You, theviewers, perhapsofthischannel, thepeoplewhouseprocessing p five J s.
AndifyouwantThiobecome a member, youcangotohearallright?
There's actually a differentimprovedPearlannoysalgorithm, alsoaround 2001 thatwasseparatefromsimplexnoise.
I believe I'vegottensomeofthisright.
Gotsomeofitwrong, haveconflatedoversimplifiedSomething's oneofthemistakes I certainlymadeinthisvideowasbeing, too.
Uh, I talkedaboutmoving a loop, loopingnoiseinthreedeathsbymoving a planealonglikethepathof a tourists, whichisn't exactlywhat I'm doingbecause I'm actuallyusingfourdimensionalspacetoloop.
Butsotherehavebeensomereallynicethreadsandcommentsexplainingsomeofthethings I gotwronginthecommentsofthevideo, so I highlyencourageyoutocheckthatout.
I justwanttohighlightthisoneparticularcommentfrom, uh, Ralphto T.
GradyIntWehrli, GaborGaborgaballthisisone I havenotheardofhimeverlookedatupwavelit, etcetera, Whenthealgorithmuses a randomnumbergenerator, itisprobablyvaluenoise.
So I assumethatthefirstclassicversionandtheimprovednoisearebothoperating.
I seethatthelagiskindofhappeningagainthatbothofthoseareoperatingingredientsarehappeningon a rectangularsquaregridnoiseon a simplisticgridor a gridgridofequallateraltrianglesondsoUh, there's anarticleaboutthisthattheauthorofthiscommentpostsaboutimprovedPerlanoise, which I willclickonnow.
Andyoucanfindthathere.
Sothisisalso a reallynicereference, anditwasnicewhileitwasworking, butitseemstobelaggingagain.
Allright, so I'm gettingsomestuffoffmychest.
Eveninthislagstates, beinteresting.
Tow.
Watchthisbacklater.
I lovehowtheYouTubechat.
Moderationissmartenoughtoautomaticallyflagcommentsthatsay, subscribeto a particularchannelthatChildrenbig, namelessinadditiontojust, youknow, uh, inappropriatelanguageandthatsortofthing.
Okay, sir, pleaserestartyourMac.
I havetriedthattwice.
I don't thinkthat's gonnadoanything.
So I think I amnotgoingto, uh, restartmyMac.
Somepeoplearesayingit's stable.
I'm gonnalookatthecontrolroom.
Bad.
We'renotreceivingvideo.
It's sofunnythat I havethiscoldbecauseitreallyjustsoapt.
Itjustcouldn't be a bettermatch.
Thelag, thenetworklagandthetheheadcongestion.
Itjustfeelslikethesamething.
That's allmixedtogether.
Soit's It's kindofappropriate.
There's a badlagproblem, allright?
Oh, no.
Whathave I done?
Whathave I done?
I'm gonnaclose.
Don't makemepullthiscarover.
I willclosethechatwindowandnotlookatitfortherestoftheLifestreambehavior.
Ifyouare a teacherwhoteachesthisstuffandcangivemeideasandthoughtsaboutwhatwouldbespecificallyhelpfulthatyouwouldlovetohavehisresourceis a pointyourstudentstowardsThat's inparticularwhat I'm lookingfor.
Andthisfunctionfetchwillserveas a buildingblockfor a lotofthedifferentexamplesandothertopicsthat I talktoyouthroughoutthisseries, workingwithdataandAPeyes.
Sowhatisfetch?
Okay, soit's a globalmethodthatyoucancallinJavascriptinthebrowser.
So, youknow, maybetherearesomebrowsersthatdon't yetsupportfetch.
Andthisis a considerationasyoudeploy a projectto a largeworldwideaudience.
Yeah, fetches a functionthatyoucallbythekeywordthefunctionnamefetch.
Andyoucangiveitmorethanoneargument.
Now, theeasiestwaytousetogiveitonesingleargument.
Andthisis a path.
Soitcouldbe a pathtoourlocalfile.
Itcouldbeoryouare l path.
Andyou'resaying, Hey, I wouldlikethisorthistextdata.
That's Jasondataorthistabulardata.
It's commaseparatedvaluefile, anykindofdatayoucanfetchitoptionallyyoucangivefetch a secondargument, whichisreallylike a bunchofconfigurationoptions.
Sointhecasewhereyouactuallywanttousefetchtopostdatatosaywhatyouwanttodoisgointothebodyandpullthedataoutinsomeformatthatyouwantand I'vemade I premade I wrote a listhereofthekindsofwaysyoucandothatsoyoucangetletmightunderstandSomaybeifyou'rejustloading a textfile, you'reloading a Shakespeareplay.
I cansaydotthenand I canadd a Sowhenthisfunctionhereisgoingtobecodethatexecuteswhenithasfinishedloadingthefile, thetrickythinghereis I don't havethedatareadyin a formatthat I want.
Soonceit's loaded, I havetowrite a functionthatthencallseitherbloborJasonortextinwhatevertobasicallyindicatewhatformat I wantthedatatobeprayerpreparedformein.
Andthattriggersanother a synchronousevent.
So I cansaydotthenandhereiswhere I canactuallyusethedata.
Sohereiswhen I wantedtosayforthis, convertthedatato a blobwhichtriggersanotherpromiseonceitgetsresolved, then I canactuallymaybeshowtheimage.
Sothisisthenarrativethatdothiswiththese, EvenyourkeywordsandJavaScriptcalled a weightand a sink.
And I willshowyouthatreallyquicklyattheendofthisvideo, because I mightusethatuntilthedamnthisistheprocess.
So I'm doingsomethingwhich I haven't doneverymuchonmychannel.
Absoluteon.
Sorry.
Letmeactuallyopenthisstuffup.
Okay, let's writesomecode.
So I'm doingsomethingthat I haven't reallyeverdoneonthischannelbefore.
Communicationssaythathappenedinpreviousvideos.
Let's writesomecode.
So I'm doingsomethingthat I doprettyrarelyonthischannel, which I justhave a planeindexdothtmlfileand I'm gonnaactuallyputmyJavaScriptinthatfilein a scripttag.
I couldcallit, uh, you, Nikki, but I wouldn't callitresponse, becausethatmakessense.
That's wherewhen?
Whenthepromisehasbeenresolved.
When I getthestuff.
Solet's justsayconsolelongresponse.
Let's refreshthepageandLook, thereitis.
Sothere's lotsofinformation.
Headers, the u R l Allsortsofstuffinheredoesthebody I needtofigureout I needtoparsethroughwhat's inthebodyofthisresponsein a waythat I canuseandthewaythat I'm gonnadothatiswiththeblobfunction.
Sonow I'm gonnasayreturnresponsedotblob.
And I'm goingtostreamlinethiscodeifyou'reifyou'vedonejobs, goodprogrammingbefore.
Andyou'relike, whyaren't youusingthearrowsyntax?
And, uh, I'm gonnastreamlinethiscodeinin a minute, but I'm gonnakindofwriteitinthelongwindedwayfirst.
Soreturningresponsedotblobmeansthere's anUSand I canchangethem.
And I thinkwhat I'd liketodoisputthisdown.
Well, it's fine, I'm gonnasay, and I'm goingtowriteanother.
Therewego.
I'm gonnawriteanotherfunction.
Let's actuallycallit, uh, a blobhereandlet's say, consoledotlogblob.
I'm tryingtodemonstratingthisis a littlebitabsurd.
I don't demonstratetheprocessofloadingthefileandso, uh, loadingthedateofthefileitself.
So I needtoturnthatdatainchpathitself.
And I think I cansaythatthroughyour l createobjectyour l andthenimage.
So I needtomake a youEarloutofthatblob.
Solet's lookatthisandwecansee.
Therewego.
There's Theoimage, and I wasjustJustsoyouseewhatitlookslike?
I'm goingtoconsolelogimagedotsource.
Uh, andyoucanseethat's actuallyWell, now, holdon.
That's notwhat I wanttodo.
Justcurious.
DoesthisdoNo.
Yeah, whatever.
Letmedothispartagain.
Wepullupthedocumentationpage, sowehavethat.
Sorry.
Um, sothetruththatthestoryhereit's greenagain, theirroomsand I lookoverhisgreenandpeoplecanactuallymaybeseeme.
Thetruestoryhereisthat I can't simplyjustassign a blobofdatatoanHTMLelementssourceproperty.
Sowhat I needtodohereis I actuallyneedtocreate a u r l outofthatdata.
Andinfact, that's what's expectedthere.
I mean, I couldactuallyjustputthestringrainbowdot j peg.
Sincethefilesthereandthat's a path.
Butthat's notwhat I'm doinghere.
I'm tryingtodemonstratethefetchfunction, so I'm loading a localfile, gettingthedata, socwiththatfileandthenturningitbackinto a Eurailpaththat I caninsertinto a domelement.
Sothewaytodothatiswith a particularfunctioncalledCreateObject, Earl.
Sothisfunctionis a functionthattakes a fileblobormediasourceobjectandcreatesanobject.
You'reillfromit.
Sonow I cansay, uh, youareelJoreldotCreateobject.
Youare l blob.
Andnowthisisthewholeprocess.
Fetchtherainbow, turnthewrist, earnthebodyoftheresponsefromthatfetchoperationto a blobofdata, turnthatblobofdatainto a your L andinsertitintoanimageelementssourceattributes.
Andherewegobacktohere a Allright, sothisisthewholeprocess.
Butlet's do a cupsheretostreamlinethecode.
I couldhavewrittenittheway I'm abouttoshowyouoriginally, but I liketostepthroughthingsincrementally.
Soonething I coulddois I coulduse a rowsyntax, whichis a shorthandwayofdefining a functioninsteadofusingthekeywordfunction I cansayequalsequalsgreaterthanwego, right.
Andthenhere I canalsodothesamethingwiththeBlob.
Sothisis a wayofsortsstreamliningshorthand, thefunction.
Now, anotherthing I coulddois I don't actuallyneedtohavethisconsoledotlogso I canactuallyremovethesecurlybracketsandright, andandremovethereturnkeyword.
Andactually, justwriteitlikethis.
Sowhenthisis a reallyniceshorthand, anyerrorthatoccursthroughoutthisentireprocesswillendupdownhere.
So I don't havetohave a sandalingthingforeverysingleone.
Andyouthoughtthisvideoisover.
Let's makeonemoresmallimprovementonthis.
Let's actuallyrunthistomakesureit's working.
00 Unexpectedistokenair, so I'm alwaysmakingsyntaxerrorswhen I'm writingcode.
Soawakeis a keywordthatallowsmetowrite a sequenceofthatreturnpromiseswithoutusingdotThenso I cansayjustconstantresponseequalsFetchrainbow.
Thisisanasynchronousfunction.
So I needtosayawait.
Then I cansayconstantblobequalsawaitresponsedotblob.
Andthen I canjustdotheselasttwopiecesrighthereandnowwecanseethisisexamcode, but I'm using a weightandthe a sinkandawaitkeywords.
So I'm writingan a sinkfunctioncalledFetchRainbow.
I fell.
I convertedto a blob.
Then I insertedintothedomelement.
Andlet's justseeifthisworks.
Westillhaveallright.
Sohopefullythisvideogivesyou a senseofwhatthefetchfunctionis, howyouuseit, howitintegrateswithjavascriptpromisesaswellasandwaitkeywords.
AndthiswillgiveyouthesortoffoundationalelementforwhenfetchappearsinallsortsofotherexamplesandtutorialsthatinvolvedEphraimand a P I orsomelocalfileorotherthings.
Andinfact, eventhoughfetchissomethingthat's justhereinthebrowser, I'm goingtoshowyoufetchinservicesideprogramwithJavascriptinNoDuchessaswellin a futurevideo.
Thanksforwatching.
Umallright, letmesay I probablyshouldhaveaddedtheerrorhandlinghere.
Yeah, uh, letmesee.
Well, it's stillthelaw.
I thoughtmaybethelagwouldsortofcleanitselfup.
Um, yeah, I'vetriedtofix s snakeass.
Didhetrytofixit?
I triedtofixthelagmanytimes.
I thinkithastodowithmycold.
Frankly, um, soletme I'm gonna, umAnd I wonderhow I'm gonnaadd a littlebitofstuff.
Onemorethingaboutwritingyourownasynchronousfunctionusingthe A sinkkeywordthisfunction, right?
Everything's happening.
A synchronouslyinhere.
Thisisreallyjustwhat's a syntacticsugarTomakethewayyouwriteyourcodeEasiertoreadandfollow.
Butultimately, it's allaboutasynchronousevents.
Sothisinfactbydefinitionautomaticallyreturns a promise.
So I couldjustdosomethinglike, say, return.
Yea, right.
Thisisverysilly, but I'm justgonnareturntheword.
Yea.
Andthen I couldaddif I wantedtochecktohaveaneventforwhenthisfinishes I canactuallysaythat.
Then I cansayresponseconsoledotlogresponseandthen I canalsosaydotCatchGotoanotherline, please.
I couldsaydotCatchanerrorconsoleunsoldoutlogerror.
Sothisis a verysimplewayofdoingsometypeoferrorhandlingwhere I havenowwrittenthe a sinktheaithinkfunctiontousefetchtousevetchwhenit's done, I couldn't returnmoreinformation, right?
I couldactuallydesign a wholesortoflikeprotocolanddostuffhere, but I'm justwanttoseethatitworkedtoconsolealongthatoriftherewasanerrortoconsolelongtheerrorand I shouldgetinthehabitofsayingconsoledoterrorinsteadofcounseldotlogforairitself.