What's New? Releases: Yarn, CSS, APIs, HTML - Frontend News #15 | frontendhouse.com
Guy with notebook

August 6, 2021

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

Krzysztof Wyrzykowski

CTO

Tomasz Krajewski

Frontend Developer
Share

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?

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. <3

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.

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

Frontend Developer

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.