Matrix Rain, JavaScript and More - News 18 | frontendhouse.com
Guy with notebook

September 17, 2021

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

Krzysztof Wyrzykowski

CTO

Tomasz Krajewski

Head of Frontend
Share

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?


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.

What do you think? Share your impressions!

Become a part of the team that fits you, create really cool videos with us!

Interesting projects from all over the globe, opportunities to grow and nice people attached. Check out our openings.

Join us
Microphone
hexagon

Ask Us any question.

(preffered about front end, in other case we can answer longer and not on topic)

Free consultation usually takes 15 minutes, where we can answer any front end related questions. We are always trying to agree term which suits both sides. Our Experts take care about quality of all answers.

Contact us
Photo of Cezary
Photo of Kinga
Photo of Krzysztof

How the consultation looks like?

  1. Ask question

  2. - Which technology choose to build quickly MVP?

    - How to solve problem of required technologies in the project?

    - How to extend my team with experts of UX/UI?

    - Is possible to ...

  3. Who will contact You?

  4. Immediately after ordering a free consultation, our office will contact you, ask about the topic and arrange a convenient date for an interview with an expert.

    Each interview is conducted by our internal consultant based on his full experience and knowledge. Even if he or she does not know the answer (which is rare), he will consult the topic with the full team and come back with the answer.

question mark icon
Arrow icon
Brain cog icon
Arrow icon
Video call icon

Meet our hosts

Krzysztof
Diamond logo icon
LinkedIn logo
Diamond logo icon
Mail logo

Krzysztof Wyrzykowski

CTO

I specialize in creating advanced digital experiences, often taking part in interactive web campaigns and playing a leading role in combining modern technologies, usability and accessibility.

Tomasz
Diamond logo icon
Mail logo

Tomasz Krajewski

Head of Frontend

I'm Senior JS Developer with more than 8 years of practice and specialize in creating the software architecture and implementing advanced solutions in JS and RoR.

Subscribe for tech insights

We will keep you up-to-date with fresh front end podcasts, news and articles

Still have some questions?

If you have any questions, feel free to contact us. Our Business Development Team will do their best to find the solution.