What's new in the front end? New libraries releases - Frontend News #2

Watch the second episode of Frontend News - the podcast about tech and front end innovations. Every 2nd week we will deliver a portion of fresh insights and news. In today’s Frontend News:

• Upcoming ES2021 release
• TypeScript 4.2 Beta
• DevTools for Chrome 89
• Node.js 15.6 and npm 7.4.2 arrived
• Upcoming frontend conferences 2021
  • Nodejs congress
  • VueJS Amsterdam
  • JS World Conference
  • React Summit
• Curated project of the week
• Tips and Tricks: compress.js library

Transcription

Chris

Hi everyone! If you are watching this video, it means you enjoyed our very first episode. By the way, you can find it here. Today I’m with Tomasz - again with Tomasz - with whom we prepared a bunch of good news. So fasten your seatbelt. Watch our cool brand intro and stay tuned.

Tomasz

Welcome to another round of hot news, please remember to subscribe to our channel to be up to date and dive into the front end depth with us. For the current session I have prepared five topics. The first one is about the ES2021 release.

Chris

The second one is going to be about TypeScript 4.2 Beta.

Tomasz

The next thing is about DevTools for Chrome 89.

Chris

Another one is going to be about Node.js 15.6 and npm 7.4.2 arrived.

Tomasz

And the last thing is about upcoming front end conferences. So does it make sense, Chris? Should I start?

Chris

It does. The video is ready. Microphone is ready. I'm ready.

Tomasz

I'm ready to. Mike is yours and let's get started. So the first one was about the ES2021 release.

Tomasz

Yes. I'm happy to announce that we can expect the release of ES2021 and inside we should see a plenty of different updates fixes. But I would like to tell you about three things that I found most important. So the first one is about logical assignment operators that will combine the logical operators and assignment expressions.
So this will be really useful because it will make our code shorter and easier to maintain. Second thing is about new Any method in promises API. This method will expect an array of promises as an argument and will return the promise that will be fulfilled as soon as the very first promise from the stable from the argument array will be resolved.

Chris

Ok, is it going to work with rejections too?

Tomasz

Yes, that's correct. The same mechanism will work also for rejected promises. Another thing: using big numbers in JavaScript is really painful, right, Chris? In the upcoming release, we have a new readable format for the binary hexadecimals and BigInt. So it's worth checking.

Chris

Ok, worth checking. But what if I want to play with the new updates? Is there any possibility?

Tomasz

Yes, we can play with these features in, for example, dev tools. So it's worth to check it on your own and play with it.

Chris

It sounds interesting. So if you want to check the full list of new proposals, you can find it under this url. Go ahead, check yourself.
So the next one is about TypeScript 4.2 Beta.

Tomasz

Yeah, a week ago we celebrated the Beta release for the TypeScript. New version includes plenty of features and small fixes updates around the currently existing one.

Chris

What are the features and fixes, Tomasz?

Tomasz

OK, so the last release of TypeScript allows us to use the rest elements inside tuple. But the restriction was we could use the rest elements only as the very last argument in the tuple array. In the new release of TypeScript that has changed, because we are unable to use the rest elements in the very first or in the middle of the tuple array. The only restriction we still need to remember about, is that the rest elements cannot be followed by any other optional arguments or rest element.

Chris

Do you use it in your projects?

Tomasz

Yes, and we are using them quite often. For example, when we are using the React useState hook, we receive a tuple. Next thing is smarter type polyP preservation that keeps tracks of how types were constructed before the TypeScript already will normalize them. Abstract construct signatures are going to be handy when we are dealing with abstract classes. What's more, template, literal expression have template literal types. And this is the answer to the inconsistency between templates, string types and templates string expression from the previous TypeScript release.
So those were the things worth mentioning, but obviously, if you want to know all of the updates, you should check the link that we will also have in the description.

Chris

Guys, DevTools for Chrome 89.

Tomasz

I don't have to introduce the DevTool. I think every web developer already knows that tool. So we have some updates and bug fixes for the new version of the DevTool. So, yeah, what we can find inside: we can find breakpoints on trusted types violations, we can capture screenshots on the view that is, beyond and is not visible. We have trust tokens stop for network requests. We've got a LightHouse 7 in the house.

Chris

I see you smiling. Why?

Tomasz

I'm, you know, I like that tool. I use it often in almost every project to measure performance or just to validate if everything's fine with the web app.

Chris

Yeah, I mean, it's a very interesting update. We use LightHouse like for every project today. So, I’m looking forward to this update.

Tomasz

That's correct. What's more, some updates around cookies debugging and CSS Flexbox debugging tools.

Chris

Are those cookies debugging tricky for you?

Tomasz

It depends on the case. But yeah, sometimes it calls an error. Sometimes some things are not readable as much as I would like to have it. So these tools have been improved in terms of a lot of things like, you know, reliability, performance, or we can even debug more and take more from the cookies.

OK, guys, and this is from the DevTools. Let's move forward. So, Chris, what's the next topic?

Chris

But before that, I was about to ask you, which one is your favorite?

Tomasz

Yeah, mainly I like all of the devtools but LightHouse is one of my favorites. That's correct.

I'm wondering what's your favorite feature from the devtools? And we are looking forward for your answers in the comments section above this video.

Chris

OK, so the next one is Node.js 15.6 and npm 7.4.2 with arrived recently.

Tomasz

A lot of point, point, point. But this is how we deal with release numbers and versions. Yeah, thanks for mentioning that. Node.js and NPM got new releases which fixed some smaller things, fixed some bigger things, put some new features.

Node.js team decided to go full on and they put a lot of updates in almost all of the fields from the Note.js library. So it means they touched tight processes, crypto library, documentation, HTP protocol, netz processes and forayed engine. So it means that almost everything has been somehow improved, touched.

Chris

Is there any place we can find a full list of the release?

Tomasz

Yes. As always, everything is being put into the release notes so you can check on your own on the Node.js site.

Chris

Thank you so much. So the last one was about front end world conferences. Today is quite tricky to attend any conference because of the hard times of covid-19. So what's the new version of those conferences?

Tomasz

Yeah, I was waiting for this topic. I really miss those days when we travel to another country to join the conference to meet some people nowadays, as you mentioned, it's tricky because we have covid-19 and it's not easy to leave your country and attend any of the conferences as they are not being organized. But what is good, it's not like there are no more conferences at all, because everything has moved into the Internet so we can attend online events.

Chris

Do you remember Berlin?

Tomasz

Berlin, I don't remember... I'm just kidding. Of course I remember Berlin and it was awesome. I would love to go there again after the covid-19 situation,

Chris

The main point of conferences, obviously, apart from the knowledge, was meeting people and that kind of interaction. Do you miss this?

Tomasz

Yes, I miss real contact with people. Most of the time we are working remotely. And yeah, obviously we it's not only about focusing on the technology aspect. Conferences were more about creating connections, you know, socializing with all of the attendees, making new friends, making new business contacts and being more integrated with the community. Come on. It's important! It's important. We cannot only put the code into our area. We should also speak about what we are doing and speak about technology, share our thoughts. I really miss that, man.

Chris

Yeah, me too. OK, guys. So you already know that we hate it.

Tomasz

Yeah, you know that we miss that.

Chris

But OK, we have those online times, so...

Tomasz

Yes. And in upcoming months there will be a lot of tasty conferences and events that you should think about to put into your calendar. OK, so what are the conferences in upcoming weeks? Node.js Congress, which will take place on February 18th and 19th. We can find over 20 speakers, also from the American Express, which will speak about the micro front end revolution in American Express.

Micro front ends? Micro front trends?

Chris

OK, guys, so I have good news for you because with the Frontend news we have the new Experts Zone playlist. The first episode is going to be about the micro front end. Tomasz will provide a lot of knowledge about this, so I strongly recommend you to stay tuned.

Tomasz

Thanks. Thanks, Chris. And yeah, if you're interested in micro front ends, please take a look and enjoy the Frontend experts.

The second conference that is worth the check is Vue.js Amsterdam, which will take place from 26th to 28th of February. Over 30 speakers will take us into the world of the vue.js ecosystem and share with us their thoughts about using Next.js or Vuex or any other too which is around Vue.js. OK, the third one is the JS World Conference that will take place on 22th -27th February. And guys, believe me this is awesome because we can find over one hundred talks!100 talks! That's why it will take five days and these talks will be from different disciplines like from the design perspective, UI, UX, from the full-stack perspective, JavaScript, front end, DevOps, everything, everything, everything!

Chris

Do you have agenda today?

Tomasz

If you want to check the agenda and all of the topics, please take a look to the conference website to find the info about the speakers and about what they were talking about.

And the fourth thing is the React Summit that will take place on April the 14th-16th. They say there will be over 40 speakers, but unfortunately, we cannot find an agenda yet. Still, we have, you know, a few months. But I put this into my calendar too.

Chris

Looking forward, Tom. Do you have any favorite?

Tomasz

It’s a good question and I will answer it in the next episode, but yeah. Please put your types in the comments section and try to guess what conference me and Chris will join next month.

Chris

Okay, guys, that it’s for today's news. It's time for the curated project. So see you soon. Hey everybody, we are going to the web site of the week today, I'm going to show you something that you might want to impress me or I wouldn't appreciate the style, but I thought, love this. So peaceful, so calm. It gives me this mood for a very long time. Guys, welcome to the bullet academy. And the beginning, when the website is loading, we can notice it's very bright, but it's getting a little bit darker once we progress and hold the mouse on this website. And there she goes: low poly, shiny 3D model of a dancer appearing and rotating in front of our eyes.

I have to hold it all the time while she's dancing. When I stop, she's getting back to previous position.

Finally, we're going to an introduction with a short explanation of what this website is about. French Dance Center. We can keep scrolling and then she appears again from another view. I must say, I'm kind of fascinated and charmed by the smoothness. I can't find an unpredictable move. But now, finally, we can read something more about the center. Between every section, you watch our ballerina dance from different views and every new part of this website, every session is about something new.

So the next part is about the artists and the prime dancers. By clicking these nice animated buttons, you can read something more about them. Those photos are actually super contrasted, quite opposite to the entire website. I think it's like a single light source, but I love those shadows. Next sections are about events and directions, but if you ask me what I miss on these pages is some kind of contact or info about the school, where it's located, and how it looks like. Or how to actually reach it. Anyway, I really appreciate this form of presentation of this bullet school.

I would love to inspire you to take yourself. And to be honest, that's it for today. See you in the next section, which is Tips and Tricks with Thomasz Krajewski.

Tomasz

Welcome, guys, in another round of tips and tricks today. I would like to show you the Compressed.js library. Thanks to it, we can optimize our images on the client site and then send them to the backend.

As we can see in the example, I have already defined the input field, which can take the multiple files being uploaded.

The important thing is that we need to define the ID because this ID will be used by us or by the library on the JavaScript site.

Remember to import the library and add it to the project, the version is 1.1.2. So let's check how to use the compressed.JS library. We need to import the library from Node modules and initialize it. So we have our handler, our instance of the compressed class, let's try to read our images and check how the optimization looks like and how to deal with it. This is quite simple because the thing we need to do is to pass the ID.

And the second argument is the configuration. So we can define, for example, the size that defines the upper boundary of our image file size.

Let's say we want to have a maximum 2 megabytes.

The quality of the compressed file should be, let's say, 0.8.

So this is our quality and it will decrease the parameters of the image file. The compress attach method returns the promise so we can check how our data looks like after resolving the promise.

Let's check it out. OK, we've got the very simple code and let's check how it works. OK, we have two files and let's check the first one.

We have database 64, let's scroll at the end. This is the params I want to show you the bridge image file.

The initial size of the file was 0.45 megabytes. And as we can see, the end size, it's decreased by the lower quality modifier. We can also observe the params around weight and height. So obviously we have decreased the size of the images. Um, and here are some interesting values like size reduced in percent, iterations. Um, so as you can see, this is very simple to be used. The basic usage is like - one, two, three.. ten lines of code - including the console.log and breaks between the important library usage.

So I highly recommend to include this library into the projects when we need to deal with the optimization, because sometimes we don't want to have a really big quality of the image file. Instead, we want to send it, let's say, straight to the storage and storage can have some limitations of the file size. So instead of sending it through our backend where this logic, similar logic happens, we will implement this logic on the client side and send the files straight to the storage, which really makes sense.

OK, if we can decrease it more, let's use 0.4 and let's check what will happen.

So let's use another bridge - file and… wow, it has 71 percent of smaller size than the initial size of this file, which is really impressive. As you can see, by adjusting the single parameter, you are able to change a lot of attributes in our image.

And as you can see, that weight and height is the same as in the previous example.

OK, obviously we've got more attributes to play with, like max weight,max height, resize and much more. I highly recommend taking a look into the repository and the link is in the description. So what we can do with this data, we can, you know, play with it. We can create form data and rub it into the blob file and send it to our backend or to our storage. We can do whatever we want.

And this is just a few lines of code and that's it. This is a really simple example, but in my opinion, it's worth it now. And thank you for your attention. See you next time.

Chris

That’s it for today. Thank you for your attention. If you like the materials, the topics are interesting for you or you have just a good mood. Remember to click the like button and subscribe to our channel to let us serve the best news from the front end world especially for you.