Spent hours trying to get the last exercise working. But that feeling of finally getting the image up and running was priceless. I did a lot of the same things as you did and ran into similar errors, the key word was 'buffer'. Once I got to that then I knew I was close to the solution. Found a solution on stack overflow that converted blob into an array buffer and then buffer. The real deal of this series is the exercises. Even though we haven't built projects but because we have been practicing the theory in the exercises, it feels like I've got some level of grasp on the fundamentals :)
Thanks for sharing this, Rajea! It's great to see how this process was for you as this is truly how it works in "real life" too as we build applications both ourselves or on teams. The struggle, then incremental progress, then more struggle and repeating is exactly what it takes, haha! I'm glad the exercises are valuable and helping prepare us for these trickier subjects too! 😊
As someone who already has experience with other languages and APIs I was not expecting the last exercise to whoop me so hard 😂😂. Amazing little challenge.
Was able to do all of them relatively easily, I'm gaining confidence ahah. These lectures and exercises are truly amazing sensei Nader 😁. On number 3 I used `new Int8array(arrayBuffer)` and just passed that into fs, so I guess there are different ways to satisfy the buffer requirement. Can't wait to start the project next, hopefully I can tie together all of the concepts you've taught us.
Awesome work! It's great to see you try and test different ways yourself - there are so many different solutions and ways to structure even something like this 🤓
Hi Nader and everyone, I kind of found a trick that helps in this process of searching how to do a speciffic thing. It is called Blackobox, a vscode extension that uses AI to predict what you want to write next and also answers code related questions. I used it now and it predicted the whole code for me, of course, I had to do few modifications, but it predicted directly that I need the arrayBuffer() and the Buffer.from() Which was fo great help. Of course, I do not recommend using this while learning because solving a problem like this will help you understand different concepts, but if you get really stuck or when you actually work, this tool may be of great help and boost your productivity.
hi i have two questions: the catch and then methods, are there for replace the typically resolve and reject of promises. And wich is the difference between response.json() and JSON.parse(response) their works are the same but the lastly doesnt Work. Thank you, grettings from Argentina
Hey Quark, really good question! We cannot do JSON.parse(response), because the JSON.parse function expects a STRING (text). Response is a Response OBJECT, hence why it won't work. If we turn the response body in to a string using response.text(), then we can use JSON.parse on that string result. This last part is exactly what response.json() does in one step - hope that helps! 🙂
@@TechWithNader hi and a lot of thanks, i really apreciate that you took time for response me. And sorry i cannot get the anwser for the first. the then method is replacing the resolve method? thanks you a lot
@@TechWithNader hi , thanks you agaian, I let you here a little bit of information that i've found . The array buffer is an arrray of a binray sequence in 64 base. you can create an arraybuffer from an normal string or a number. A buffer is a type of data that changes that base. The diferrence beetween arraybuffers y blob, is that arraybuffers can be manipulateds while blob is inmutable. So there is a lot of times where blob is not going to be able to read, and then we must use arrabuffers whos are going to let us modify them.
SPOLER ALERT I did it Nader exercise 3 is finally done..😌😌 we just had to fetch our image, parse as buffer, convert into int32array, and fs into a new file with appendFile.. It was a struggle and alot of trial and error but I was able to see the beautiful image in another file lol
SPOILER*************************** My code ended up different than your solution, is there anything I should omit or change about my code? I know i chose some dumb variable names lol import fs from "fs/promises" const imageFetch = fetch("w.wallhaven.cc/full/l8/wallhaven-l83o92.jpg"); const asyncFunc = async () => { const result = await imageFetch; const parsedImage = await result.arrayBuffer();
const ImageintoInt32Array = new Int32Array(parsedImage);
Very nice work! This was definitely a doozy to get it in to the right format to actually save, as you found out, haha! Your code look good though - very clear (apart from your awesome variable names 😉)
That's funny, for the third exercise that's exactly what happened to me! I started with the blob object and the error showed in the terminal redirected me to the buffer process. Finally I came up with this and it was really satisfying! fetch(genericUrl) .then((response) => { return response.arrayBuffer(); }) .then((obj) => { return Buffer.from(obj); }) .then((buffer) => {
Nice work, Gabriele! This one was definitely quite tricky so well done finding the solution yourself - it really is so satisfying to see it work once you do 😊
3rd exercise took me 3hrs to figure out!! OfCourse took a lot of breaks in between. Thanks Nader, you are an awesome teacher.
Your thought process really helps! I found myself reading the code out loud trying to explain it to myself in a simple way. It's great!
Spent hours trying to get the last exercise working. But that feeling of finally getting the image up and running was priceless. I did a lot of the same things as you did and ran into similar errors, the key word was 'buffer'. Once I got to that then I knew I was close to the solution. Found a solution on stack overflow that converted blob into an array buffer and then buffer. The real deal of this series is the exercises. Even though we haven't built projects but because we have been practicing the theory in the exercises, it feels like I've got some level of grasp on the fundamentals :)
Thanks for sharing this, Rajea! It's great to see how this process was for you as this is truly how it works in "real life" too as we build applications both ourselves or on teams. The struggle, then incremental progress, then more struggle and repeating is exactly what it takes, haha! I'm glad the exercises are valuable and helping prepare us for these trickier subjects too! 😊
As someone who already has experience with other languages and APIs I was not expecting the last exercise to whoop me so hard 😂😂. Amazing little challenge.
Super high quality stuff! Thank you for this awesome content
You're very welcome, Gavin! Glad you're finding it helpful and much more to come 😉
Thanks once again for this exercise video. Helped in no small way in getting me to understand. Gracias.
You're very welcome, Trae! This was a really fun one to make and explain - I'm glad you learned from it 😊
excellent video keep up the good work
This was a tough one, lol. Great content 📑 as always!
Yeah, this one was pretty tough but hopefully also more satisfying 😉
Was able to do all of them relatively easily, I'm gaining confidence ahah. These lectures and exercises are truly amazing sensei Nader 😁.
On number 3 I used `new Int8array(arrayBuffer)` and just passed that into fs, so I guess there are different ways to satisfy the buffer requirement. Can't wait to start the project next, hopefully I can tie together all of the concepts you've taught us.
Awesome work! It's great to see you try and test different ways yourself - there are so many different solutions and ways to structure even something like this 🤓
Thanks soo much bro nice content
Thanks Jeremiah! You’re very welcome! 😊
@@TechWithNader haven't been online for some days. I'm just seeing the new videos
Hi Nader and everyone, I kind of found a trick that helps in this process of searching how to do a speciffic thing. It is called Blackobox, a vscode extension that uses AI to predict what you want to write next and also answers code related questions.
I used it now and it predicted the whole code for me, of course, I had to do few modifications, but it predicted directly that I need the arrayBuffer() and the Buffer.from() Which was fo great help. Of course, I do not recommend using this while learning because solving a problem like this will help you understand different concepts, but if you get really stuck or when you actually work, this tool may be of great help and boost your productivity.
hi i have two questions: the catch and then methods, are there for replace the typically resolve and reject of promises. And wich is the difference between response.json() and JSON.parse(response) their works are the same but the lastly doesnt Work. Thank you, grettings from Argentina
i literally asked the first question seconds before that you explained it. But PLEASE I NEED THE SECOND
Hey Quark, really good question! We cannot do JSON.parse(response), because the JSON.parse function expects a STRING (text). Response is a Response OBJECT, hence why it won't work. If we turn the response body in to a string using response.text(), then we can use JSON.parse on that string result. This last part is exactly what response.json() does in one step - hope that helps! 🙂
@@TechWithNader hi and a lot of thanks, i really apreciate that you took time for response me. And sorry i cannot get the anwser for the first. the then method is replacing the resolve method? thanks you a lot
@@soquark2648 Hey Quark! Sorry about that - the .then happens on a resolve yes, and the catch happens on a reject 😄
@@TechWithNader hi , thanks you agaian, I let you here a little bit of information that i've found . The array buffer is an arrray of a binray sequence in 64 base. you can create an arraybuffer from an normal string or a number. A buffer is a type of data that changes that base. The diferrence beetween arraybuffers y blob, is that arraybuffers can be manipulateds while blob is inmutable. So there is a lot of times where blob is not going to be able to read, and then we must use arrabuffers whos are going to let us modify them.
SPOLER ALERT I did it Nader exercise 3 is finally done..😌😌 we just had to fetch our image, parse as buffer, convert into int32array, and fs into a new file with appendFile.. It was a struggle and alot of trial and error but I was able to see the beautiful image in another file lol
SPOILER***************************
My code ended up different than your solution, is there anything I should omit or change about my code? I know i chose some dumb variable names lol
import fs from "fs/promises"
const imageFetch = fetch("w.wallhaven.cc/full/l8/wallhaven-l83o92.jpg");
const asyncFunc = async () => {
const result = await imageFetch;
const parsedImage = await result.arrayBuffer();
const ImageintoInt32Array = new Int32Array(parsedImage);
fs.appendFile('parsedImageFrom3.jpg', ImageintoInt32Array)
}
asyncFunc();
Very nice work! This was definitely a doozy to get it in to the right format to actually save, as you found out, haha! Your code look good though - very clear (apart from your awesome variable names 😉)
took me 1 hour after repeatedly watching 3rd exercise to understand the solution.
That's funny, for the third exercise that's exactly what happened to me! I started with the blob object and the error showed in the terminal redirected me to the buffer process. Finally I came up with this and it was really satisfying!
fetch(genericUrl)
.then((response) => {
return response.arrayBuffer();
})
.then((obj) => {
return Buffer.from(obj);
})
.then((buffer) => {
console.log('Done!');
fs.writeFile('img.jpeg' , buffer);
});
Nice work, Gabriele! This one was definitely quite tricky so well done finding the solution yourself - it really is so satisfying to see it work once you do 😊