Matrix Rain, JavaScript and Fresh Releases - Frontend News #18

Watch the Frontend News #18 - the podcast about tech and front end innovations with our hosts - Chris and Tommy K. BTW, you can contact our experts from Frontend House software studio if you need to find some software solutions.

What’s in Frontend News #18?

• 00:00 - Intro
• 01:40 - Contents
• 04:47 - Progressive JPEG XL images
• 07:32 - “You Don’t Know JS Yet” on Kickstarter
• 08:59 - New ECMAScript proposals: Array.fromAsync and BigInt Math
• 11:48 - Pick Colors with JavaScript
• 13:05 - React Router 5.3.0 release
• 14:14 - Ember 4.0 Beta has started
• 15:02 - Node v16.9.0… and some new features!
• 17:05 - Enter The Matrix

Thank you for watching! Subscribe our channel and contact us via contact form on https://frontendhouse.com.

Transcription

Chris

Welcome, everyone. Today is 18th episode and we are so excited. We are so excited because there are eight news and there is one nice surprise from Tommy. Maybe it's not a surprise because we already know there were 35 likes and five comments. So Tomasz will dance for us. So stay tuned. Tommy, how was your week?

Tommy

Thank you. Thank you for asking. Yeah, it was perfect. But I just want to congratulate you because you have become a very important person in a very important organization.

Chris

Ahhh, stop it.

Tommy

Maybe you can tell us what's going on on your side.

Chris

Thank you, Tommy. Yeah, that's true. I became a jury member at FWA, which is a big awards website. It gives the best, the best words for executions around the words. Yeah, super excited. Good to be there. And yeah, thank you.

Tommy

Really nice. It's really nice. Amazing really. Guys, if your website will be in the competition for FWA awards, probably Chris will be the one who will be judging your website. Yeah, you can leave a comment under this video to make some interaction with Chris and maybe you will buy his attention. No, just kidding.

Chris

Okay, Tommy stop this and let's go to the news, because as I mentioned, there is eight years today and was the first one?

Tommy

Okay, guys. So the first one is about the progressive JPEG XL Images.

Chris

And the second news, I'm sure that all you guys know. “You don't know JS yet” book and the videos. So apparently there will be a second part. And yeah, Tomasz will tell you more about this.

Tommy

Exactly. And after that, I'm going to speak about the new ECMA proposals.

Chris

Oh, finally. Also we have Pick Colors with JavaScript.

Tommy

Then we have a small releases block, and at the first we will speak about React Router version 5.3.0 Release.

Chris

Ember 4.0.

Tommy

And our lovely Node.js with the version number 16.9.0. But this time, this time I have something new to announce for you.

Chris

Uhhh, sounds great. And the last one is gonna be about The Matrix.

Tommy

This is a small surprise at the end. And I would like to share my screen to show you something interesting. I'm a huge fan of The Matrix. So this is a small tweak about the Matrix world.

Chris

Okay, I'm so excited. I can't wait to hear that. So that's the intro and see you there. Okay, guys. So we have news. We watched the intro and its main part where Tommy K will dance for us because you scored 35 likes and five comments in the last episode. Make it great again and score more this time. But yeah, Tommy, go ahead.

Tommy

Okay, I need to prepare and let's start this madness.

Chris

Okay, guys. I hope you liked it. I really enjoyed this dance. Let's see what's going to happen in the next episode. But now let's jump into the news. What was first to me, it was something with JPEG as far as I remember.

Tommy

Okay, thank you. This was my first dance on this channel. Hopefully the last one. But thank you for all the likes and all the comments. I really appreciate it. We really appreciate it. And yeah, we would love to interact with you more often, so don't hesitate and leave comments under all of our videos and we are sure that 100 people will respond to your messages... Sure we'll respond for your message. So yeah, so much.

Chris

Tomasz! What's in the news?

Capacitor - Progressive JPEG XL Images

Tommy

Oh come on. News news news all the time. Okay. Okay. Progressive JPEG Excel images. So what's going on with that? Getting images that will be delivered pretty fast on the web is a really crucial and important topic and it's really hard to optimize all the assets loading to make it pretty fast, but different teams experiment with different approaches and there is something like progressive images loading. And the Google team decides to experiment with such approach and with the JPEG Excel format and they produce something that really helps to load the images much faster.

So they are using machine learning to detect what part of the image is the most important and salient. So this is the place where the user will put his eyes will focus as the first thing on the whole image because the human eye and human brain works like that. If we are looking at the image, we are not observing all the image at once. There are some spots that are more important or less important. Thanks to machine learning, we can detect this important place on the whole image. And thanks to the algorithms, they will load faster and before the rest of the spots on the image.

Chris

Sounds like rocket science to me.

Tommy

Okay, so a really simple example. Okay, imagine that we have a photo of a human face. What is the spot where you will focus first?

Chris

Probably the face?

Tommy

Face, but where? What spots on face are the most important?

Chris

Eyes.

Tommy

Exactly. So if we want to display the image of the human face, eyes will be fetched as the first before the rest of the face and they will be displayed without any blurred pixels.

Chris

It would look weird, wouldn't it?

Tommy

Maybe. But the difference will be in milliseconds, in less than a second. But it will give this a fact that you will focus on the eye. For example, you will see the eyes and you will not spot that the rest of the image is not fully fetched yet. It will be blurred. For example.

Chris

I wonder if all websites will use this technique.

Tommy

Okay Chris, and yeah, that was it. It's all from the progression JPEG pixel.

Chris

Sure, Tommy, jokes aside. It sounds really interesting. I wonder how it's going to work. Personally, I would check the examples after this presentation because I'm very curious, but speaking about curiosity and about JavaScript programming, I can't wait to hear what's going to be with the next session of “You don't know JS yet”.

“You Don’t Know JS Yet” on Kickstarter

Tommy

Guys, you probably know the “You don't know JS yet” series where you can find a lot of stuff, educational stuff and very, very well performed stuff about the JavaScript world, ecosystem, about the language itself and about the rules, how to use it. And this is something that I was using at the beginning and in the middle of my journey with JavaScript language. And sometimes I'm going back to the project called “You don't know JS”. And believe me or not, Kyle Simpson decided to write the second version of this book, including the new SEMS standard. So he decided to begin the project on Kickstarter. And at the time I was seeing this project, he was like $4,000 before he crossed the finish line the book to be created. So he needs like 30,000 dollars to begin the new series called “You don't know JS yet”. And guys, if you can help, just you know, let's help Kyle to finish this book. I'm interested in the new series, so probably I will... Maybe not probably, I will help him.

Chris

Cool. Let's make JS better and help the guy.

Tommy

Let's support the community.

Chris

Exactly. And jump to the next news, which is...

New ECMAScript proposals

Tommy

The next news are new ECMAScript proposals.

Chris

I like to watch how JavaScript grows and how it changed over the years. So I'm really excited. What's in the new proposal Tommy?

Tommy

That's correct. So in new proposals we receive two things. The next one is an array new method. It's called from async and it works like it converts the Async iterables promise that will be resolved to an new array. So imagine we have a collection of some async iterables. It can be the data fetched from the back end and it will be fetched asynchronously. So this collection will be asynchronous. And thanks to the new method, you will be able to iterate over such a thing and resolve the result straight to the array.

We have such solutions in the NPM packages. One of the packages is called ‘in all’ I think. And there are over 60 000 downloads per day. So it means that this is really important functionality and starting from the new proposal. I mean, once the new proposal will be accepted, it will be included by default in native functionality. For now you can play with it on the newest Chromium, I believe. And the next thing is a big Int for math library. There is a huge problem with the numbers in JavaScript.

Chris

Is it already in?

Tommy

Unfortunately not, JavaScript does not have a bigint navite implementation in math library.

Chris

I remember some news from the last proposal. I mean, I haven't used it since then, but I remember this proposal already.

Tommy

Actually this is something new and it occurred in the last week or two weeks. So I'm not sure if you are reading the same thing as I want to present, but...

Chris

Tommy K, we trust. exactly.

Tommy

Exactly. Cool. Yeah. So the math library will receive a new format called BIGINT, which is really important for mathematical, financial and scientific applications. These are these two proposals.

Chris

So just two of them?

Tommy

Yep, just two of them.

Chris

I was reading some rumors about new classes implementation.

Tommy

Really? Maybe you want to tell more in the next episode or maybe today?

Pick Colors with JavaScript

Chris

Why not? I'm happy to prepare this news for the next episode, but today let's jump into Color picker.

Tommy

Okay, color picker is an interesting thing. It will become a new native API that we can use. Actually, it's in Chromium 95, Firefox and Safari do not support it. Yeah. What is this pick colors functionality. The Eyedropper. - this is what it's called the new API that will allow the developers to pick the color not only from the website we are looking at, but from the entire screen, and we can do it from the JavaScript code. So this is it.

Chris

Do you have an example of how it's going to work, Tomek?

Tommy

Yes, the examples are in the documentation, in an official documentation. And as always, the link is where?

Chris

In the description!

Tommy

That's true. But to be serious, you can find an example of how to use this new native API. It's more like creating the instance of the Eyedropper class. And after the document is loaded and we have full access to the dom tree, we can manipulate it. And it means that also the JavaScript code has been fetched and it means we can run the code and pick the color from the place we want.

Chris

Okay, Tommy, thank you for this explanation. Sounds great. Let's test it ourselves, but now let's go and speak about tool we use every day. It comes with React. So the React Router. What’s in?

React Router 5.3.0 release

Tommy

Okay, so React Router version 5.3.0. Nothing big inside the new version, but really important for those who are using functional CSS, for example, Tailwind. So in fact, we can pass a function as value for property called style or class name in React before we could pass only objects or strings. And now we can pass a function that will get the ‘is active’ flag as a param. That's because we want to style, for example, the active state for the link. And this is the way we always do it with react. Yeah. And this is the way they want deliver this functionality to be retrieved. So starting from this React release, you can use functions instead of objects or strings.

Ember 4.0 Beta has Started

Chris

Okay. Thank you, Tommy. Unfortunately, no breaking changes again. But yeah, let's see what's in the next releases, but now it's about Ember 4.0, so yeah, I'm sure it's going to be a lot of breaking news here.

Tommy

I have to disappoint you Chris. There are no breaking changes.

Chris

Oh, come on!

Tommy

No, no. Maybe there is a breaking change, but no new features in source code. Ember 4.0 will remove the deprecated API functionality from the previous versions, so it's more like cleaning the fields and preparing the Ember for something new for something big in the next version. You can start and join the beta right now, and they really welcome all interesting developers because they are looking for feedback and for sure they want to test if everything works fine. And that's from the Ember world, guys.

Chris

Okay. Thank you, Tommy, because this one was short. I think that the next one about Node.js is going to break this time. What’s in the new Node.JS?

Node.js v16.9.0… and some new features

Tommy

Okay. This time I want to present something I think is interesting. And it may be a little bit weird. In the newest release of the Node.js, which is 16.9, the Node.js team introduced something that's called Core Pack, which is a manager to dependency managers. So it's like NVM for the NPMs.

Chris

I was reading about this. Sounds interesting.

Tommy

Cool, so yeah, thanks to the Core Park, you can manage the different versions of the Yarn or PMPM, which is the NPM alternative. We have a few package managers, but that's not all. Also in the newest release, the V8 engine has been updated to version 9.3 that includes some performance improvements and new JavaScript features. For example, there is a new feature for objects, which is an object.hasown. And the second thing is error cost, which actually allows us to construct errors with a cost option pointing to another error so we can create a chain of errors. Available under unless otherwise noted this page.

Chris

For example, the second error occurred because the error first occurred. Okay. Something like that.

Tommy

But yes, but sometimes we need to handle errors too. And this improve the way how we do it. And actually, that's it. There are some minor fixes, as always. Rest of the stuff is in the documentation. So, guys, you can just check our description and get the link to see it on your own. And that's it from the Node.js world.

Chris

Sure. I really encourage you to check the description and read everything yourself as well. So the last one is a Matrix, right?

Enter The Matrix

Tommy

Yes, the last thing.Let me share my screen. And can you see my screen?

Chris

Yes, I do.

Tommy

How to run this.

Chris

I don't know.

Tommy

Okay.

Chris

woooow. You’re a hacker now.

Tommy

Yes, I'm a hacker. I can watch it all the time, all day long. It's my new favourite thing to do.

Chris

I was thinking that you're gonna tell us the new trial for the Matrix 4 movie.

Tommy

Okay. Actually, you got it. Yeah. Guys, there is a new teaser for the Matrix. It will be Matrix Resurrections. It will be in theaters on December 22. Something like that. So I cannot wait. And for now, I can just see this beautiful Matrix on my screen. And yeah, this is it. Enter the Matrix, guys.

Chris

Enter the Matrix with us and see you in the next episode. In the meantime check our Twitter, LinkedIn, YouTube, Facebook, and our website frontendhouse.com. Instagram. And see you guys there. Thank you, Tom.

Tommy

Thank you.

Chris

Nice episode. Yes. See you, guys.