Visual Studio Code and more - News 16 | frontendhouse.com
Guy with notebook

August 20, 2021

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

Krzysztof Wyrzykowski

CTO

Tomasz Krajewski

Head of Frontend
Share

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?

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.

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

Head of Frontend

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.