This tutorial is one of the more advanced Javascript tutorials I have shared. I will walk you through converting image files to base64 encoded strings and uploading them to a serverless function. We'll also build the Netlify serverless function that compresses the images and sends the encoded files back to our Vanilla Javascript. There's a lot packed into this useful tutorial, but when you are finished, you will have your very own image compression application! Just starting with Javascript? Check out my full 8 hour course video: czcams.com/video/EfAl9bwzVZk/video.html
Dave may you please do not skip any part of the tut, I prefer your teaching style because you explain every thing about the content of any tut, but in this one I didn't find this style like other tuts. Thank you very much for your effort on the quality of the content you present.
C'est un des youtubers qui expliquent le mieux les choses dans tout CZcams. C'est vraiment agréable sa manière de d'exprimer. Tout est clair et précis. Merci infiniment.
Another enjoyable project to work on (and a useful app at that). Note to all, I had to downgrade the dependency for imagemin using the terminal command "npm i imagemin@7.0.1" otherwise I was getting all kinds of errors. Thanks Dave for the great tutorial, now on to the next one.
Hi Dave, First of all, thanks a ton for such an unique project. Way different than those generic ones. Ran into a 'Tiny' (pun intended) issue with the 'imagemin' version. The latest one is '8.0.1' and it is throwing a syntax error "Unexpected token E in json at position 0". Also the node console was showing issues with "require()" keyword in JS module. "errorMessage":"Must use import to load ES Module......" Tried the fix but got a similar error. Upon checking your repo, could see that you were on '7.0.1 - a 'major' change there. After downgrading the version, the application is running fine. I even cloned your repo, ran the server, everything worked but when I upgraded the version to '8.0.1', it crashed with same error. Just wanted to highlight, in case someone else runs into the same. Could you suggest if we need to somehow modify netlify serverless functions or stick to the older version?
I felt a bit defeated at the end of the tutorial until I read this comment. This is how I fixed it, although I acknowledge there could be a better way. 1. I deleted the node_modules folder. 2. I updated the version number for the dependencies in the package.json file from "imagemin": "^8.0.1", to "imagemin": "^7.0.1", 3. Then, I ran "npm i" again in the console to reinstall the dependencies. Once I did this, the app worked as expected when I ran the app using the "netlify dev" command. Thank you, Dave, for another excellent tutorial, and thank you, Sanjib, for your comment.
This is not a beginners tutorial. You should learn HTML, CSS, and Javascript first. I have tutorials for beginners in all of those languages on my channel.
This tutorial is one of the more advanced Javascript tutorials I have shared. I will walk you through converting image files to base64 encoded strings and uploading them to a serverless function. We'll also build the Netlify serverless function that compresses the images and sends the encoded files back to our Vanilla Javascript. There's a lot packed into this useful tutorial, but when you are finished, you will have your very own image compression application! Just starting with Javascript? Check out my full 8 hour course video: czcams.com/video/EfAl9bwzVZk/video.html
Dave may you please do not skip any part of the tut, I prefer your teaching style because you explain every thing about the content of any tut, but in this one I didn't find this style like other tuts. Thank you very much for your effort on the quality of the content you present.
C'est un des youtubers qui expliquent le mieux les choses dans tout CZcams. C'est vraiment agréable sa manière de d'exprimer. Tout est clair et précis. Merci infiniment.
Merci beaucoup! 🙏 That is all of the French I remember, but thank you for the kind words! 💯
Thanks Dave for your amazing Videos..they helped me much to get my first job as a Web and App Developer!
Wow! Congratulations!! This is the best compliment I could ask for. You're welcome! 🙏🚀💯
Another enjoyable project to work on (and a useful app at that). Note to all, I had to downgrade the dependency for imagemin using the terminal command "npm i imagemin@7.0.1" otherwise I was getting all kinds of errors. Thanks Dave for the great tutorial, now on to the next one.
You're welcome, William! 🚀
Awesome video, keep up the incredible work! :)
Thank you! 🙏
Awesome as always 👍😀
Thanks again!
Great, Thank you!
You are welcome!
Hi Dave,
First of all, thanks a ton for such an unique project. Way different than those generic ones.
Ran into a 'Tiny' (pun intended) issue with the 'imagemin' version.
The latest one is '8.0.1' and it is throwing a syntax error "Unexpected token E in json at position 0". Also the node console was showing issues with "require()" keyword in JS module. "errorMessage":"Must use import to load ES Module......"
Tried the fix but got a similar error.
Upon checking your repo, could see that you were on '7.0.1 - a 'major' change there. After downgrading the version, the application is running fine.
I even cloned your repo, ran the server, everything worked but when I upgraded the version to '8.0.1', it crashed with same error.
Just wanted to highlight, in case someone else runs into the same.
Could you suggest if we need to somehow modify netlify serverless functions or stick to the older version?
Thanks for the helpful note! I haven't looked at this since completing my repo and the tutorial. I would need to dig back in.
I felt a bit defeated at the end of the tutorial until I read this comment. This is how I fixed it, although I acknowledge there could be a better way.
1. I deleted the node_modules folder.
2. I updated the version number for the dependencies in the package.json file from "imagemin": "^8.0.1", to "imagemin": "^7.0.1",
3. Then, I ran "npm i" again in the console to reinstall the dependencies.
Once I did this, the app worked as expected when I ran the app using the "netlify dev" command.
Thank you, Dave, for another excellent tutorial, and thank you, Sanjib, for your comment.
Brilliant!
Thank you! 🙏
Can i build it by following your video step by step ?..i have no any background of coding..i am not student of it or computer engineer..
This is not a beginners tutorial. You should learn HTML, CSS, and Javascript first. I have tutorials for beginners in all of those languages on my channel.
Ok..sir..thankuu