Fresh Visual Studio Code, well working Bootstrap and more - Frontend News #16

Watch the Frontend News #16 - the podcast about tech and front end innovations with our hosts - Chris and Tommy K. Do you need help with building an application or a website? Contact our experts.

What’s in Frontend News #16?

• 00:17 - Contents
• 00:42 - Intro
• 01:46 - Angular 12.2.0 Release!
• 04:08 - Bootstrap 5.1.0
• 07:35 - What's new in Visual Studio Code?
• 10:30 - Wikimedia Foundation switch to Vue.js
• 11:50 - How to improve performance with useLayoutEffect()?

Sorry Node.js fans - today we don't have any updates for it :(

Thank you for watching! Subscribe our channel and contact us via contact form on https://frontendhouse.com/

Transcription

Chris

Hello everyone. Welcome to 16 episodes of Frontend News podcast. For those who don't know us, it's Chris. I'm technical director of Front End House, and we have Tommy K who is our technical leader, hi, Tommy.

Tommy

Hey, Chris, how are you?

Chris

All good, all good. Today we have five news for you guys. First one is about Angular Update...

Tommy

And the second one will be about Bootstrap new release.

Chris

We also show you guys what’s new in Visual Studio Code.

Tommy

And there is some interesting news about the Wikimedia Foundation, which switched to the Vue.js.

Chris

And the coolest one about performance useLayoutEffect(). Stay tuned, watch the intro and see you guys in 10 seconds.

Angular 12.2.0 Release!

Chris

Hey again, as promised, are we going to speak about the Angular 12.2 update? Tomasz, what’s in. Two updates, not much.

Tommy

There are some minor fixes inside the new major release of Angular, but before I will speak about them, the first thing I want to mention is that I feel a little bit sad and disappointed because Chris, you didn't ask me how was my week? So my lovely audience, please ask me in the comments section. How was my week? Because Chris is not interested in my life. Not at all.

Chris

Sorry guys, I missed it. So.

Tommy

Maybe you would like to ask me something.

Chris

Yes, indeed. I'm really curious about what's in the Angular update?

Tommy

Okay, so let's focus on today's topics and Angular Update minor release. This is the version 12.2.0 and inside we can find three minor fixes and features. The first one is for the compiler itself. The second one is connected with the Angular core and it's about the error fixes. Like in the past there was a bug with the incorrect error being reported when you are trying to recreate a view. So now they just fix that issue. And there is also the third fix for the language service. If you're interested in more description, just search the release notes and documentation.

As always, links are in the description. Yes, you know what to do (check the documentation!). And yeah, that's all from the Angular release. But I'm curious. Chris, do you use Angular often these days.

Chris

Not at all, to be honest, I mostly go with React. React is my first choice. However at Frontend House we do one quite a big project in Angular. It performs really well. You guys already have to work on this. So we have just one project, but a really cool one. At Frontend House and Liki, we still choose to go with React.

Tommy

Yeah, that's true. Reacts, in my opinion, is a little bit maybe not easier, but it gives more fields with independence. I mean, each developer can have their own idea about the architecture and design patterns that will be used inside the project, and he has his own toold. And React leaves total freedom for the developer to choose the correct approach that will fit and match the requirements at its best. And Angular, it has predefined layers with the different responsibilities and it's really hard to interpret them and create a different architecture than it's proposed with Angular.

So yeah, I prefer more freedom and I would love to give the freedom to allow all developers all over the world.

Chris

Tomasz, I couldn't agree more. We're on the same page. It was a perfect explanation. It was like an expert zone kind of topic, to be honest. Cool one, thank you. So let's go to the bootstrap, I guess. Yeah.

Bootstrap 5.1.0

Tommy

Bootstrap. You're right. We received the first minor release, which is 5.1 and I believe I don't have to explain what the Bootstrap is. I don't think so. But for those who didn't use Bootstrap, this is the really nice UI library that can be adopted in our project and make the MVP appear much faster because we get a predefined set of components and functionalities from the user interface work that are just ready to be used inside our responsive mobile-first apps.

Chris

1 minute ago you mentioned that you don't need to explain what it is and then you spent talking about Bootstrap. You love to share your knowledge.

Tommy

I know. Yes, exactly. It just wanted to go outside from my heart.

Chris

I know this. I know, I know. No worries. What's in what's in the Bootstrap?

Tommy

A lot of things. A lot of stuff. A lot of new things. Also in the minor release, so we don't have much time to speak about all of them. So I will just give a sneak peek of what's new. And we can find the experimental support for the CSS greed, we can find of canvas in the Nav bar, new placeholders components, horizontal collapse support components, new helpers for the HTML CSS, new CSS variables in their utilities, refactor at JavaScript, which makes theBootstrap components more performed and works a little bit faster and really much, much, much more inside.

I really encourage you to check the release notes. If you are using Bootstrap in your project, it's worth updating your version. The Bootstrap team also tries its best to support the legacy code, to support the previous version of the Bootstrap libraries and don’t make developers apply the breaking changes in their apps to make it work. So yeah, just use the newest version. Play with the bootstrap if you're using it and make your life easier.

Chris

Well, Tomasz, nice explanation. Quite new features here. I'm curious. When do you think is best to go with Bootstrap? And when do you think it's better to do a custom CSS?

Tommy

This is actually a good question, Chris. It depends. It depends on the case. This is the answer, but to be more precise. Bootstrap is a good library to utilize in your project. When, for example, you want to build a lot of functionalities or you want to deliver the functionalities and you don't mind about how it looks? I mean, you don't need custom designs. This is good for building the dashboard or menu with admin tools where you want to create a useful menu with the content without putting a lot of effort into creating the custom CSS because the main thing you want to deliver is the functionalities.

So the bootstrap is a really ideal library to utilize. If you just want to focus on the functionalities, that's my answer.

Chris

Perfect explanation. Thank you so much.

Tommy

Thank you, Chris.

Chris

Next one is quite important for everyone because it's going to be about the tool we use every day in every single project.

Tommy

What is it? I don’t know?

Chris

I think it's Visual Studio code.

What's new in Visual Studio Code?

Tommy

Oh, man. Yes, you're right. Visual Studio code. Visual Studio code. Guys, the first question from my side, what tools do you use to develop your code? And yeah, just put your answers in the comments section under this video and we will respond to you if we do the same.

Chris

This episode is gonna have a lot of comments because we asked about them six times, I don't know, but Tomasz, what is the Visual Studio code? That's the main point.

Tommy

New major release of the Visual Studio code. We received a bunch of updates, fixes and improvements from the different areas. For example, we received a new life preview extension. This is like in the experimental mode, but we can preview the JavaScript and CSS apps inside the Visual Studio code. We don't have to open the browser, so this looks and sounds nice because it will reduce the number of windows we have opened on our displays.

Chris

Does it run like Chrome or what?

Tommy

I believe it's on Chromium. Yeah. Okay. Another thing is the extended ten customization so you can customize your time and your colors for your IDE in a more granular way so you can make your ID looks exactly as you want and as you wish. This is like a nice touch on this IDE. The next thing is drag and drop terminals so you can move your terminal across different windows. Of course, using Visual Studio code and move the terminals between those. You know, a lot of magic with my hands today.

Chris

Exactly.

Tommy

Exactly. And a bunch of cool stuff and tools which you really should check in the documentation. Chris, what editor do you use to work with the code?

Chris

Oh, my gosh. It was it. I mean, I was still waiting for something game changing.

Tommy

Oh, game changing?

Chris

No, it's not game changing because the two are perfect and I use it every day. I use it for every kind of project. Love it. And will stay with it, definitely, as long as I can. Download it.

Tommy

Are they paying you some money for such dedication?

Chris

I hope so.

Tommy

Hey, guys, from the Visual Studio code, I'm here, I’m here too!

Chris

You have a daily in six minutes. So let's go to the next topic, let's switch to Vue.js.

Wikimedia Foundation switch to Vue.js

Tommy

Let’s rush! Let's start from the history. Wikimedia decided to switch to Vue.js in 2018. They started doing an investigation over different web frameworks like Angular, React, Vue.js, Amber, and much, much more to decide from the architecture perspective which framework would they use for their next upcoming products and for future releases. And after two years, I mean, after three years of experimenting with the different frameworks, the Wikimedia team decided to switch to Vue.js for future products.

Chris

How many years?

Tommy

Three years of experiments and making investigation.

Chris

They’ve spent for this test like half billion dollars. Probably. For experiments. Yes.

Tommy

Yes! So maybe this is the right argument to use our budget for our experiments, Chris.

Chris

I’ll do my best, of course.

Tommy

Great. But yeah, this is the news. So probably somewhere in the future, when you will open Wikipedia, you will see it has been done with the Vue.js.

Chris

Nice, lovely news, but I mentioned that the last one is the most important. Is it?

Tommy

Yes. Because it's about your lovely performance and how to make it better.

Chris

That's why I'm very curious.

How to improve performance with useLayoutEffect()?

Tommy

The last news about your lovely performance. So the difference between the useEffect and uselayoutEffect in React. Probably, you know what React is and what the React hooks are. We have explained that in our previous episode, for sure. And today I just want to compare two pretty fast things inReact. So on one hand we have useEffect, and on second hand we have the uselayoutEffect. What is the difference? So use effect works like asynchronous functions and uselayoutEffect works in the synchronous way in most of the cases, like in 99%.

If you will, for example, make an API call and want to deliver this data to your component. You will use useeffect, fetch the data, put this data into state and save this data from the state and put this somewhere into the template in Dom structure. So most of the time it's okay to do like that, you will see no problems. But sometimes, for example, when you have placeholders for the data and you fetch the data from the API or for example, you have no placeholder.

It's like an empty screen and you fetch the data from the API, or you replace the current data with the API data. You can observe in some cases, like little flickering. So you see that something is switching.

Chris

It's usually the case.

Tommy

And this is because of the use effect and how it works. This is because it works in a synchronous way. So the component has been rendered, and during that time we are fetching the data, but we can see the rendered content and after it has been replaced with the new data. Okay. So with the use layout effect, we can make it synchronous. So we are fetching the data and rendering the component once the data has been fetched. So we will get rid of this flickering issue. And that's the small hint at the end of our Frontend news.

Chris

Tomasz, that was a very good explanation. Yep. I'm quite impressed.

Tommy

Thank you, Chris. It's really hard to impress you.

Chris

Thank you. Thank you so much. And thank you for those News. You have 1 minute, 1 minute to go to your daily call.

Tommy

True.

Chris

See you in two weeks. And guys, see our YouTube, Twitter, Spotify, Instagram wherever you want. We can connect everywhere, join our community. And, of course, the website of our lovely software house frontendhouse.com. See you guys there and Tomasz, see you soon.

Tommy

Thank you.