Это видео недоступно.
Сожалеем об этом.
Deep Dive into Blobs, Files, and ArrayBuffers
HTML-код
- Опубликовано: 15 авг 2024
- This tutorial explains exactly what Blob, File, ArrayBuffer, DataView, and TypedArray Objects are and how you can use them to create your own custom Blob and File objects or edit the binary data inside an object.
Code from video: gist.github.co...
Video on File and FileList - • HTML5 File and FileLis...
Video intro to TypedArrays - • Intro to Typed Arrays ...
ArrayBuffer Reference - developer.mozi...
DataView Reference - developer.mozi...
TypedArray Reference - developer.mozi...
0:00 Concepts
7:16 ArrayBuffer
11:53 Blobs
12:37 Files
14:10 Saving Files Locally
You're one of the VERY few on youtube who can explain some of the most complex topics in the simplest possible manner. Thank you!
I’m speechless. This is amazing content. I saw the concept of a blob when I was researching how to manipulate the clipboard but never understood it. Great explanation. I eagerly anticipate your next videos!
Amazing. I wish more tutorials were this clear. Thank you very much!
Thank you Sir! You explain things So Well. I had initially listened to this in my headset at work to make sure it was going in a direction that could help me learn more about what a blob even is.. My shield has a partition called "staging" and they provided an image simply called "blob" and man than thing when loaded into hxd is packed with headers, avb included, and Encrypted! I didn't even know what "blob" meant, so Thank You for even providing that bit for us beginners
This was so beautiful, you might think I commented on the wrong video but no. Programing is like magic and it's so beautiful magic as well.
Awesome! I've never understood files properly. Thank you Steve!
One of the best, if not the best, Channele for FrontEnd technologies and deep dive. Thanks sharing that much to us.
I'm a font designer. And this videos gives me a lot info how to parse/working with a font file via js. thank you.
These might help you too - ruclips.net/video/Ez1huZ-kfY4/видео.html
ruclips.net/video/FmbtezH6yqc/видео.html
Wow thanks,I had to work with Blobs today and did not know what it was so felt uncomfortable with it, now i understand
So helpful and clear to understand. Thank you!
Amzing video, easy to understand, thank you so much
This is by far the best explanation I've seen on blobs/typedArrays
Best explanation I have ever seen about this topic!
Fantastic! Keep up the great work steve.
Super-useful esp. with the file creation! Thanks for sharing! I am looking forward to watching an episode on SharedArrayBuffer. I recently considered using it with a worker, but wasn't sure how to determine the buffer size for array of objects with UTF-8 properties. (Besides there are some security concerns, solved by headers). Quite a story to it.
Recently used Blob to create a csv files while working on some serverless mini project, pretty handy
thank u for this amazing quality content
Appreciate you and your channel!
Great explanation! Thanks!
I like the explanation as you're with example with ES6 latest JS - thanks
Thanks for the explanation.
As I commented below the first video of the series, it's a really interesting topic. Thanks Steve and more around it please! I always wondered how it was possible to generate files in the browser (I have seen it in some web apps, from csv to image and I was like, "this can't be created on the server, given the time it takes").
There are more file related videos coming
Thank you for this video for explain these thing because i had a problem for understanding its before i watch your video
i love your content because you helped me and i will follow your channel
great content Steve, keep the good work
Incredibly useful! Thanks so much!
This is awesome, thank you for this lession!
Beautiful! Thank you, definitely subscribed.
It made me happy 😊
Your videos are very informative. Thank you.
Bro, you rock! Excellent explanation 🤘😎🤘
Great! Thank you!
Thank you steve
great video thank you!
That was very informative. Thanks for that😄
Great content and explanation, thank you so much!
17:02 Thank you for the high level view. But I'll remind you the thumbnail promised a deep dive, and I was really hoping for more information than you provided.
It is part of an unfinished playlist of videos that has a lot more information.
great video sir, thank u for your great work💛💛
great explanation. thank you 🙏
Thank you!
Great. Thanks.
Very helpful. Thanks
let buffer = new ArrayBuffer(12);
const intArray = new Int32Array(buffer);
console.log(intArray.buffer);
const int8Array = new Int8Array(buffer, 12);
int8Array[0] = 200;
console.log(intArray.buffer);
Tell me how is the line const int8Array = new Int8Array(buffer,12) not throwing an error, as even though it is using the underlying buffer which is of byteLength of 12 bytes, hence last byte is 11th, but we are trying to view int8Array from the 12th byte. And even after assigning int8Array[0] = 200; the underlying buffer contents remain unchanged.
Also if I am changing the byte offset from 12 to 13, then it is throwing error showing 13 is outside the bounds of buffer.
Thanks!
Thank you very much! 😊🙏😀
I love this. thanks.
so nice video, thanks
Hi, thanks for this lesson, could you tell please, how or when we convert 104 and 105 into h and i? I did`n see this moment in the code.
Those are the ascii values for h and i.
When you put the array buffer inside the file object and tell the file that is it type plain text then it treats the bytes as the numeric value of text characters
thank u it's so helpful
Thank you so much
hi was unexpected 😀
Sir, how can i send an array buffer after reading a file in Javascript(File reader) to node.js backend and write a new file using that array buffer in file system
You use fetch to upload the data to the back end. -ruclips.net/video/ubHIayJKhac/видео.html
I don't have a video on handling Array Buffers in NodeJS yet
@@SteveGriffith-Prof3ssorSt3v3 So how can i send very large uint8array thorough post request, if i use content-type: application/json
It gives an error saying, payload too large.
@@pkyadav1986 the server can set limits on the allowed size for various http methods.
How big are you talking? A websocket and streaming is an alternative approach for big files
@@SteveGriffith-Prof3ssorSt3v3 I am sending a file after reading it using js file reader and i am using content-type: application/octet-stream and i am receiving the data in express js backend and writing a new file using that data by doing filesystem.appendFile(), the file is written but it does not open.
Sorry. I don't have any tutorials about dealing with received files on the server with Express or NodeJS.
Is there a way to convert an ArrayBuffer to string then turn it back to thr same ArrayBuffer?
yes. That is basically what you do with streams and TextEncoder
nice voice
Hey man. I have a question.. I've been trying to code a Simple voice recorder
That playback at the same time im recording. So How can this be possibe in javascript ? ..
I made this video a few years ago as an introduction to that type of thing - ruclips.net/video/K6L38xk2rkk/видео.html
You will probably also want to look at the Web Audio API - developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
Media Stream Recording reference - developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API
@@SteveGriffith-Prof3ssorSt3v3 ths man
Steve do you have a paid course?
Just the program that I run at Algonquin College. I made the decision a long time ago to just put my tutorials online for free for everyone. I make money through ads and super thanks.
Please mention JavaScript in video title.
8:14 so unsigned char. God I hate normalizing every data type of non-C languages into C-like datatypes.