What's New? Releases: Yarn, CSS, APIs, HTML - Frontend News #15

Watch the Frontend News #15 - the podcast about tech and front end innovations with our hosts - Chris and Tommy K. Do you need help with building an application or a website? Contact our experts. Click the Free consultation button and contact our Frontend House experts.

What’s in Frontend News #15?

• 00:00 - Intro
• 00:32 - Contents
• 01:25 - Yarn 3.0 arrived!
• 03:54 - Predictable APIs with the idempotency
• 06:38 - CSS Nesting Module
• 09:13 - HTML spec news: structuredClone()
• 10:17 - RenderingNG
• 13:45 - Node 16.6.0 release

Thank you for watching! Subscribe our channel and contact us via contact form.

Transcription

Chris

Hey, what's up everyone? Welcome to the 15th episode of Frontend House. Today, we have six amazing news for you guys. Cucumber season is over. I'm here with Tommy K, so let's get started. Tommy, what’s on a plate today?

Tommy

Hello, guys. Hello, Chris. Hello, my lovely audience. This is the 15th episode, so six news. Let's start from the first one and the first will be about Yarn 3.0 release.

Chris

Second one is going to be about the new HTML header.

Tommy

Then the third one is about something different - watch out - CSS Nesting Module. I'm very happy to announce that.

Chris

Ok, I'm happy too. The next one is going to be about again HTML and new specification.

Tommy

The 5th one is about a new engine from the Google called RenderingNG.

Chris

And the last one - stay tuned - Node 16.6.0 update. So you guys there. Hey, intro is over. So let's jump into the news, the first one about Yarn. What's in Yarn?

Yarn 3.0

Tommy

Yes, so we received the new version of the Yarn, which is 3.0. And there are no big breaking changes inside.

Chris

Come on.

Tommy

Main reason why the Yarn 3.0 occurred is that the Yarn team wanted to deliver the solution that will help developers to migrate from the Yarn’s first version to the second or in the best case, to the third version of the Yarn. So I believe this release is something like, you know, cleaning the field and preparing the great foundations to introduce other great changes in the next release, I believe. Yeah. I see that they added some performance optimizations, updates inside the experts methods that Yarn used to work and manage the modules. So any kind of this smaller feature updates can be found on the Yarn website and release notes, which I really encourage you to check on Iran.

Chris

OK, sounds good. Just out of curiosity, could you please share if you use Yarn in your current projects?

Tommy

Yeah, I remember that day when the Yarn appeared for the first time and there was a huge war between developers over what tool is better, faster and is more stable. You know, all the arguing like that. But personally, I’m using Yarn nowadays, especially that in Yarn we have something that's called Yarn workspace.

Chris

And this I think we were talking about the workspace in one of the episodes, weren’t we?

Tommy

Yeah, that's probably true. That's probably true. I remember.

Chris

It's the 15th episode, note that we produced quite of them, so I don't really remember all news, but yeah, it rings the bell.

Tommy

Hey, guys, please support us. If you know, if we were talking about the workspaces, could you please leave a comment and let us know? Because we don't want to repeat ourselves all the time. But just to make a small reminder, Yarn workspaces are used to manage the monorepos and, for example, to cooperate with Lerna js. And yeah, what Lerna is, is there another episode of explaining it to you.

Predictable APIa with Idempotency

Chris

Thanks for a Yarn update, let's go to the next thing from our menu. It was about the new HTML API.

Tommy

Yes, close. Close. It was about the new HTML header.

Chris

Header, exactly!

Tommy

I was checking you. We received a new API and your predictable API to manage the API calls. And what does it mean? Well, let's imagine the situation that you're paying for some product. Let's say you're paying for a pizza for your lunch. And, you know, there is a system behind it that manages your order process, OK? And imagine that you paid for the order and sent the port request to the API that will update the order process record.

And for some reason, your network has disconnected at the time when the request was sent and somehow you connect to the Internet once again and send the same request for the second time. So let's say that this disconnection lasts for a few seconds. And if you want secure situations like that, it means that that record in the database somehow can be updated two times. OK, there is something that is called idempotency. And this process makes the request has been processed only once.

Even if you send plenty of the same request to the API and point, the site effect will occur only once. So we received a new header that - can be said - the HTML requests. And this header is like passing the new flag with the configuration with something that's called idempotency key that will determine the particular request. And thanks to that, you can secure your API calls. And that's really interesting news from my point of view.

Chris

OK, how do you get this key?

Tommy

You can look for it in the documentation of the specification, but you just /h. That means you are setting up the header and you need to set up the header. That's called idempotency/key, and pass the key value in there. And that's it. Your request has been secured.

Chris

Sounds great. Quite a long explanation. So long story short. What is idempotency?

Tommy

Good question. Idempotency is a process: you are sure that your request will be processed only once, even if you will send multiple of the requests, the site effect will occur only once.

Chris

Thank you, finish. What’s in CSS Nest?

CSS Nesting Module

Tommy

Guys, I was really waiting for the moment when I can announce that.

Chris

Why?

Tommy

Because the CSS has started working on nesting functionality in the plane CSS. Can you imagine it, Chris?

Chris

I can't. Who ever works with plain CSS anymore?

Tommy

He's right. I know. Most of us use CSS less or any other preprocessor for the CSS.

Chris

Styled components...

Tommy

Oh, styled components, always in our hearts. React, you know, all that stuff connected with the React. We love it. But let's be serious for a while. Nowadays, you know, we are using styled components, all the preprocessors. But for small projects, or if you don't want to introduce a lot of libraries that will work on top of your application, you can use the CSS.

I mean, you will be able to use the CSS nesting module to write your CSS in a much cleaner way than you can do it right now. So we can test all the tags, classes and other pseudo selectors. The same functionalities, for example, is in the CSS. We want to receive functions and if bloks not yet, but hopefully somewhere in the future, it will also occur in the newer version of the CSS. And what is the consequence of that?

We don't have to use the complex compilers to, you know, to decode this CSS and make the CSS output file, you know, thanks to the nesting module..

Chris

But come on, you still need to use them like to minify the code, for tree shaking and so on. So, yeah, I don’t think we're going to get rid of all the tools. Yeah. By the way, is it live yet?

Tommy

And no, no, not yet. The war has just begun, so we need to wait a while and I'm sure that they will announce the beta release of that functionality in one of these tools. That's true. It's not a game changer, but it's worth checking and it's a one step forward with moving the CSS to the another level.

Chris

Ok, thank you so much. This time - I think I'm right - it's going to be about new HTML specification.

HTML spec news: structuredClone()

Tommy

Yes, you're right, man. Great! Yes, that's true, guys. Another bunch of news from the HTML. So we received a new specification, an official specification for the structured clone method. It was live like, you know, a few months or for a few years, but it was not in the official specification. The structured clone is being used to clone the complex JavaScript objects and share them, for example, through different APIs like workers and post a message or Indexer DB or any other APIs that are using the data.

Chris

Ok, that's it?

Tommy

Yeah, that's just a small announcement. Long story short, man.

Chris

Ok, you learn from your mistakes. But I guess the next one about rendering engines is going to be a very, very long one, right?

RenderingNG

Tommy

Oh, yes, guys, five minutes of break. Take your coffee from the kitchen and let's meet for one hour of a great lesson about RenderingNG..

Chris

Tomasz, we are ready, go ahead..

Tommy

Just kidding. Just getting guys rendering energy. What is it? This is the new architecture for the new engine from the Google team, and it will be used in the next releases of the Chromium once it will be completed, of course. The RenderingNG, like NG is the Next Generation. I know you know this shortcut, but I want to explain that to Chris. Chris, you know what NG means.

Chris

Yeah, no idea.

Tommy

Too many jokes today in this chapter.

Chris

Is it wrong that we are funny guys?

Tommy

Nothing wrong with that. If you think that something is wrong with us, leave a comment, and let us know because we are curious about what you think. OK, let's be serious. RenderingNG is a really serious topic. I think it will be a game changer because the Google team promises that it will take the performance on really another level. It will be really bug free and multiplatform and yeah, it will be for Chromium. So all the browsers that are based on the Chromium engine will be really updated and tuned up.

So I'm looking forward, how this architecture will be implemented and put into real life, yeah, what do we get? As I said, a really big bust for the performance, but also the Google team promised us that it will be like, you know, bug free and really easy to extend to scale, to add new features that should work the same on all the devices and all the platforms. So fingers crossed for, you know, for the development process and for the next steps.

I will keep my eye on that and make sure we get the newest update every time anything new will appear.

Chris

Thank you. So. I love the fact that everything today is about performance, let's see what they get. Yeah. Yeah. But I'm really curious. I am waiting for this.

Tommy

Yeah. This is a good observation. You know, Chris, I see that more and more applications on the web are really fast, you know, on mobile devices or on my laptop.

Chris

They are. Yeah.

Tommy

Web is really fast. And don't you think this performance run is too much for now?

Chris

No, not at all. OK, today's people are very, very inpatient. So I think that performance is crucial. So yeah, I really enjoyed this race, to be honest.

Tommy

Yeah, I know, I know. You tell me all the time if we are working together, Tom, take care of the performance. Why is the performance so slow? Did you see the vital stats? Come on, tell me what's going on.

Chris

That’s not true, he is a very good developer. Save your style.

Tommy

And Chris is the best developer and team leader I know. ❤️

Node 16.6.0 release

Chris

Ok, I think we should stop here. Everyone knows how important performance is. So let's jump into Node 16.6.0.

Tommy

OK, guys, this is part of our tradition. And as always, I'm really happy that I can introduce the new release of the Node js. This time the version is 16.6. And we do not receive a set of any breaking changes inside, unfortunately. But what we did receive is a bunch of updates and fixes to increase. You know what is important, the performance and fixing some minor bugs. What's inside? Yeah, I really encourage you to search and check the release notes and see in detail what has been updated there, because it's like too many minor points to explain now.

Chris

OK, thank you, Tomasz. I really enjoyed today's episode. Hopefully, you guys liked it too. See you and in the meantime check the socials that we create for and with you. You may find us on Twitter, Instagram, YouTube, or our lovely web page frontend.com. See you there. Thank you.

Tommy

Thank you. Bye bye. Thank you, Chris.