I appreciate your channel so much. I randomly came across it while giving myself a refresher on a few things, and your JavaScript playlists are excellent. Now we get this gem??? Super awesome!
You're one of the few who could actually TEACH programming concepts. Thanks for creating rich content for us, I appreciate it. This could have easily been a premium course. I, myself, am a content creator/instructor, and I know how hard and time consuming it really is to put together a course with this quality and chaining/relating each section to each other. Again thanks for sharing such a high quality tutorial with us, free of charge.
Well, that is what I do for a living. I run the Mobile Application Design & Development program at Algonquin college in Ottawa, Canada. I originally started this channel as a resource for my own students but then it grew organically. Now I know of at least a dozen college programs that use my videos as part of their curriculum.
Wow... This is basically what I need. Just built a few apps (including a weather app) using fetch API and wanted to get deeper into the subject because I used multiple fetch calls in the weather app and wanted to organize them better (among other things). This is perfect timeing for something I really needed. Thank you!
I thought ColorCode was good, but then this guy appeared in my playlist while I was sleeping! OH MY GOD! You are a wonderful teacher / presenter!!! The BEST!
also finally we got to see you on your thumbnail! i would say you are the best js GURU, i don't know what the youtube algo is doing(don't know why so underrated!)
I will start this tomorrow, I'm searching for "THAT " one video that will lead me back on my path again because it seems that I'm currently not moving forward as of late, I hope this video is it!
About time somebody actually produced an informative/useful/enlightening/dummyfree/fun to watch vid. Many thanks. Change your channel name to Jesus helping the poor.👏
Solid content! If you can master the Javascript Fetch API you will have a really good understanding of how the frontend end of an application communicates with the backend.
Hey Steve, thank you for the amazing course! Very generous of you to share so much knowledge. I do have a question: - the server isn't working for me properly, do you have a video or resource that goes over setting one up ourselves like you did ?
You are the best! Thank you very much, your content is perfect. You speak very clearly and calmly. I'm not a native English speaker, but it's very easy to understand what you're saying. I'm learning a lot from you, thank you very much Steve! best youtube channel.
I wanted to thank you twice xD Thank you for sharing your knowledge with the world. If you by chance were looking for some video ideas: - Development to Production process - How do you know if your basic static website is secured enough to go online? - More in depth on unit tests - Authentication for Registration and Logging in (with testing) Just some suggestions! I look forward to more of your videos :)
Thank you again! I have a video where people can post requests and vote on the requests - ua-cam.com/video/LCezax2uN3c/v-deo.html On my own list I have over 2000 videos that I want to make. :) Just a question of time. unit tests and web authentication are two topics that I hope to do soon though.
You're a "manancial" of information... complete, relevant and exaustive information... but man... 2h20m!!! (with pausing for testing, etc. etc.) that is exausting !!! ;-)
This is by far the best fetch tutorial. Thank you so much for taking the time. A slow peace explanation really makes the difference for some of us to understand better
On part 5 it feels like your code in vulnerable to XSS. I've heard quite a lot about that and I am in the point of my dev journey where I want to understand how to write code that isn't vulnerable in vanilla js. Would you mind explaining how the code in the video is vulnerable pls? How to not make it vulnerable? Thank you :D
I love to learn something in detail. It's a really helpful tutorial. But sir, you created a response object (0:32:35 ) but didn't use it. Is there any case to use it?
When saving files in the cache via the Cache API, I create custom Response objects all the time. When working with PWA and service workers, you will need to send back custom Response objects too.
hey there! thanks for your simple and deep speech , just one small question when i write export at the first before writing function i get an error what is that for? thanks if you help me.
Thank you so much for this excellent detailed tutorial. Appreciate your teaching style greatly. I am having a little trouble with fetch in section 4 (Response objects) timestamp 43:58. I am trying to fetch the fontstr and not sure how to apply it to the CSS. Here is my code. Will be grateful for any help. fetch(fontstr) .then((resp) => { if (!resp.ok) throw new Error('Invalid response') return resp.blob() }) .then((blob) => { let fonturl = URL.createObjectURL(blob) let element = document.getElementsByTagName('h1')[ 0 ] let myFontFace = new FontFace('myFont', 'url(' + fonturl.blob + ')') console.log(myFontFace) element.style.fontFamily = myFontFace // console.warn(err.message))
There is no global handler for fetch calls. You can send an abort signal to kill a call. - ua-cam.com/video/3yTs1NJZyBk/v-deo.html You can wrap a collection of fetch calls in a Promise.all( ) or Promise.race( ) or Promise.allSettled( ) call. ua-cam.com/video/p0teXNcgR_Y/v-deo.html
2:18:41 WoW this definitely as you said "the last fetch vid I'll need" well done well structured and I like your sense of humour ❤😂. I'm amazed by the power of JS & Browser on handling all that seamlessly.
Hello Professor, @35:37 in your video, you mentioned that there is a FOOTER as well, but I couldn't find any information about it online. Could you please assist me in finding resources to learn more about it? Thank you
The standard has actually changed quite a bit since I first started working with HTTP requests. There is now a crc calculation in the footer of a gzipped file. So, if gzip is being used to compress the resource that is being transferred over http, then that is where you will find the crc. There can also be crc checksum values in the TCP/IP layer. These are backed up by other crcs that can be found in the Ethernet layer. All this to say, you don't need to worry about crc in your fetch calls. However, if you are interested in providing some more integrity for your files - script and link tags in your HTML - and you want to make sure that they are "verified" or not tampered with or modified, then you can add the integrity attribute to those tags. ua-cam.com/video/5a3LthQ2xCI/v-deo.html
Stumbled across your channel randomly and I'll have to say yours is the best explanation on yt and that's saying a lot because I have already watched 100s of them trying to make sense of javascript. Thanks a lot Steve. 😊
Thank you so much sir! I really like your teaching style, no flashy edit, no colory stuff just good explantions of concepts, just to the point. I really wonder if you could have the time to make videos for basic web apis outside the flashy now days frameworks
Proffessor is the best.. i mean it. Any time i want to understand more about web development stuffs then i come to your channel. Thanks for all you do @Steve Griffith ☺☺.
OMG! the way you explained these concepts maked them look so simple you a wonderfull teacher and an amazing human being , i can't thank you enough now matter what i write , thank you from the heart.
Hi Steve. Thanks for this valuable tutorial. If I may ask, innerHTML method isn’t recommended coz of performance and security issues. Does it mean using it alongside .map() and .join() methods makes it less secure and enhance performance
The source of your data is the source of any insecurities. If you don't trust your data source then you need to validate the data before using it on your page. InnerHTML gave poor performance a long time ago. Using it once to parse and append a chunk of html will still be faster than calling append repeatedly.
Hi Steve, I really appreciate your dedication to your videos. I have gained so much value. Thank you. Is there any plans on realising videos for MVC / Design Patterns?
Thank you, professor, as always. For the 2nd module (try-async.js). Is it not possible to throw a new Error object and save it in a variable? I'm getting an "Expression expected" and not sure why. I was thinking of creating a custom error object to reference in the try catch block. if(!response.ok) { let myVariable = throw new Error('not a valid response') }
You can put an error object into a variable like this: let err = new Error(`message`); However, as soon as you throw the error it goes immediately to the catch. No assignment takes place.
@@SteveGriffith-Prof3ssorSt3v3 Interesting, I'll look more into it. See if it's possible with a second await keyword or perhaps using setTimeout. You dont have to respond with a yes or no; let me dig this rabbit hole. =)
innerHTML with string interpolation is nice but it's unsafe. You should never use it with data coming from the outside, you risk having XSS. It's much safer to build html element with document.createElement then use the innerText/textContent setters to safely write the content on the page.
what I love about your videos is that I know I’m always going to learn something new, even for topics I’m already familiar with. thank you for the depth, detail and care that you put into your content!
Neat as always, i think a lot of devs need this, especially when -tech leading- teams like vercel are using the fetch api as their primary method to handle http transactions.
I appreciate your channel so much. I randomly came across it while giving myself a refresher on a few things, and your JavaScript playlists are excellent. Now we get this gem??? Super awesome!
Thank you so much!
I've seen a lot, and within 5 minutes I can tell, this guy is a natural real life teacher not just a UA-camr. Name checks out. Love it
Hands-down, one of the best teachers out there, regardless of discipline.
You're one of the few who could actually TEACH programming concepts. Thanks for creating rich content for us, I appreciate it. This could have easily been a premium course. I, myself, am a content creator/instructor, and I know how hard and time consuming it really is to put together a course with this quality and chaining/relating each section to each other. Again thanks for sharing such a high quality tutorial with us, free of charge.
Well, that is what I do for a living. I run the Mobile Application Design & Development program at Algonquin college in Ottawa, Canada.
I originally started this channel as a resource for my own students but then it grew organically. Now I know of at least a dozen college programs that use my videos as part of their curriculum.
Wow... This is basically what I need. Just built a few apps (including a weather app) using fetch API and wanted to get deeper into the subject because I used multiple fetch calls in the weather app and wanted to organize them better (among other things). This is perfect timeing for something I really needed. Thank you!
I thought ColorCode was good, but then this guy appeared in my playlist while I was sleeping! OH MY GOD! You are a wonderful teacher / presenter!!! The BEST!
You are the best, the way you just handle the code, your calmness your warm voice all come with a very sweet rhythm and atmosphere of learning.
Thumbnail game on point!
Figured it was time to put some effort into those. :)
Great content this is what i'am looking for and i found it Thank you
I was waiting for this type of compiled videos!
finally you are doing this!
It might sound cheesy but you are the best on the youtube!
also finally we got to see you on your thumbnail!
i would say you are the best js GURU, i don't know what the youtube algo is doing(don't know why so underrated!)
I will start this tomorrow, I'm searching for "THAT " one video that will lead me back on my path again because it seems that I'm currently not moving forward as of late, I hope this video is it!
Good luck! 👍
@@SteveGriffith-Prof3ssorSt3v3 Thank you for this video! Its so easy to follow, Thanks for making me move forward prof!
About time somebody actually produced an informative/useful/enlightening/dummyfree/fun to watch vid. Many thanks. Change your channel name to Jesus helping the poor.👏
Solid content! If you can master the Javascript Fetch API you will have a really good understanding of how the frontend end of an application communicates with the backend.
extremely amazing content, Thank you so much 🤩🔥
Can't thank you enough for your effort to make such amazing tutorial. It was fun to watch and clear enough to understand. Take love professor♥
Thank you very much!!!Excellent explanation
Hey Steve, thank you for the amazing course! Very generous of you to share so much knowledge. I do have a question:
- the server isn't working for me properly, do you have a video or resource that goes over setting one up ourselves like you did ?
You the BEST...much love from Nigeria
You are the best! Thank you very much, your content is perfect. You speak very clearly and calmly. I'm not a native English speaker, but it's very easy to understand what you're saying. I'm learning a lot from you, thank you very much Steve! best youtube channel.
I can rewatch this video 10x times and I not get tired of it 😁
Awesome tutorial. Thanks!
Thank you Steve!
Unit testing with React would be really helpful and especially how to mock API calls since I don't fully understand it.
Thank you very much!😊🙏👍
I wanted to thank you twice xD
Thank you for sharing your knowledge with the world.
If you by chance were looking for some video ideas:
- Development to Production process
- How do you know if your basic static website is secured enough to go online?
- More in depth on unit tests
- Authentication for Registration and Logging in (with testing)
Just some suggestions!
I look forward to more of your videos :)
Thank you again!
I have a video where people can post requests and vote on the requests - ua-cam.com/video/LCezax2uN3c/v-deo.html
On my own list I have over 2000 videos that I want to make. :) Just a question of time.
unit tests and web authentication are two topics that I hope to do soon though.
You're a "manancial" of information...
complete, relevant and exaustive information...
but man... 2h20m!!! (with pausing for testing, etc. etc.) that is exausting !!! ;-)
You're allowed to watch it in chunks. 😀
1:53:14 guess who was getting around with cors 😂😂😂😂💔
White Kevin White Barbara Garcia Helen
Shouldn't we just use Observables (RxJs) or Project Reactor nowadays? Is the Fetch API (promises) still the "way to go"?
Yes. Using the vanilla js core features are always better if you know what you're doing
your amazing this video was so useful for me
This is by far the best fetch tutorial. Thank you so much for taking the time. A slow peace explanation really makes the difference for some of us to understand better
this is perfect prof, thank you so much for this.
Awesome tutorial! Always love your videos
On part 5 it feels like your code in vulnerable to XSS. I've heard quite a lot about that and I am in the point of my dev journey where I want to understand how to write code that isn't vulnerable in vanilla js. Would you mind explaining how the code in the video is vulnerable pls? How to not make it vulnerable?
Thank you :D
XSS is a whole other long tutorial on its own.
Have got a good feeling just seeing this 2 hour plus lecture ❤. That too on fetch API
I really enjoyed it. Thank you
I love to learn something in detail. It's a really helpful tutorial.
But sir, you created a response object (0:32:35 ) but didn't use it. Is there any case to use it?
When saving files in the cache via the Cache API, I create custom Response objects all the time.
When working with PWA and service workers, you will need to send back custom Response objects too.
your work is so clean!
hey there!
thanks for your simple and deep speech , just one small question when i write export at the first before writing function i get an error what is that for?
thanks if you help me.
What kind of error? What is the error message? Without seeing your code I don't know what you have done wrong.
Thank you so much for this excellent detailed tutorial. Appreciate your teaching style greatly. I am having a little trouble with fetch in section 4 (Response objects) timestamp 43:58. I am trying to fetch the fontstr and not sure how to apply it to the CSS. Here is my code. Will be grateful for any help.
fetch(fontstr)
.then((resp) => {
if (!resp.ok) throw new Error('Invalid response')
return resp.blob()
})
.then((blob) => {
let fonturl = URL.createObjectURL(blob)
let element = document.getElementsByTagName('h1')[ 0 ]
let myFontFace = new FontFace('myFont', 'url(' + fonturl.blob + ')')
console.log(myFontFace)
element.style.fontFamily = myFontFace // console.warn(err.message))
If you are fetching blob then you are fetching a file
If it is a string then use the text() method not the blob one
Gold! Thank you professor 🙏🏼
The thumbnail title is not a lie
Great content! What about interceptor, can we intercept all fetch calls. If not we can always write a wrapper.
There is no global handler for fetch calls. You can send an abort signal to kill a call. - ua-cam.com/video/3yTs1NJZyBk/v-deo.html
You can wrap a collection of fetch calls in a Promise.all( ) or Promise.race( ) or Promise.allSettled( ) call. ua-cam.com/video/p0teXNcgR_Y/v-deo.html
👌👌👌👌👌👌👌
2:18:41 WoW this definitely as you said "the last fetch vid I'll need" well done well structured and I like your sense of humour ❤😂.
I'm amazed by the power of JS & Browser on handling all that seamlessly.
You are a Genius ❤❤❤❤
Hello Professor, @35:37 in your video, you mentioned that there is a FOOTER as well, but I couldn't find any information about it online. Could you please assist me in finding resources to learn more about it? Thank you
The standard has actually changed quite a bit since I first started working with HTTP requests. There is now a crc calculation in the footer of a gzipped file. So, if gzip is being used to compress the resource that is being transferred over http, then that is where you will find the crc.
There can also be crc checksum values in the TCP/IP layer. These are backed up by other crcs that can be found in the Ethernet layer.
All this to say, you don't need to worry about crc in your fetch calls.
However, if you are interested in providing some more integrity for your files - script and link tags in your HTML - and you want to make sure that they are "verified" or not tampered with or modified, then you can add the integrity attribute to those tags. ua-cam.com/video/5a3LthQ2xCI/v-deo.html
@@SteveGriffith-Prof3ssorSt3v3 Thank you so much, Professor.
Stumbled across your channel randomly and I'll have to say yours is the best explanation on yt and that's saying a lot because I have already watched 100s of them trying to make sense of javascript. Thanks a lot Steve. 😊
excellent content ♥. A teacher who knows stuff and most importantly who knows how to TEACH. Thank you !!!
Thank you so much sir! I really like your teaching style, no flashy edit, no colory stuff just good explantions of concepts, just to the point. I really wonder if you could have the time to make videos for basic web apis outside the flashy now days frameworks
What font are you using? I love the style of the () characters
In vscode, jet brains mono
Wow, my mind is totally blown. Ha. Thanks. Wish I had found this 2 months ago. You have answered soo many questions that I had. Love the presentation.
Wow this is amazing! Best teacher hands down!
P.s I came across your channel randomly, then realized I was following a Reddit thread and you were there!
Thank you!
this is amazing
Proffessor is the best..
i mean it. Any time i want to understand more about web development stuffs then i come to your channel.
Thanks for all you do @Steve Griffith ☺☺.
I wasn't aware of creating a URL object before to run the fetch request. I've only passed in the URL as a string, so this is new and inciteful. Thanks
You are very handsome. I am not gay. I don't know why I clarified that but you are a handsome fella.
Thanks. :)
XD
Bro that's creepy af
@@elpolodiablo5486 🤣 i know right.
@@elpolodiablo5486 lol
oh my god, I’ve watched many tutorials on YT, but this is the new type of the video I’ve never seen before.
Great work!
This tutorial provides a comprehensive overview of fetch() api, covering all the essential aspects in depth. Thanks to Steve.
amazing!
OMG! the way you explained these concepts maked them look so simple you a wonderfull teacher and an amazing human being , i can't thank you enough now matter what i write , thank you from the heart.
Your tutorials are always amazing Steve. Your old subscriber here 😊
This is by far the most extensive tutorial about FETCH. This will be my standard issue from now on.
you can not imagine how valuable this video is, I killed myself to learn these stuff in the video and all I got was documentation to read. thanks
I can't wait to dig into this!
One question - does it cover ReadableStream and WritableStream? Or do you have other videos that do?
In the bonus section it briefly touches on using Readable streams to monitor download progress.
I have other videos for streams planned though.
@@SteveGriffith-Prof3ssorSt3v3 great, thanks!
Absolutely flawless video, thank you very much!
Thank you Steve. Thank you very much my friend for the great content.
The best Explanation of the Fetch API on UA-cam.
Thank you so much Steve. You make this so easy to learn.
Sir thank you I was struggling to understand this thing but you made it so easy.
best teacher on internet thanks a lot for providing this quality content for free
the video is very helpful and informative.
This is the ultimate video i was looking for in last 24 hours, thanks for the effort, added a star to your github repo.
Hi Steve. Thanks for this valuable tutorial. If I may ask, innerHTML method isn’t recommended coz of performance and security issues. Does it mean using it alongside .map() and .join() methods makes it less secure and enhance performance
The source of your data is the source of any insecurities. If you don't trust your data source then you need to validate the data before using it on your page.
InnerHTML gave poor performance a long time ago. Using it once to parse and append a chunk of html will still be faster than calling append repeatedly.
Hi Steve, I really appreciate your dedication to your videos. I have gained so much value. Thank you.
Is there any plans on realising videos for MVC / Design Patterns?
Possibly at some point. I have literally thousands of videos on my todo list
now you are getting views what you really deserve
nice job dude! that was awesome! tks a lot!
Best API tutorial that I've seen.
This is incredible!!! Thank you so much professor!
your channel is a gold mine.
Many many thanks Steve for sharing
this tutorial is a pure gold
like always best content ever
Great content and explanations
Great content, amazing value
great video, a lot of useful info
Thank you, professor, as always.
For the 2nd module (try-async.js). Is it not possible to throw a new Error object and save it in a variable? I'm getting an "Expression expected" and not sure why. I was thinking of creating a custom error object to reference in the try catch block.
if(!response.ok) {
let myVariable = throw new Error('not a valid response')
}
You can put an error object into a variable like this:
let err = new Error(`message`);
However, as soon as you throw the error it goes immediately to the catch. No assignment takes place.
@@SteveGriffith-Prof3ssorSt3v3 Interesting, I'll look more into it. See if it's possible with a second await keyword or perhaps using setTimeout. You dont have to respond with a yes or no; let me dig this rabbit hole. =)
@@fellastout that's when the learning happens
always great content !!
This is great boss..thanks
Thank you in advance
Wait is this better than the fetch(or ajax) playlist you have
It's everything in that list put together in a connected logical way with a few new things
What a great deep dive into fetch. It feels so nice to know I can always come back to this video for fetch documentation. Thank you!
i never got it so better. really. everytime i have an issue I search this channel
Bless you Prof3ssor.
Best teacher and a great explainer!
FANTASTIC!
innerHTML with string interpolation is nice but it's unsafe. You should never use it with data coming from the outside, you risk having XSS. It's much safer to build html element with document.createElement then use the innerText/textContent setters to safely write the content on the page.
Thank you ..!!
you have to good stuff to watch !! and a very nice way of communicating the material. Peace .....
what I love about your videos is that I know I’m always going to learn something new, even for topics I’m already familiar with. thank you for the depth, detail and care that you put into your content!
Neat as always,
i think a lot of devs need this, especially when -tech leading- teams like vercel are using the fetch api as their primary method to handle http transactions.
Grate course, that's what I'm learning right now. Thank you very much!