Well optimized slider and 3D animations in JavaScript - Frontend News #3

Watch the Frontend News #3 - the podcast about tech and front end innovations. Every 2nd week we deliver a portion of fresh insights and news. Today we will discuss:

• 00:00 - Intro
• 01:28 - Agenda
• 02:01 - NPM 7 Cli Release
• 03:53 - Safari Technology Preview 120
• 05:24 - Incoming Firefox 86 release
• 07:17 - Hot Projects Top Lists
• 09:31 - Node v.12.20.2
• 10:59 - Curated project of the week
• 13:20 - Live Coding - JS Tricks: Slider Component with Animation

Transcription

Chris

Welcome to another Frontend News podcast, guys, it's great to see again, and it's great to serve you news all around the front end world.
Last week, we had a little contest about what's the most favorite conference, and I think we already corrected the answers, I voted for Amsterdam. However, let's find out which one is your favorite.

Tomasz

Yes, Amsterdam looks really interesting for me. I would choose the JavaScript conference, which is like the biggest from all of them. And there are over 100 talks from different disciplines like UI, UX, front end, back end. Everything worked in one place around the JavaScript ecosystem. Does it sound good because for me it's really, really interesting and hot. So I will be there and hopefully you will be there too. So message me and let’s me. Why not.

Chris

Sounds amazing. I'm wondering because today we are such influencers of a front end world and I’m wondering where our invitations are. But OK, let's wait. Maybe still in progress. So after this way too long an intro, we are ready to kick off the agenda. So Tomasz, what’s in?

Tomasz

OK guys for today there is a bunch of news from the front end. As always, as a first topic, I would like to preview the NPM 7 Cli release. The next one is going to be about Safari Technology. Preview 120. The third one is about the upcoming Firefox 86 release. Then we’re going to talk about Hot Projects Top List.

And at the end, I would like to introduce the minor updates for the Node and it will be version v.12.20.2.

Chris

So many points again. OK, so let's start with the NPM 7 Cli update.

NPM 7 Cli Release

Tomasz

It wouldn't be a really game changer. Another update for the Cli. But what we get is the workspace. NPM will receive a workspace. It will be similar like in Yarn package manager.

Chris

What is a workspace, Tomasz?

Tomasz

OK, so workspace. We can imagine it as tooling to be able to manage multiple packages within our project. Inside our project from the top level package, from another top level project. We can use it, for example, when we are dealing with the micro front ends or mono repo or any other setup that requires us to create a lot of different types, a lot of different environments and be able to manage it from one place. So this is what a workspace being used for. Yes, yes. I used it with the Yarn previously, maybe not in commercial projects, but I use it on my own just to experiment.

I love to learn new things and it's pretty easy to, to, to use it to define like, you know, the top level manager and split it down into minor projects. It's easy, not a lot of configuration to be able to handle, like for the basic usage, right. If we are doing something more advanced, obviously we need to dig deeper into it and check the documentation. But it's worth seeing on your own. The link should be somewhere there.

Yeah. Under the table.

Chris

OK, you mentioned mono repo? So guys, if you are against monorepo, you can find our material about micro frontends, which is in the second playlist, which we call Experts Zone. OK, the next one was Safari preview. So what's new?

Safari Technology Preview 120

Tomasz

Yep. Yeah. And nowadays most of the developers use Google Chrome, I believe.
But still there are a lot of useful things around the safari itself. Yes, but I will speak about it a little bit later. Let me now present the updates. So if you have the MacOS with the Big Sur or MacOS with the Catalina, you can use the new release of the Safari. And the updates will be around a lot of things like starting from the Web Inspector, fixing the scrolling issues, CSS, JavaScript, web audio, accessibility, payment requests..

Chris

Wow, sounds like a lot of updates this time? I hope they won't break anything.

Tomasz

We will see. OK, guys, so if you want to find out more about the upcoming Safari technology preview 120, the link is, as always in the description.

Chris

Hopefully. OK, do you use Safari?

Tomasz

Yes, I used Safari, for example, when I worked with React Native projects and when I ran IOS built in simulator, I used Safari and Web Inspector to debug the application.

Chris

So you mostly use it for debugging.

Tomasz

I use it only for debugging, to be honest.

Chris

And there are also updates for Firefox. So what's in the Firefox?

Incoming Firefox 86 release

Tomasz

New Year, New Fox, a lot of fire and it gives the Firefox! And the versioning is 86. So in the upcoming release, the Firefox team has focused mostly around the Web extensions API.

Chris

Sounds good, but could also explain what the web extensions and Web extensions API are?

Tomasz

This is the browser API that gives the developers the possibility to write their own extensions and include in the browser. You can cover whatever functionalities you want to and you need to in your daily work on just daily usage for the browser.

If we know what it is - the Web Extensions API, let's talk a little bit about what they improved. So mostly it's about the permissions. If the extension has host permissions for the particular top, it's no longer required to get some extra permissions for that extension to get, for example, page title or redirector or any kind of metadata. So it's easier to obtain all the information about the top inside the extension. And this is like the biggest update for the upcoming release.

Chris

That sounds good to us. Is there anything else provided or it was mostly about the web extensions?

Tomasz

Obviously there are some minor bug fixes, but if you're interested, I highly recommend checking what's inside in the release notes on their website.

Chris

Which are, as always, in the descriptions. I think we covered browser updates. So the next one was called Hot Project Top List. So let's talk about this.

Hot Projects Top Lists

Tomasz

OK, guys, I will use the best of JS Web page just to tell you what I want about the hot projects top list. So according to last week, the hottest projects on GitHub from the front end world are Vite, Svelte, VS Code, esbuild and React. As we know what React is and it's still on the top. Visual Studio Code is one of the most famous IDE for the developers. But what it's worth to mention is this Vite and this is the next generation front and tooling to handle the build process and to manage our application.

Chis

So we need another webpack kind of tool?

Tomasz

Yeah, a good question. I believe the webpack does not cover everything and there are obviously differences between the Vite and the webpack not only in the implementation but also in the build process and how it looks like how we use it. I do not use Vite in real life yet, I mean in commercial projects. But yes, I did check this and play a little bit and I want to play more, because it looks promising for me and it's really easy to initialize and use within our project.

Chris

I see. That's what it's like. Second on the list, do you think it's a good replacement for React or not yet?

Tomasz

You know, React is still more about building components and, you know, compose them.
Svelte is more like the whole framework, how to deal with web applications and helps with building it in, you know, in an efficient way to take care of the performance. I have not used it in commercials yet, but I did use my own. Looks good. But still, I prefer working with the tooling we use daily. So React, webpack - this is what I like.

Chris

Thanks so much for this short screen recording. I think we all love it. So the last one and as usual, there is Node.js update.

Tomasz

Yes, this is our main guest in almost each episode, but it's good. Node.js team upgrades data really, really often. And now we can expect the new release for the Node and its version is 12.20.2. Impressive. And what's inside? There are a couple of bug fixes. They also upgrade their NPM to the newest version they fix, also looping over prototyping agents or they check - right, it's not scheduled in scope - distracter. And that's it. This update is not a game changer, but it's worth knowing and tracking everything because maybe - maybe - this fix will help with your app. So be up to date and check the node.js daily. Links are in description.

That's it from the news. And I give the voice to Chris.

Chris

OK, guys. So the only thing I can do is like invite you to the curated project and tips and tricks sessions. So stay tuned, guys.

Curated project of the week

Chris

Welcome to the show. Last week I presented your website with, you know, cool low poly 3D model. But today I know it looks like an advertisement, but trust me, it's not. I'm thrilled to show you this experience. The website which helps developers to learn WebGL on top of the Three.js Library. The host and the author of this course, Bruno Simon, is a French creative developer specialized in WebGL. He has worked on many, many projects. Let's go to the landing page.
It's quite common. Famous pattern with logo on the left corner, short text, rounded buttons, price and, you know, buy CTA. But when we click on the right side to explore this tiny, tiny room with zero one number guys, we are inside a visualization of this course and levels. Bruno, you bastard, I love it! I totally love it. Every scroll to the upper floor shows us a short insight of what we are going to learn on this part and this particular chapter.

After exploring this amazing, amazing section, we can scroll down, read and even watch something from the author.

Then we have the next great readable and clearly explained section with all topics we could actually access. We can see here very nice animations with 3D models appearing. These are just PNG, but hey, they still do the trick.

I like the section below where we can read something from the author, a simple idea where he combines his photo with floating 3D elements. And finally, we have a short view of his latest projects.

My advice for you guys is to check everything in this section. Every of his projects can open your eyes wider to Three.js possibilities. And the rest of this website,yeah, it just looks similar to other pages where you can buy the course - nothing special. By looking at this website, I really want to make stuff like he does. I'm completely fascinated by this website. Just check it yourself. And show your opinions. Cheers, guys.

Live Coding - JS Tricks: Slider Component with Animation

Tomasz

Hi, guys. I'm really excited that I can show you another portion of Tips and Tricks. Today, we will use the Framer Motion Library to create the simple slider component with animation.

If you didn't use the Framer Motion, it's worth checking their website where you can see the examples, play with it and see some code snippets. Of course, it's worth to check the documentation too to learn more.

Let's focus on today's task. I have prepared the basic structure for the slider, but without animation.

So let's add some smooth touch over the slider. I have already created the motion image wrapper, which is a motion image component being part of the style component with some basic styling just to make it look right. And what we will do is focus on the slider component. What it's worth to mention is that I have already used the AnimatePresence component, which adds the animation when the component is being unmounted. By default, React does not support events like that.

So animated presents will add it for us. There are a few ways how to deal with animations. We will use the way with the variants. So we can use variants to define the animation on the particular state. And we can call this state however we want, let's call it “enter”, “center” and “exit”. So “center” it will be our default state, “enter” will be the animation which will occur on enter. And “exit” - yep, you're right - it will be the animation on the exit.

So it could be a simple object or a function that returns the object.

So our default state for the animation should be like... we want a center image.. separate image, opacity… and it should be on the top. On “enter” we want to use a function. Why? Because we need to have something that's called direction. You're right. We need to slide the photo to the left or to the right, depending on which button we will click.
So our direction will have the values. Minus one or one, depending on which direction we want to slide.

So if our direction on enter will be greater than zero, let's move our image to right by three hundred pixels, if not - three hundred to the left. And we are starting from the opacity - null. The same thing for exit animation. So if our direction is lower than zero, that's why three hundred pixels to the right or if not three hundred left and we want to hide the opacity. Cool. We have defined our variants, so let's add them into our motion image.

Will it change something? Not yet, let's work on it a little bit. Another attribute for the motion image component is the key attribute. It's important because thanks to the key attribute AnimatePresence could recognize the animated element and other necessary functionalities, the key should be different for each image.

So what we can do is actually use the image source - image path - because it will be unique. OK, so no worries. How to use variants? Well, the motion components have attributes where we can define the names of the variants that should occur on specific events. From the event standpoint, we have that initial animation.

Right, so this is our target to which we will be animating and on exit. And we are just passing the names of the variants.

So this is “exit”, “center” and “enter”. Cool! Looks pretty simple, but we didn't pass the direction into the variant. As we can see here is the function. And we didn't correlate those two guys to pass the custom data, we can use the field that is called custom and pass the direction. Great. It's almost there. What we want to do is also to define how the transition should look like when we will be modifying the transform, translate X attribute.

So our transition on the X, let's use spring animation.

Just add some customization on it, if you're interested in what all of these attributes mean, just check the documentation. I think that should be it, actually, let's check it out. Yes, it works! Nice. And it's better than, you know, the basic state without an animation. So as you can see, the seventy seven lines of code are enough to cover the slider functionality, at least the basic one.

So this is everything that I have prepared. The power of the Framer Motion library is much bigger and I highly recommend checking it on your own. Thank you for your attention and see you in the next chapters.

Chris

OK, this is for today's episode. There was quite a bunch of good news in this project and tips and and Show some love by clicking the like button or leaving a comment. I think you like it. We like it. Do you like it? We love it. So see you next week!