Newest Releases: React 18, Partytown, Chrome Canary - Frontend News #19 | frontendhouse.com

Watch the podcast about front end innovations with our hosts - Chris and Tommy K. Need a help with software solutions? Fill the form on frontendhouse.com. What’s new?

What’s in Frontend News #19?

• 01:00 - Contents
• 02:25 - CSS When/Else proposal
• 05:57 - V8 release v9.5
• 07:04 - Chrome Canary 95
• 08:38 - React 18 Alpha approved
• 11:45 - Partytown
• 14:08 - Gatsby 4 Beta
• 17:25 - Node.js updates

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

Transcription

Chris

Hello everyone. Today is a new Frontend News episode with number 19. We are super excited. Seven great news. I think that it's all gonna be epic. But first thing first: Tomasz, how was your week? And when you're gonna visit me?

Tomasz

The question I love the most, but yeah, you know, my week was perfect. As always. I was searching for the best news for you. My lovely audience. And I did find out seven news for you. And when I will visit - it will be in two weeks.

Chris

Guys, in two weeks we're going to shoot epic news from the beach together, me and Tommy K.

Tommy

I cannot wait.

Chris

From sunny Spain!

Tommy

Yeah, I cannot wait for that. This is something I was waiting for a long time to have small holidays.

Chris

We are waiting for the holidays. I'm waiting for you to come to the holidays, but I'm sure our audience is waiting for the agenda. So what's in?

Tommy

Okay. Yeah, let's jump into the agenda. And the first news will be about a CSS proposal that has been approved by the CSS World Group community. And this is about when/else statements. This is very interesting, so I cannot wait…

Chris

Tomasz, shhhhhh.

Tommy

Why are you shushing me?

Chris

Let's wait and reveal this later. And jump to the next news which is JavaScript Engine Update.

Tommy

Chrome Canary version 95.

Chris

And finally they are planning to release a new React version.

Tommy

Okay, this is something interesting, but more interesting for me is the thing about the Partytown I want to mention in this episode.

Chris

You always like to mention about party, but I'm curious if you're gonna have to mention something about Gatsby 4

Tommy

Still last but not least NodeJS updates. The very important point in all of our episodes.

Chris

Okay, so we are all set. Let's watch the intro and talk about the news. See you guys there.

Okay, guys, I can't wait to hear about the CSS update! Tomasz, go on.

CSS When/Else statement

Tommy

Okay. Css working group has approved the proposal for the CSS When/Else statement. What is it all about? Okay, so let's take one step back and discuss what is the purpose of having this when/else statement. Imagine the situation. You have the layout for your website, which is not hard to imagine. Okay. And you want to update styles for the different screens with different screen sizes, for a different resolution. So for example, you want to change the background for the tablet and change the padding for the mobile version.

Chris

I think we have a solution for this.

Tommy

What are you using for that?

Chris

Media queries, of course.

Tommy

Okay, so imagine that we have a situation like we have the six media queries for the I don't know, for some big component. Okay, so this is a very complex style sheet, very complex styles for such a case. And there are plenty of media queries.

Chris

And the issue is that we shouldn't go further than three or four media queries.

Tommy

Yeah.

Chris

I mean, breakpoints, not media queries.

Tommy

Yeah. This is like a good rule. It's all about keeping the code simple, as simple as it's possible. So as we know more media queries, it increases the complexity of the CSS code. So this rule applies almost to everything. Like keep everything as simple as possible. And this is a good solution not only for CSS, but for also for JavaScript library, HTML, everything, everything.

Chris

But what is the news?

Tommy

Okay, when a statement gives us the possibility to take the media queries that share the same attributes for some reason. Okay. And group them under the one state statement. So you can group two media queries. You can group other CSS pseudo selectors into one code blog and this shirt attributes. You can write them once instead of duplicating them multiple times. The CSS could look much better, cleaner. And the Else statement is also powerful in the whole block because we can use it as... Okay, when the media query is lower than something and higher than something, use this kind of attribute Else, if not, use some kind of other attributes. Okay? So it gives new powers for the CSS. And yeah, we can work on having the code much cleaner and to group the properties under one step statement instead of multiple blocks.

Chris

It sounds interesting that might change the texture of the CSS code in general. So I'm very curious and can't wait to read about this news for me. Thank you, Tommy.

Tommy

No problem. As always, it's a pleasure to serve you such news.

V8 Release v9.5

Chris

What in the JavaScript engine?

Tommy

V8 engine, new version 9.5. It's no breaking changes inside, unfortunately, but what we have is a new API for internationalization. It's called Display Names, and it was introduced in Chrome 81. So it's not maybe a new API, but we have a new extension for that API. So the team has added new supported types for the translations. It will be a calendar and daytime field, so you can return the translated names for the different kinds of date time fields. And that's the biggest update from version nine five. Maybe not all updates. If you want to check more, the link is where? The link is in the description.

Chris

Yeah.

Tommy

Okay, guys, you know what to do? Just check it out and treat more about the engine updates.That's it.

Chris

So let's hear something about Chrome update

Chrome Canary 95

Tommy

Okay, so as we stick with V8 engine and Google topics and other kind of stuff connected with front. Exactly.

Chris

That’s new because this is Frontend News.

Tommy

Oh, is it? Yeah. Yeah, you're right. I thought I missed the rooms and it's another kind of video.

Chris

No, it’s not. So what’s in? Focus.

Tommy

Chrome Canary version 95. They have a bunch of updates not only for the developers. From a higher perspective let's speak about what's new: new CSS link altering tools, height issues in the issues tab, improved the display of properties and report a translation bug, improved UI for the Dev tools, and we have new Light House version 8.4 included into the new Chrome release.

Chris

What’s in the Lighthouse? It’s my favorite tool so I’m curious.

Tommy

They’ve just improved like the performance measurement logic. No breaking changes.

Chris

I hope they didn’t change the algorithms again.

Tommy

As always, something has to be changed. Someone has to have work to do. Someone has to pay. You know. Life.

Chris

That's why frontend is so expensive.

Tommy

Yes, it's expensive.

Chris

Because we need to learn a new version of React. What's in the React, Tommy?

React 18 Alpha approved. React components

Tommy

I believe we spoke about React 18 in the past. Or if no, this is the right time to hear about the new React 18th version. The Alpha version has been approved after a few months of working, so we can expect the better version of the use React 18 in a couple of months, I believe. But of course we can test it on our own. So yeah, if you want to leave a feedback, you know, help the guys to improve the React, you can check the Alpha version.

Chris

What has changed?

Tommy

The most interesting change from my perspective is that the React team introduced a new root API, and if you want to use the new benefits that will be included into React, you have to switch from the old root API to the new one. And yeah, what's new?

Chris

Okay, talking about the root API. I mean, we are always using external library for the routing.

Tommy

I mean, its roots like the main place where you inject the whole app.

Chris

Okay, I see.

Tommy

So in the past, I mean, the legacy root API works like we have a container that is created in the HTML file directly. For example, it can be deef with an ID app, and in the old way we had just to inject the application inside this tag. And now the mechanism with the new root API will work like we have this root element in the HTML file, but before we will inject the app, we are creating another root container, but from the code not directly in the HTML. They have some mechanisms under the hood which are really complex that take care of such mechanism that can give a lot of benefits.

Chris

Not sure if I understand this correctly, but it was as easy as that creating this element from JavaScript. I mean, I don't see any benefits yet.

Tommy

Let me speak about the benefits. Okay, thanks.

Chris

Oh yeah.

Tommy

We will allow the components to render undefined values server side support for the suspense and captured suspect, null or undefined suspense fallback. So I'm not sure yet why this new approach gives such benefits, but this is something I would like to check. Okay, guys. So if you know why the new route API will be better, what is the secret of this improvement? Just leave a comment, please, because we are curious if you can help us with the answer.

Chris

Otherwise, we're going to dig it with the beta version and jsx, and we let you know exactly. Okay. I think that's it from the React. I can't wait. It's always good to have a new version of the React. We are always very curious, but now let’s jump to Partytown. What a mystic name.

Partytown

Tommy

Party! Yeah. Okay, Partytown. It's a funny name, but we will not speak about the parties. Unfortunately. There is a long time until next weekend. So let's wait…

Chris

It’s Monday.

Tommy

Let's focus. Let's focus on important knowledge. Partytown is a library that helps to run the third party libraries, not in the main Java Script threat, but take these third party dependencies and run them inside the web workers trends. So in fact, thanks to that, we can improve and boost our performance and leave the main JavaScript threat to handle only the code that is written by ourselves and is connected with the app and all third party code. For example, Google Tag manager or any kind of analytics code. Crashlytics, all kind of that stuff. It's pretty heavy. We can just take it from the main thread. It's a huge benefit, in my opinion, Chris.

Chris

It sounds like very game changing actually.

Tommy

Yeah. There are a bunch of things that this library handles like, for example, the communication between the main thread and web worker because in the classic communication using the post message system, we cannot share objects like document window, and it's really hard to share the information between those two threads. But this library solves that somehow. I need to check how they solve this communication, but yeah, it's a game changer. We can do a lot of stuff with the performance in mind, thanks to that approach. And yeah, let's dig into this topic more and maybe we will experiment in some projects, Chris?

Chris

Of course. Yes. Yeah. I'm very happy to have a look and I think we need to start using it. So let's find out. Let's have a look and let you know. Great.

Tommy

I know that you are really interested in any kind of performance optimization tools and methods. So I knew that it will be something interesting for you.

Chris

Yes, that's true. So I’ll have a look and speak out about the news. We're gonna go to the next one, which is Gatsby.

Gatsby 4 Beta

Tommy

Gatsby 4 beta has been released. It's available, you can use it and for all Gatsby lovers, it's really fast. It's enormous fast and they put a lot of improvements around the performance optimization. So another thing you will love, Chris, I know you like fast cars and fast frameworks.

Chris

That’s me.

Tommy

But yeah, the Gatsby team decided to put a lot of effort into improving the render process, so they take really heavy calculations and processing to increase the performance of rendering the pages. So you don't have to wait a long time until the whole site will be rendered, which is really good. It takes some time to generate the static pages for the previous version. Of the Gatsby, so it has been sped up. That's really great. Another great thing is that they change the pipeline, how they keep the tasks connected with the rendering. Besides, you can perform better with taking care of rendering HTML. And I was really interested, the Gatsby 4 included the server side rendering as it was not good in the past. We had only static side generation and right now they're building user interfaces which respond to the user needs and we will have the server side rendering available. So great if you are using Gatsby, you probably may want to switch to the new version.

Chris

But don’t switch yet because it's beta.

Tommy

Yeah. This is something I want to mention right now. This is the beta version, so you take it at your own risk. Okay. Don't say Tommy K recommended that you or Chris, okay.

Chris

No no. I'm not sure about your opinion. And what do you really think about Gatsby? I mean, if it's me and I need to choose the perfect boilerplate, I mostly go with Next.js.

Tommy

Yes, that's true. Next.js is very popular. But Gatsby is also popular. I think it’s like Strappy, someone like PHP, CMS like WordPress, someone like PrestaShop, and some guys love other kinds of shops. It depends.

Chris

I don't know how we went from Gatsby to the WordPress, but that's interesting.

Tommy

Magic. Maybe that's because Gatsby required CMS to deliver the data to render our side, for example, translations. We can do this without data, but if we want to integrate CMS, we have a lot of ready solutions for WordPress and for the Strapi and for other kind of CMS.

Chris

That's actually true. So what a safe Tommy..

Tommy

I was prepared for that kind of questions.

Chris

I'm sure you are. Is it all from Gatsby? Go to the next. Yes. So the last one and the most important. Node.js. Go ahead.

Node.js Update

Tommy

Node.js, new version, 16.10.0, no breaking changes. They have upgraded the NPM. A package manager for the dependencies update, a new option for the CLI, like no global search pass. And it's a kind of tradition that we mentioned about Node.js, but it's really a rarely situation when I can mention about something, you know, game changing.

Chris

That’s because we talk about this like mostly every week. So I don't think there would be breaking changes every week. But this good update, that’s good because they always stay on the top and we know that the libraries are so updated. Yeah. No, this is really good.

Tommy

Exactly. This is a really solid tool and they delivered and you update every two weeks. One week. Yes. Same as me. Yes. Even if it's a small step, they obviously increase the quality of the whole product.

Chris

I'm sure they follow the Frontend News and they want to be mentioned every time. This is about that.

Tommy

Sure. You know who pays my bills…

Chris

Me?

Tommy

You know it's funny because it's not a joke.

Chris

Okay, guys, I think that jokes aside. Let's leave Tommy laughing and use the power of social media: follow our Twitter. Instagram. Youtube, Facebook, LinkedIn and of course, our lovely site. Frontendhouse.com. Guys, see you next week. Tommy, see you soon on the lovely island. More about the DOM, render return and more in the next episodes. See you!

Tommy

Stay with us. See you soon. Great joke, man.