DevTools Updates, Chrome Boosts PWA and New Releases - Frontend News #11

Watch the Frontend News #11 - the podcast about tech and front end innovations with our hosts - Chris and Tommy K. Looking for a team for your project? Ask us for free consultation.

What is Frontend News #11 about?

• 00:47 - Contents
• 1:53 - Chrome 92 boosts PWA. PWA is Progressive Web Application - basically it is an application which can run in a browser and looks like an application
• 5:18 - DevTools updates. DevTools is a set of tools for web developers built into Google Chrome
• 8:47 - Node - Another great release. Node is the regular guest of Frontend News as a bellowed by Frontend House developers JavaScript runtime on Chrome's V8 JavaScript engine
• 10:38 - Happy Birthday Node!
• 11:00 - Maps and WebGL - what’s in common? Web Graphics Library is a JavaScript API for rendering 3D and 2D graphics. Check the video about projects for Google Maps
• 13:29 - Electrifying Electron Release. Electron is a framework which enables building native applications with JavaScript, HTML, and CSS
• 14:44 - React Components Libraries

If you have any development issues or have an idea for application you can always contact our Frontend House experts and have a free consultation.

Transcription

Chris

Hey, guys, welcome to yet another Frontend News podcast. Today is the 11th episode, and we are shooting. Tomasz, do you miss me? How was your week?

Tommy

Two questions, two hard questions. So the first: my week was really amazing. I did a lot of different things. One of them was to take you to the airport. So let's just ask you, how are things on your side?

Chris

On my side is good. Thanks for asking. Fortunately, I'm no longer in Lodz. So we need to, like, you know, do it again remotely. But I'm very curious about this. So Tomasz, what do we have on the plate today?

Tommy

Yeah. So for the first news, we will speak about the Chrome 92 release and its correlation with the PWA apps, the next one is going to be about DevTools Updates. Yeah, you're right.

And the third one and the fourth one, both of them will be about our lovely Node.js - the one will be about the updates and the second one will be about no node.js birthday. One more will be about Google Maps and WebGL support.

Chris

Exactly. The sixth one will be about Electrifying Electron Release and the last about multiple React components. So I think we're ready. Are you ready?

Tommy

I'm ready.

Chris

I think it's an intro time! OK, back. I'm so excited about all of this. They always have a bunch of good functionality for us, so we'll see.

Chrome 92 boosts PWA

Tommy

Yeah. Before I will focus on the main thing, I want to mention that the 92 version has a lot of improvements, new functionalities, new feature bug fixes, and more and more and more and more. I want to take you through a few of them. So we received the new payment handlers for standardized payments, method identifiers. We’ve got updates around Bluetooth. So now web bluetooth manufacturers contain data filters, we've got the painted origin flag, which is supplied to the resource timing. And we received the media session API. It's connected with video conferencing actions nowadays. A lot of people work remotely, so it's a natural step to support more and more in terms of the conferencing and video calls. And the last thing which is the most important from my perspective, is the new JavaScript file handler API. Yeah.

Chris

Oh, so what it's all about.

Tommy

Yeah, it means that we are able to play with the file system straight from our website. We don't need a server, for example, to be able to open a directory and open the file. We can do it straight from our web application.

Chris

So what, what are the consequences?

Tommy

OK, so the consequences are that if we have a PWI application, we will be able to see this app in the context menu once we click on the file by right mouse button open with and our website will be one of the options if we obviously support this file extension. So we will be able also to fetch the files from our directory and process them inside our app. And it depends on the developers which extension will be supported: we can support anything.

Chris

I can imagine that it opens like totally new worlds for hacking and security issues and so on. And you know how they're going to prevent this.

Tommy

Yeah, this is a good point. I believe it opens new areas for the hackers, but I also believe that the user has to give permission. And I believe that it won't be like you are able to go in each directory on this. So probably there will be something like shirt space or short directories that you will be able to open with such an editor and such file system. This is something that I need to check on my arm because I don’t know the topic as deeply as your question is. So I recommend to all of us to check it on your own. And all the materials, all links are in the description as always. And if you miss it somehow, please visit our frontendhouse.com and likims.com websites and fill the contact form. We will answer and give you the materials.

Chris

Exactly. And the last question about this one is, is live yet or work is still in progress?

Tommy

Yeah. So as soon as we receive the new Chrome, we can use it and I believe we will receive the new Chrome. So yes, it's, it's able to be used.

Chris

OK, thank you. Staying with Chrome, we also mentioned some DevTools updates. So what's new in the DevTools?

DevTools Updates

Tommy

Yeah, I cannot imagine my daily work, my daily routine without DevTools. Yeah. I'm using them in almost every application even with React Native. So it's really required for our daily work. And that effort also receive new updates with the new Chrome version. We received the new DevTools version and what's inside. Well, a lot of things, but something that's worth mentioning is probably New LightHouse, which is a seven point five version. So you can measure your performance more precisely.

Chris

Even better. The next thing is that we receive the improved course debugging support. So now you can debug the cross origin errors with more detailed information. And probably you struggled a lot with CORS in the past. Chris, do you remember some issues with the CORS? No, no. I think you're lying. I see in your eyes.

Chris

Of course I am. Of course.

Tommy

So now we receive the tools that will help to debug the CORS problems more precisely. The next update is that now you can view the order of the source elements on screen for better accessibility inspection. It means that you will see the order of the imports and how it is going on the fetching app files. Another thing is that he will be able to redeclare the const variable declaration in the console, so I know that const has these values you cannot reattach, but in the console you will be able to do this and he will receive no errors. And the last thing I want to mention is that we received this great preview and now we can play with it with these new tools and prototype our grid without putting a lot of code inside.

Chris

What do you mean by prototype?

Tommy

So you are able to use this CSS Grid editor in the DevTools to create your grid. And as the outcome, you will receive the proper styles that you need to copy and paste into your IDE.

Chris

Sounds good.

Tommy

Yeah, it could make our work a little bit easier, like, you know, when you're working with the grid. It's not like you only need to set the display attributes. Most of the time you have to set more attributes. So maybe somehow it could save our time just to verify some conceptions.

Chris

Yeah, exactly. I mean, I fell in love with a display grid that is like something that we were missing. We were missing CSS for like ever. But we are always struggling with how to start this properly.

Tommy

So it's good to have that kind of to just ask a question like, do you remember using floats for element positioning?

Chris

Of course I do.

Tommy

I wonder if someone uses a clear fix nowadays. Man, it's just crazy, crazy times.

Chris

It was. Yes, exactly.

Tommy

Great. Let's move forward. For the DevTools that's it. So if you want to hear more, just visit their website. Probably you will find more detailed information about other releases or just another bunch of functionalities that are in the current release.

Node - Another great release

Chris

Yes, indeed. So that’s it for the DevTools updates. Let's go to our lovely Node.js.

Tommy

I'm really glad that you mentioned Node JS. OK, guys. So we have a small update on the Node.js side. The release notes point out that we have updated CLI, so now we have a shortcut to see if we want to set the condition flack, like when we use the Node CLI. OK, so that's the first thing. And the second thing is that we now have workspace support when we use the NPM install comments. That’s it, that was a really short list.

Chris

Yeah. So let's jump to something more important, the birthday. Tell us anything about the numbers.

Tommy

OK, so I checked that out on Twitter and I found out that Node turns 12 years old. OK, so it's 12 years since the Node JS has been released and since the very first version, 0.0.1, we have had a lot of Node JS releases. It was like six hundred and sixty nine releases.

Chris

That's why we talk about new releases every episode.

Tommy

Yes. Of 33 thousands of commits. I mean, even more and more, because every day there are more and more comments incoming to the repo. We have almost three thousands of contributors. There are over 13000 open issues and twenty four thousand six hundred and seventeen pull requests being open.

Chris

Well, it sounds like the last website you built.

Tommy

Yeah, for sure. For sure.

Chis

OK, good job, Node. We are happy for you.

Tommy

Yeah. Happy birthday.

Maps and WebGL - what’s in common?

Chris

OK, so now it's a very important topic for me because I love Google Maps and I built a lot of projects for Google Maps and even mentioned one of them in my talk with Olga. So you can check it in the description as well. How Google Maps has other support for WebGL and Tomasz, could you elaborate a little bit?

Tommy

Yeah, thanks, Chris, for mentioning another news. So, guys, WebGL, we know what is it? Thanks to that library, we are able to use that GPU to process our code, our instructions, and we can do it from the JavaScript side. That's good. And Google Maps - we also know what it is. So I won't explain it. But what's in common? Yeah, last year - until today, the developers were able to use something that's called overlay view to draw anything over the map.

So if you want to customize the Google map and add some, for example, pins or any custom objects you want to put on the map, you are using this extra overlay view which was put like, you know, we have the map player and overlay view layer. And these are two different layers. OK, so you are painting something over the map, not on the map, but over. Ok, this is the difference and the newest update that comes with the Google Maps and they just accommodate their maps and WebGL to let the developers directly paint anything on the map.

So there is no extra layer that is over the map with the transparent background, you are painting and putting objects directly on the map. So you are able to create 2D or even 3D maps with your own custom objects being put in there without a lot of effort. And that's everything thanks to WebGL. And if you want to check more, just check their documentation because they explained how to use the newest WebGL layer in Google Maps. And I believe you are going to love it, Chris. I believe you're going to love it, too.

Chris

Of course I'm going to love it. And I will take this after our recording. Yeah, I'm very curious. So going from Google to Electron.

Electrifying Electron Release

Tommy

Yes, yes, you're right. So we received the thirteenth version of the Electron and there are a bunch of smaller updates, smaller fixes. But things that are worth mentioning are that they are using the Chromium 91 as the browser they close the app inside. And the second thing is that they are using the V98.1 version engine to handle the JavaScript code. So these two are a really important things because the 91 version of the Chromium is different than the previous one. And I believe we have mentioned it in one of our Frontend News chapters.

Chris

I think so, yeah.

Tommy

Yeah. So, guys, if you want to listen about Chromium 91, just go on our website frontendhouse.com and look for the related frontend news episode.There are bug fixes. I mentioned a lot of stuff, everything in the release notes, links in the description. So you know what to do.

Chris

Exactly. We all know what to do. So yeah, simply let's jump into the last topic, which is React Components Library.

React Components Libraries

Tommy

So as we know, React is all about building components. And during the lifetime of React, the developers community released a lot of different libraries and UI packages that contain some predefined components we can adopt in our apps. And that's where the screen sharing comes in. I want to share my screen. OK, great. Now you should be able to see my screen. This is the power of the inception.

Chris

I see myself.

Tommy

OK, so this is the retool com. And on their blog I found an interesting article from the 20th of May from this year. Obviously, that includes links to the really useful libraries with the React predefined components. I don't want to go through all of it, but retool is one of the component libraries I want to show you. So, yeah, when we are using those ready to use libraries, and that's because they helped us to build a really fast prototypes of our apps and put a good looking good styles by default right from the beginning.

So as you can see, the retool contains a lot of components. And this is the tool you can use just to drag and drop and build your website, build your app without putting a single line of code, because, yeah, that's really fancy. And I believe I mentioned about the retool in the previous or two episodes ago. So this is something that you probably may know from the previous frontend news podcasts. But yeah, we have a lot more libraries in here, like semantic ui react components that contain a lot of buttons, typography, class sizes and stuff like that, obviously there are some, you know, icons libraries. So if you want to be up to date with the current tooling from the React environment, it's worth checking this blog post bootstrappers, once one of the most popular components libraries these days, not only from the React, but from the whole JavaScript world, I believe. And as you can see here, we have a nice documentation and a lot of components that are really simple to be used.

So, yeah, just check it on your own. I don't want to take a lot of your time and show all of this. I don't want to take the fun from you. So, yeah, this is it. I just want to show you. So, yeah, hopefully you will like it. And that's it. Chris, that's all the news I prepared for today.

Chris

Thank you so much for the presentation. The last one. Well, it was amazing. So. Yeah. Is it for today.

Tommy

Yes, that's it. Everything that we prepared has been said. It's our last call for you guys to check our social slide, YouTube, Instagram, Facebook and all the websites. See you guys next week.