React 18, Partytown, Chrome - News 19 | frontendhouse.com
Guy with notebook

October 1, 2021

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

Krzysztof Wyrzykowski

CTO

Tomasz Krajewski

Head of Frontend
Share

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?


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.

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.