New speed of Gatsby, Experimental API of Deno and VS changes - Frontend News #5 | frontendhouse.com

Watch the Frontend News #5 - the podcast about tech and front end innovations. Every 2nd week we deliver a portion of fresh insights and news. In today’s “New speed of Gatsby, Experimental API of Deno and VS changes” Frontend News:

• 00:00 - Intro
• 01:42 - Agenda
• 02:30 - Flutter 2 has arrived
• 05:04 - jQuery 3.6.0 Release
• 07:06 - Electron 12.0.0 Release
• 08:14 - What’s in VS Code v1.54
• 09:40 - Google is speeding up its release cycle
• 10:37 - Deno: experimental support for the WebGPU API
• 11:56 - Say hi to the Gatsby 3.0
• 14:41 - Curated project
• 16:36 - JS Tricks

Transcription

Chris

Hey all ambitious developers! Today we have a bunch of great news for you guys, and as previously, we're going to make some changes. But first, let's play the intro.
So we're on the fifth episode of the new podcast. It’s me - Krzysztof, I'm here with my teammate Tomasz. Wait. Where is Tomasz? There is noTomasz because today we should work remotely. Sometimes as a developer, you need to travel to meet your clients. And this is the case. So, meet. Tomasz, how do you feel at the office alone?

Tomasz

Hello, everyone. Well, it's different. I feel alone. I feel abandoned. And I'm really sad that we cannot do this together in a single studio. But I'm really happy that we set up all of the equipment and we can do this even remotely. So I cannot wait for this fantastic news we have prepared for this chapter. And Chris, how are the things on your site? How is the weather? How is everything?

Chris

Everything is perfect on my side, but I cannot wait to see you in the office, take a coffee and start the next 6th episode of the news. But for today, let's kick off the agenda. Tomasz, what is the first.

Tomasz

For today we have a bunch of great news starting from the beginning. We would like to speak about the Flutter 2, which has arrived recently.

Chris

The next one. Come on, guys. jQuery 3.6.0 Release.

Tomasz

After jQuery we will speak about Electron version 12.

Chris

We show you what's new in VS code update.

Tomasz

And we will be talking about the Google is speeding up its release cycle.

Chris

There will be a small amount of knowledge about Demo and its experimental support for WebGPU API.

Tomasz

And at the end, we will say hi to the Gadsby version 3.

Chris

We’ve said all so let's start.

Flutter 2 has arrived

Tomasz

As we said at the beginning, we will be talking about the Flutter 2, which is the brand new version, brand new release for this tooling. And I'm really proud to announce that Flutter 2 is dedicated not only to building mobile applications, but the breaking change in the Flutter 2 is that we can develop an application to any kind of platform we can imagine. So we will have iOS, Android Windows, Mac OS and Linux operations, operational systems. That sounds amazing. It will be supported by Chrome, Safari, Firefox, Edge, and we can even, you know, run the Flutter apps on TV, smartwatches, and some smart house systems. And believe me, we can also use Flutter to develop an app for your car.

Chris

For my car? That sounds amazing. I have Toyota and it has no Android. Yeah. So I can't I can't develop for my car. But guys, maybe you can develop for your cars. But this news. Well it's amazing. I'm having one car through them all. Oh yeah.

Tomasz

Sounds like this magic ring from the Lord of the Rings. Yes. You have one ring to rule them all. I'm really happy that you mentioned that you have Toyota because I don't know if you already know that Toyota has a plan to use the Flutter for their next gen cars to write all the applications, all they set up with the Flutter, man. So, well, maybe in the future you will be riding a car with your own applications on it.

Chris

What a coincidence that I mentioned Toyota, isn’t it?

Tomasz

Great guy. So, yeah, believe me, it's worth checking. And the link is in the description for the documentation. Check it out on your own and it's worth playing with the Flutter because it will be and it is really nice and advanced tooling to build your apps.

Chris

Tomasz, is it still built on the Dart?

Tomasz

Yes, under the hood it's still the Dart. And so you need to learn a new language which is not so hard.

Chris

Sad face.

Tomasz

Sad face. You want everything to be in JavaScript. I know. I know this.

Chris

Exactly. Let’s go to jQuery 6.6.0.

jQuery 3.6.0 Release

Tomasz

Yeah. We have a new release for jQuery 3.6.0. So in the newest release we can find a bunch of important bug fixes along with some improvements for the currently existing codebase. So yeah, we can find fixes for retrieving dimension's on table roles in Firefox, which was crushing or the crush in Chrome, when to focus out even on the removed element. This has been fixed. So if you want to know what's more, just, you know, check the release notes.
And we are still waiting for the January version 4, it's still in progress. But in the future, we should expect the brand new jQuery 4.

Chris

When was the last time you used jQuery? I think my last project was even before I Barebone.js release, I don't really remember what it was some time ago.

Tomasz

I remember I was using jQuery at the very beginning of my career. I was working with you, Chris. I don't know if you remember. I know you remember. Yeah. We were working together and the first projects we did like simple pages. As a newbie I was, you know, responsible for some simple apps, simple pages. I was using jQuery to achieve what I want. But from my observations, jQuery is not only for handling like the simple UI interactions, because we can use jQuery for much complex use cases.
It depends on the architecture and on some assumptions. So I know that everyone is laughing of jQuery, but it's still one of the most widely used JavaScript tools.

Electron 12.0.0 Release

Chris

So it's still a very big part of the market, according to the last post we saw, so well. Great, the next one was Electron twenty point zero.

Tomasz

No, man, close, close enough, but it was twelve. We need to wait for twenty.

Chris

OK, so guys, the next one was about electron twelve point zero.

Tomasz

Exactly. So let's let me present the brand new release of Electron 12. We have some breaking changes inside the newest version, along with some minor fixes or improvements. So the most important fact that we should notice is that the Chromium, which is under the electron, has been updated to the eighty nine version, along with Node.js, which has been updated to version fourteen point sixteen. So the electron team is trying to keep up to date all the tooling that is under the Electron and is responsible to run our code.

Chris

Sounds good. I haven't used it in a commercial project yet. Is it all about the Electron? Can we go to the VS Code?

What’s in VS Code v1.54

Tomasz

Yeah. Now it's time for Visual Studio Code and for those who are using it daily and have the brand new Macbooks with our M1 processor. This should be really good information because from now you will be able to use visual studio code without any emulator tool like Rosetta. So we should get the better performance working with the Visual Studio code and everything should be processed much faster, more efficient and make our daily work much easier for us. I really like it, but unfortunately I do not have that and one processor yet, so it doesn't affect me. But I believe there are a lot of developers who are using visual studio code with new books and for now they work will be easier. So, yeah, that's great if you want to know more: what are the changes inside, fixes. As always, the link is in the description under this podcast. So. Exactly, exactly. You're pointing to the correct place. Let's do this together. One, two, three. Correct. Go. Yeah, yeah. Let's let's be serious for a while. I think it's in the description. Check it on your own and let's move forward to another topic which is...

Google is speeding up its release cycle

Chris

OK, guys, the next one is worth checking: the next one is about Google.

Tomasz

OK, that news will be short, but pretty important. So Google decided to decrease the time between the next releases of the Chrome browser. So they shorten the period of release from six weeks to the four weeks. What does it mean exactly? It means that we will obtain all the bug fixes, improvements, updates more often because every four week and this should react to the, you know, dynamically changing web ecosystem because all of the tooling evolves pretty fast.
So the Google team decided to be one. step ahead and do the releases more often, and that's it. We love those guys.

Chris

we love those guys. They did a really awesome job, man.

Deno: experimental support for the WebGPU API

Chris

Guys, we have two last pieces of news. The next one is about Deno. Tomasz. go ahead.

Tomasz

So the Deno team decided to release the new version, which is one point eight, and allow us to use their experimental API to play with the Web GPU. It means that we can run our code, we can directly program on the graphical processor unit, and that opens a lot of new possibilities for us. Imagine that you have a complex machine learning system and everything is being written in JavaScript. As we know, the JavaScript in most of the cases, this is the single threat language and it's not really efficient if we are talking about processing tons of data or processing some complex algorithms.
And now we can move all of this logic straight to the GPU of our laptop or computer or our PC and trigger this code in there parallel to what we are doing with the UI. So it opens a ton of new possibilities.

Chris

I think this is amazing, I have no more questions, thank you for the explanation. The next one is about Gatsby 3.0...

Say hi to the Gatsby 3.0

Tomasz

Exactly. Thank you, Chris, for mentioning that. Let's say hi to Gatsby 3.0. I really like this tool. I remember I did a lot of projects with The Gatsby. Nowadays I'm using Next.js, but Gatsby is still a big player on the market and it's worth being up to date with this tool. The creators of the Gatsby promise that in the new release, The Gatsby would be sped up by 80 percent for the local development mode. So creating higher ups will be faster and easier from the developer perspective. The faster builds of our production code makes the deployments also be faster and our code will hit the server more frequently and without any delays we had in the previous versions. The Gatsby team also fixed some things around performance and improved a lot in terms of how the JavaScript is being handled during the static side generation, for example. And this makes our apps receive the higher notes in the Lighthouse. So there are lots of improvements. And Chris, if you want to know more, I highly recommend you to...

Chris

Yes, I want, I want! I like the ratings in the Lighthouse. And you already mentioned this. So how high can they go?

Tomasz

Yeah. So they increased the rating by. Well, it depends, but the core vitals has been increased much like by almost 10 percent by default. So even if we had like 98 percent that we should receive ninety nine or even hundred by default. But as we know everything depends on the developers and how they will develop the app. It depends.

Chris

It depends. I love this when we do the estimation. It depends, guys.

Tomasz

Exactly. OK, so that's all from the news side from us. I hope you enjoy the show and you get the knowledge you were waiting for. Chris, you want to add something.

Chris

Guys, of course I do!.So I want to invite you for a curated project and tips and trips. Great.This project with me and tips and tricks with Tomasz. See you in the next section. Bye bye.

Curated project - https://marseille.laphase5.com

Chris

Hey, everybody, I'm sure you’ve heard about Marseille city, one of the largest in France and the biggest of the Provence region. So a couple of days before, we had a chance to start exploring the city online, I'm sure you already know that it is probably the only way to visit the city today unless you live here.
So after a short loading time, if I quite close there, by the way we see this question, why not discover the city differently this year? Let's click this button and wait until magic happens, which for starters, shows Venezuela moving to Marseille city. I really appreciate this kind of animation. So now we see the part of this city, the whole map is divided into districts. We can zoom in, zoom out, move them up, whatever. It's like real time rendering 3D model of the whole city infrastructure. There are many, many checkpoints you can go through and explore with 360 Panorama View. The idea was to make it authentic. So you are not only going to see breathtaking landscapes, but you also see restaurants bigger and more interiors, shops, factories, guys. You just enter this experience and explore yourself. You will enjoy it.
Every panorama viewport has its own description and even geographical coordinates for those who are obviously curious. But the main advantage of this project is that it connects many, many industries together.
We read about the factories and quickly go to their websites. We discover many facts we didn't know about, for example, popular alcohol production. You can also easily navigate through all the text points in the menu. OK, guys, how do you like this website? I really enjoyed it.

JS Tricks

Tomasz

Hello guys. This is another round of tips and tricks with me - Tommy K. Today. I would like to speak about a problem that is quite common, but maybe not so observable, especially if you're at the beginning of your front end journey or somewhere in the middle. You're not always thinking about it. So imagine you're building the page. It doesn't have to be a complex application. Let's say it's a landing page where you display a lot of images. And those images obviously have different sizes. They can load faster, they can load slower. But you want to give the user the best experience. So what can you observe when you will initially load the page? Is that some of the images may not be displayed right from the beginning.
You will see the blank placeholder without any kind of information that you are actually doing something in that place. So it does not look good and it does not offer a good user experience at all. There is a small improvement we can do around how we deal with the images.
For example, I will use the React and to present the example, I will use theReact and we are going to create the image component that will display the loader and hide the loader right after our image has been finally loaded. Does it make sense? Yeah, it's pretty simple, but I wanted to share this with you to present how fast you can achieve a better user experience and you can make your image component better without any libraries or any extra dependencies.
OK, so let me create the image component. And yeah, if you are looking for a really good IDE online, I highly recommend Code Sandbox. You can play not only by yourself, but you can play the same project with all your team. So it's like having your IDE and the configuration of a project in the cloud. And it's really, really, really amazing. OK, so let's create our image component.
And yeah, obviously what it will obtain from the site, it will be source, OK, because we want to display an image coming from an external source and it's good time to mention that to fetch images we will be using LoremFlickr service that offer us obtaining the random images.
And we can define some params like, you know, with height or even what kind of what type of images we want to see.
And there is much more configuration, obviously, but we will be using at the basic usage.OK, so we've still got nothing. Still nothing.
Yeah. I will add some styles later, a little bit later. Let's create the structure first. So this will be our container for the image. Let's give it a name like last name. It will be an image container and obviously we want to display an image that has the source from source and yeah, I'll turn translate if I will not define it. It will underline this and I don't want to have any underlying. So let's call it just a test image, OK? And see what happens next. Yeah. If I really use image wording, alternate text it gives me an error. This is interesting. Let's import our image.
OK, and we did not define the source and for the source we are going to use the Flickr and let's say Paris. We will display the images for Paris. Yeah, it looks pretty fast, but let's use the bigger size. It will indicate the longer loading. OK, see - there is some period of time that we need to wait until the whole image will be displayed, OK, and this is normally ignored on almost all of the pages. But our page will be unique and we will use loaders to indicate that our component still doing something.
So let's move forward. We want to display the spinner inside the image component and hide the spinner right after our image has been loaded. So how to achieve that? We will hook into the onload function which is the native, let's say native event for the image tag. And this is onload. And what we want to do onload is to set some value that will indicate that the image has been actually loaded. And to achieve that, let's use react hooks, use state false.
So we say that from the beginning our image is not loaded, which is obviously true. Said is loaded. OK, great. And after our image is loaded we set it loaded through. OK, great.
Still we do not have any kind of indicator. So let's display here. So we need to check if it's loaded, if it's not loaded, we want to display our loader last name because it's React. Let's call it loader. Does it make sense? I believe so. Great. Let's work on the loader a little bit.
It won't be a complex issue because we will use the CSS to define our loader. And to keep it simple, we have some empty up class. Don't worry about it for now. OK, so we've got our loader and let's say we want to display it in a line block. Later, maybe we'll display some text or not, we will see. OK, and we want to have it like 80 pixel.
And that's our container for the loader. And what we are going to animate is the border. So we will use the after element. So the element to achieve this animation. Let me put some attributes to achieve what we want. We need to define the size and we want to display it simpler so our border radius will set it to 50 percent. And we are going to animate the border. So we need to define it and it will be six pixels solid. And for the color we will use just pure black. And we need to override the color because for now it will be the full circle and we want to have some gaps in it. So the border color, the first quarter will be black. The second one will be transparent. And the third will be black. The third will be black. And the fourth one is going to be transparent. And we want to use animation, custom animation we are going to create, and it will last 1.2 seconds and it will be leader and infinite. Great. So one step, to be there is to define the loader animation. The animation will be simple. We just want to rotate our border. And for the very beginning, yeah, transform rule, rotate and if we achieve one hundred, so it will be that the very end of our animation, this is our target. We want to transform and rotate with three hundred and sixty degrees. OK, that has to work for us. Hopefully, we will see.
I need to check if we imported files. So for now, let's hide the image and think if the loader is there. Yeah, we see the loader. Um, it's OK for us for now. So let's check how it looks. It's not what we want to achieve, let's clean it up a little bit, so our image container needs a little bit of styling. Let's assume the case that we have the predefined size of the image just to make that example simpler.
But obviously the width and height of the image can be fluid, depending, for example, on the container. And you can build a grid, you can use the flex box. We are going to use pixels to define the width and type. So our images will be like, let's say, 200 pixels tall and 300 pixels wide.
OK, we don't want to show the overflow of the image container and we want to adjust our image to the full field, the container with the width and height will be adjusted automatically. Great. Our image is resized, but it's still not the perfect solution. As you can see, we have some jumping behavior like below there is for one millisecond maybe, it's about the image. As you can see, the image is being displayed under the loader and we don't want to have such behavior. And for this example, we are going to use the absolute position for image and our container should contain the position and we will put some position absolutely in here and define the left and as the zero zero to start from the left corner. Great.
Our image container is going to have everything centered. I mean, we want to center our loader. So let’s see how it behaves, not perfect. OK, um. Why not? Why isn’t it working? Still not. Oh, come on. OK, we will resolve it a little bit later.
The important fact is that we want to add some, you know, background just to make it a little bit more attractive. As you can see, we displayed the loader and right after the image is being fetched from the server, we replace it with with this image.
Cool. And what we want to do next is to support the errors, because not all the time our image can be fetched with success.
We have the on error event we can hook in and set error to true. We do not have this function yet, so let's use it from the hub - set error.If there is an error, we want to display with maybe some text, let's say, not found, and if there is an error, we don't want to display the image at all. OK, we have a small error here. We need to use the opposite value for his error to display the image because there is no error, we want to display the image. Yep, it's obvious. So sorry for that. OK, we can move forward. Let's check if it works. We had some small bug because we need to display the loader and we want to display the loader when the file is loading or if there is an error. OK, and we want to display it in the columns. Right. Justified content? That's correct. This is why it's not being centered. So this is how our placeholder will look like when the image is not in there. Um, so let's play with it a little bit.
OK, we have one image for now. OK, as you can see, it works. Let's check out how it will behave with the items, maybe not feel like a lot more images and let's customize it. So let's put some cities in here. Oh, man, so many cities. It's enough, I don't want to display all of the cities all around the world, so let's check it out.
Great, as you can see, the different images have a different timing when they are fully fetched and thanks to our loader, it looks a little bit more attractive for the user instead of displaying the blank placeholder without any image.
So I highly recommend to think about the user experience and to take care about the details. Yeah, that's it. It works. And we achieved our assumptions from the beginning. I want to see if the error will be handled properly. OK, so some of the images are not being fetched. That's because we have modified the url and obviously there is no image under that url. OK, guys, thank you. Thanks for your attention. Please don't forget to subscribe to our channel and leave likes and comments. See you soon.

Chris

Ok, guys. That's it for today's episode. I hope you like it. Follow us on YouTube.

Tomasz

Check our Instagram.

Chris

Come on, again Instargam? Check our Twitter, Spotify and the playlist. See you soon.