DevTools Updates, Chrome Boosts PWA and New Releases - Frontend News #11 | frontendhouse.com
Guy with notebook

June 11, 2021

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

Krzysztof Wyrzykowski

CTO

Tomasz Krajewski

Frontend Developer
Share

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?

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.

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.