Links mentioned: Details automatically generated.
summary

Speaker explains to Speaker how it works. . Speaker shares some examples of how the source is made. Speaker explains how the app works. Speaker can stop it and restart it.

Speaker explains to samir how they go between two pieces of code. Speaker shows how to do some of the things they would like to play around with in an online ide or something. Internet explorer is no longer supported. Speaker is excited about the new streams api. They are going to show some examples coming up soon. Webview is nice on safari, ios, and breaking down web pages into small chunks.

Speaker is receiving assets to be shown on web pages and sometimes they play slowly as they are loaded. There is a new streams api in javascript. It allows to process resources as they are downloading. Speaker explains how to handle, errors and cancel streams as required and how to write data streams using writable. Speaker shares with others how to transform pngs to black and white or grayscale.

Speaker wants to give a larger file and transform it as well as show a progress bar. . Speaker explains how transform streams on mdn mozilla developer network work.

Speaker explains to Speaker what is going to happen when you click the load button. Speaker is trying to figure out why their computer slows down when they load a file. Speaker is talking about streams in general. The back pressure and then teeing will lock the stream. It will create two new streams. They will come back to work and take a look at some cool stuff. Speaker will see everyone in 30 minutes for the next show-and-tell. Speaker wants to thank everyone for hanging out.

Speaker is taking part in the second break session of the day. Speaker is making progress on some stuff and wants to talk about something that they came across. Speaker met with a web developer on thursday last week to talk about some of the things they need to know.

Speaker explains to Speaker how fetching and fetching works. Speaker explains how the streams api works.

Speaker likes christchurch east chunk for curse word. Firefox 10 supports transport stream. Transformer stream allows to pipe data from chunks to a writable stream.

Speaker is interested in transform streams. Transformer streams are supported in chrome safari and firefox. Speaker has learned about the streams api, transformer and linklater.

Speaker explains to Speaker how the script. Js file is being processed. Speaker explains how the transform stream is created. It turns into a readable stream and then it returns back. Speaker is still working their way through it. Speaker explains how the code works. Speaker is going to put a link to transform stream on mdn.

topics
  • transform stream
  • transport streams
  • readable stream
  • response body
  • text decoder stream
  • progress bar
  • mdn mozilla developer network
  • text file excetera
  • data streams
  • fetch request
  • transformation stream
  • details elements
  • target div
transcript

You're taking it out, welcome back.

That same old place that you like, well, the number of all changed since you hung around but those dreams everything, and they turned around each other.

Hey, what's going on?

Welcome back.

All right to another edition of.

Well, the second break session of the day, I want this.

Okay, I need this, come on, here we go, hope you are doing well.

Hope you like getting things done.

I am actually making some Headway on some stuff so it's No, it's getting there.

All right, so now quickly, I want to talk about something that I came across.

This article came out.

July 1st, and it is the third now.

So on a Thursday of last week and that was pretty cool.

Some of it's still kind of goes over my head by the type of thing where it's good to have it in the back of my brain just in case if ever I need it you know?

And so Things to kind of talk things through and also kind of like, oh yeah, this problem could probably be solved by that and especially now that it's being is like, in all browsers because before a lot of times, I like see something, but I never really put too much into it until it's supported across like all the major browsers, right?

And so the thing I am talking about I just noticed that.

So this is web dev one big fan of this site.

So check it out every once in a while, right?

I just noticed that you can't really tell what the title is like from like the upper we call that above the fold, we initially go to the page.

I just noticed that interesting but does have a cool picture of a transformer.

So I am appreciative of that.

All right, so Let me see here.

Now let me put the link so this is kind of cool and so again I am not sure how I will use, they have some examples which are pretty awesome.

But all right so the thing is transform stream is Now supported cross-browser, so I guess Firefox it took a while.

So Firefox is the newest one to support transform streams.

So now that transport streams are supported in Chrome Safari and Firefox the ready for prime time.

And again I guess Transformer.

All right, so now there're the streams API.

Which there's If you have ever, you may have, if you do like node and sometimes you come across these like readable streams and writable streams.

Especially if you're dealing with like files, at least.

That's how I have come across in before.

But apparently, you can also do it in the browser.

And so there're the streams API.

And then I think I have this, you okay.

Yeah, I have that linklater allows you to break down a resource that you want to receive send or transform into small chunks.

And then process these chunks bit by bit.

So let us say you're making a fetch to an image, right?

What happens is that if you do like a fetch call, you get that?

Will just if you do like a regular one, it keeps going it, keeps receiving it, and to get the full thing, and then it's done.

But then, you can put in like the streams API.

And so, as you're getting the little bits of the image, Image, you can do something with it.

And so they have a thing where they took like a PNG image and then as they're getting it, it turns it into a grayscale image.

So stuff like that.

And you can do other things like with text and stuff.

Cool, so I am thinking for text, let us say you have certain naughty words, right?

That you don't want in some text, and we could probably do is as the text file is being put in, I guess, being like red.

What have you liked in chunks?

Christchurch East chunk for the curse word, depending on the list because it could probably be a huge thing or whatever.

And then like, switch it out with something, you know, I mean, I don't know.

I am just come on top of my head.

I have not done this so but it seems pretty cool.

So now, yes a recently, Firefox, 10, to started to support transport stream, which means transform stream is now finally usable across browsers.

And then says it allows you to pipe from a readable stream.

So like you said, getting the fetch right breaking down into chunks and to a writable stream so like maybe like another file or another image on your in your web page?

Executing a transformation on the chunks, so.

Yeah, or consume the chance from result directly as shown in the following example.

Alright, so here's the example, right?

So what they're doing here, is that they're taking, so they're doing a fetch On the script.js file, right?

And so once you click the button, it fetches, it normally, you would just have the response, and they do like a Json or whatever on it or whatever, right?

But what they're doing now is that they're taking the response body and creating a readable stream right now.

Then they are then piping through to a text decoder stream, which is a thing that's in the browser.

So it decodes text I don't know too much about but I kind of like looked into it on mdn.

Seems pretty cool.

And then.

So once it's done with that, the coded text stream, you then pipe that through to this uppercase transform stream, which is this function here at the top and what that will do is it creates a new transform stream, right?

Where there's the transform.

It's a little bit of data that show Unk, and like a controller.

And the controller like cues up everything I guess.

And so you're going to take that chunk and make it uppercase, Right.

So that's the transform part there.

So this is like the readable part and then there's a transform part.

And then it returns back.

This thing's like a readable stream again because all this gives you a readable stream and then you have a get reader which I guess is on the reader will shrink?

I think this.

Yeah, I think it turns into it's like a stream so you can do it.

Get reader again, I am not too sure.

Let me know because I am still kind of working my way through it.

I just kind of found out today.

I thought it was cool.

And then you have this, so you're clearing out the text.

There's like a pre tags, they do.

Yeah, they didn't do a get element or whatever um is probably in the code somewhere.

But all right.

So then, so they cleared out the text content, and then wild true, right?

So there's a done in a value that comes back from the reader, which is the readable stream, get reader read.

So I guess I will tell you if it's done or not and then the value and then it's just adding the value to the text content.

All right, so then here's the demo.

So remember, it's going to pull the Jace.

The script that Yes, file.

And then turn the every letter that into upward case So then here's the button.

Start it off.

And there you go.

Okay, so they did do a document a query selector on the pre.

Okay.

And then yeah.

So you see it's all capital.

Pretty cool.

Pretty cool and then you can look at the JS file here.

So this is what actually is here.

So this is how it looks before, it pulls it in and through the transform stream, it upper cases everything.

Yes.

But then but before that you have to do the text Dakota stream.

So it's turning.

I guess the file into like text that you can edit.

I guess, I think again, I am not to sure about that.

That seems pretty cool.

All right, and so that I looked up the transform stream on mdn.

Oh, by the way, let me I don't think I have yelling have that one.

Okay, cool.

Let me I am going to put this link into there as well.

So now I am thinking like a back of my brain if I ever need something where it's like a file, could be an image may be a video or something where I can.

Give these a larger?

And there's an example also, that's I am going to show that maybe it's like a larger file and then you can show like a well that's just with readable files.

Anyway, where you can show like a progress bar in the space where I think it's cause we load for the download and some like that.

That's cool.

But then you could maybe transform it as well.

So you could combine that with let us say you wanted to add a certain filter to it and maybe it takes a while.

All, then you be able to while it's rendering or whatever, you can add the filter to it and show a progress bar on how complete it is.

I don't know, this is stuff.

I am thinking about this random randomness.

All right, so now this is the transform stream on mdn Mozilla developer Network.

And where's the mouse?

Here we go.

All right, so yeah, so they kind of talked about it.

And so there's the readable writable part of it, so I guess yeah.

So when I was coming out here because you create like a new transform stream and so it has a readable part and a writable Part.

Maybe that's where the get readers coming from again.

I am not sure, I am still working my way around this, and then they have this example for any you turn anything into a and I cannot pronounce that, but You in it.

Like an integer 8, array.

Something.

And so you can see it's similar.

So there's like a start.

There's the async transform.

Which, They kind of have it here, right?

No, that's just wait.

That's just transform honesty Samir think?

Yeah.

Here's a transform here and have the chunk and the controller This is what I do.

I go between like two different like code, and try to figure out what's happening there, and so yeah.

So that's so here's the chunk and controller again.

Cool.

See they said this start is required.

But it wasn't in the other one.

But movies because they made it a class and as a Constructor Huh.

Well, okay, well here's this new here.

And no, I don't know.

Okay.

All right, so then this is.

So then they have a switch statement for the type of Chunk, if it's an object.

I guess stop it.

Yeah just see the stream is done.

I guess.

Or if array buffer is view.

So yeah, so this is a lot of stuff.

I don't know anything about, like, I have never had to do this, but it's cool to know that you can I guess if you ever happen to come across it and then here's like the text encoder text decoder stuff outside my before.

And so here again here the transfer.

See there's that start again.

I wonder why they didn't have a start here.

See this stuff I would like play around with in like an online IDE or something kind of mess around with it.

Okay.

And some polyfill stuff.

Okay, yeah, so here's readable and writable.

Alright, coming from the new transform like show before.

Okay, there's the pipe to again, All right, interesting, prevent close.

That's a new one, promise resolved.

And you can see here like again, it's 102.

Firefox.

Internet Explorer went away.

So it's not going to support it because it's not there anymore.

But yeah, you can see it's well-supported cool.

Even on Safari, iOS is nice.

Webview cool.

All right, you didn't know there, but yeah so that's cool.

Then also here's the just in general, the streams API we add this I am going to show some examples coming up soon.

So, but this is just talking about it, it's something you can do it in web workers also thinking, I guess take it off the main thread, which is pretty cool.

So that means if it's like a large file or something that you want to add, let us say a filter to, you can do it.

So while the web page through like loads, that's cool.

Yeah.

So there's talk about, you know, breaking down a small chunks, this is something browsers.

Do anyway, we're receiving assets to be shown on web pages?

So if you ever noticed, like how sometimes a large image, Slowly or whatever I am saying.

Oh yeah.

And sometimes you will see images play gradually as much as loaded.

Yeah.

Okay.

Cool videos buffer.

Okay?

Yeah, but this has never been available to JavaScript before.

So that's what it is now.

So president previously, if you wanted to process a resource of some kind be a video or a text file excetera we'd have to download the entire file, wait for it to be de-serialize into a suitable format and then process the whole lot after is fully received Oops.

So this the streams API you can do it as it's downloading, which is cool.

And yeah, so you see fetching from a network so you have that all the data and your processing data and the render, the data.

So you're able to do stuff in the middle here.

Okay, so there are men, there are more advantages to you can detect when stream start or end chain streams together.

Interesting handle, errors and cancel streams as required.

That's cool.

So then you can chain them.

So like when one done another, we're going to do, be done and react to the speed of the stream is being read at.

And I think that's called back pressure or somebody that I was reading.

Again, it's kind of just quickly and you can write the data streams using writable.

The okay, so here's that get reader again.

So for that, we saw before.

Yeah, for example, the response body returned by a successful.

Fetch request can be exposed as a readable stream, which is what they did here.

So here's the fetch request right here and that's the response body and again, interest readable stream from that.

All right, cool.

That's where the get reader came from.

They can cancel it.

They can create your own stream.

Also, like doing from a service worker, any data from that?

Huh.

Pretty cool.

Hey guys.

It's goes through now.

So here like an example that I saw And so here's the grayscale, the PNG, right?

So open that.

So this has the transform.

So it's a PNG is retrieved.

Retrieved the Fetch and the response body like we saw before is pipe through a transformation stream to convert the PNG to black and white or grayscale, whenever not necessarily black white this Grayskull.

So there you go.

So it took this image and then turn it into that.

And so, take a look at the code real quick.

I am running out of time.

This is pretty cool.

So yeah, they put a link to this.

You can check it out as well.

At your leisure.

Hey, let me know if you do anything in this or if you have done stuff with this, this is kind of cool.

All right.

Okay, what?

Oh, I didn't actually go to the oh, Which one was it images of probably under images?

Nope.

Alright, nevermind great.

But I could do, I could do is this?

And then take a look at in.

Try not to Okay so here it is.

So we're fetching the tortoise, the PNG, the original one and then taking that response body, right?

And then so that's RS, that's here.

And then it sets a readable stream, and then they're piping that through to a new transfer of stream, which is going to take that new grayscale, P&G Transformer, which I think comes from like a library here.

Yeah, and then they get the blob, and they create a URL at the blob and then make an image source that URL.

And that's how we get this one here.

Cool.

A see the image.

They got the image from the ID Target, so there's a like a div or something here.

That's ID Target.

And then that's how they make the source that's pretty cool.

So yeah, so stuff like that.

That's pretty cool.

There's some other ones there.

Like this is where the that's the back pressure thing of someone before.

So streaming fetch call with the progress bar.

Oh, the progress indicator.

So that's that one.

I think there was a whole nother one so you can check out those.

Here's another one, see this.

I think that some of the previous ones are here as well.

So let me put this in this but this one had a pretty cool thing here.

Demo And so there's some basic ones from service worker.

Fetch Batesville.

Here's an enhanced one unless you like pause.

While it's downloading.

So you see the thing here I could stop it.

Oh and it's a time we can restart it.

You can stop, right?

And it shows you where it left off at and then you can restart it.

And there you go.

That's pretty cool.

And probably about maybe suited for larger non-image.

Fetch request and they have like the service worker 1.

Cool, what else?

Was there anything else those one where it actually, like, split it off?

So it pulled the file, but it also made it a downloadable and then it would show you what was in the file.

That one was pretty cool too.

Oh, using custom element.

So let us see.

This old on this is like a web component thing that I see this one already.

Okay.

I think I have seen this one.

So there's like a custom element on here.

Maybe, let me see something real quick.

Is there?

Yeah, here we go.

Streaming elements.

Streaming hyphen elements.

That's a web component.

That's pretty cool.

So the streaming so.

Okay.

So wonder where this is going to do.

So there must be a little bit of JavaScript to show what to do with it right?

Yeah.

Streaming element so it's a super cool.

There's a web component that's kind of awesome.

That's pretty dope.

Okay, let us see what's Okay.

So this look at the source, you know, I am a big fan of the details tag here.

I was going to say like I have always been oh now that's another web component, view Source.

Oh Does it use?

Super cool.

You can do like the similar thing with the details.

I wonder if they're extending the details tag.

I want to check that out again because they could be extending the details tag.

Oh, that's super cool.

Wonder where the yeah, the view Source type.

You know, give me a second.

I am going to just check this out real quick.

This is pretty cool.

Open a new tab.

We see they extend the details tag.

Define view Source, not extend HTML tag.

Oh no.

They're not using oh interesting.

How would how old this is?

Because maybe the details tag was in there.

If you're not familiar to details tag again, we're going into all sorts of mdn or no details elements.

HTML to be more specific.

Yeah, here's a diesel tag.

It's the discuss.

Details disclosure.

So Wait, why don't you hear you?

So you can see it's pretty much the same thing as the view thing, so they would have extended that then but then with this problem, we need it, I don't know, but so maybe it wasn't around when they made it, but where am I again?

That's pretty cool.

Okay, so yeah, so what's going to happen?

Here is okay.

So we have this function stream directly into Dom, right?

So when you click the load button, It's going to launch this and so it's going to fetch this that includes file include file, and then we have some headers on there.

And it's going to take that same response body which is like a readable stream you can get out of it.

Apparently.

And then you go to pipe through to the text decoder stream which I guess turns into text that you can mess around with and then it's going to 0 Target div writable packed into that the target div Which I think is what we're talking about before the streaming elements here.

Interesting.

Let us see what happens.

So, and I guess it's called the Jack M, sort of this gets kind of stuttery.

Then, you know, it took a lot from it, a lot of resources or whatever, but then again my browser, my computer has its fans on, so we will see.

All right, so load HTML stream.

Casey doesn't change at all.

It's pretty cool.

And see, here is the information from that commits that include and it's a lot.

And that didn't slow down at all.

That is pretty cool.

So it took all the different chunks and added.

It is super cool.

Okay.

All right, my bad.

I am okay.

I just think I had a couple more things.

Um well this is something else.

All right, we took a look at that and then here is another one from web dev that just talking about streams in general.

So you want to get like more context and information about it as well in addition to like the mdn that I posted earlier and so Yes, you can like so like video effects piping a real readable video stream through a transform stream that applies effects in real time.

So that's kind of what I was saying before.

Oh and then even like decompression or compression.

All right, image decoding.

So you kind of saw that before Oh and so also if it doesn't understand, so if you call a file format it doesn't end stand that you can transform it into something that it would understand something like polyfill on a super cool.

Yeah, so the whole bunch of stuff here on top of the back pressure and then teeing I saw that before.

So, I am not even exactly sure, since it can be teed, this will lock the stream.

That is making no longer directly usable.

However, it will create two new streams called branches.

Oh, we're going to be consumed independently.

I think that's the one where they took it yesterday to eat it.

And so one went into the Dom, the creating one made a zip file that you could download.

All right.

Wow, that's a lot of cool stuff there.

Do it, since I spoke about the details tag?

I have that as well.

All right.

So, I am way over.

But this thing is pretty cool.

He's I think so, and don't forget the very last work session is like an hour anyway, so you extra time for that and so on.

Yeah, I thought that's pretty cool.

Don't know what you think, but for me, that's the browser is getting more and more powerful, you know, I mean, able to do so much more stuff in.

It's pretty cool.

All right, so I am going to get you all back to work.

Thanks again for hanging out and nerding, out with me.

But I think this stuff is kind of cool.

All right, so we will come back, we will take a look.

If nobody signs up for show-and-tell with take a look at artists website.

Listen to some music, maybe watch some videos.

And yeah.

So again, thanks for hanging out.

I will see you in like 30 minutes for the next actual bricks.

But yeah, again, I will extend extra time for the next one.

Alright.

So again thanks for hanging out.

Get you back to work.

And yeah, so this track here is nujabes Featuring a Pawnee, be the track is called, thank you because I want to thank you all for hanging out again and yeah.

So I will see you soon.

All right, 15 minutes after our be easy.

Thanks again for hanging out and I think that's everything.

Yes.

All right, here we go.

See you later.