SVG Optimization Tools, React and More News - Frontend News #17

Watch the Frontend News #17 - the podcast about tech and front end innovations with our hosts - Chris and Tommy K. BTW, you can contact our experts from Frontend House software studio if you need to find some software solutions.

What’s in Frontend News #17?

• 00:00 - Intro
• 00:38 - Contents
• 01:49 - Capacitor - Cordova alternative
• 04:31 - SVGO - scalable SVG files optimization tools
• 06:01 - CSS module scripts
• 07:26 - Happy Birthday Bootstrap!
• 09:55 - Say hi to React Native 0.65
• 12:11 - Mongoose 6.0.0
• 13:37 - Cypress release 8.3.0 - what’s in?
• 14:43 - SQL on the web
• 16:27 - Node.js updates

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

Transcription

Chris

Hey, everyone, today is the 17th episode. And I know, guys, I know you're curious how was Tomasz's week because you’ve asked this in the comment section. Tommy K, how was your week?

Tommy

Thank you for asking. Hello, everyone. Hello, Chris. And yeah, I just want to say that my week was awesome. It was perfect. And I do not have anything to complain about. I was looking for great news for you and we have many of them.

Chris

And you did? Yes, you did.

Tommy

Yes, I did this.

Chris

We have nine news today, guys. Nine news. I think it's the biggest number we have ever had. So what? What is first?

Tommy

Okay, I know, you're curious what’s first, so let's start. As the first news I want to speak about the Capacitor, which is a nice replacement for the Cordova engine.

Chris

And we found a very good optimization tool for SVG for you guys. Nice support.

Tommy

Third thing is about the CSS and a new way of how we can import it.

Chris

And we're also going to celebrate Bootstrap birthday.

Tommy

And next we will speak about new releases of the React Native

Chris

Mongoose 6.0.0

Tommy

...and Cyprus release 8.3.0 and what's new?

Chris

SQL on the Web.

Tommy

As the last thing. But the most exciting thing for us is Node.js update.

Chris

He’s back, after one week gap, so wow, can’t wait.

Tommy

Exactly.

Capacitor - Cordova alternative

Chris

Okay, guys, that's it. Let's see the intro and see you in 10 seconds. Welcome back Tommy. Let's start. What was the Capacitor?

Tommy

Yes. Okay. So the first news Capacitor. As I said, it's a nice replacement for the Cordova, so it's connected...

Chris

Everything is a nice replacement for Cordova, isn’t it?

Tommy

Nice observation. Yes. I cannot agree more. I know in the past we were working with Cordova and with Ionic, but those days it was based on Angular, first fashion.

Chris

Dark days…

Tommy

Yes. It was really hard to work, especially on the performance for the app. But yeah, we did it and we managed to do this with success. But going back to the topic, Capacitor is a cross platform API and the code execution layer that can be a replacement for the Cordova, and it makes really easy calls to the Native SDKs. It works both for the iOS and for the Android platform. Thanks to the Capacitor, you are able to write your own native plugins that can be used in your front end JavaScript app and then it will be transpiled to the native functionalities. You can use the Capacitor with the Ionic, so you will have all the UI layers, all the bricks you can use to create your app. Or you can use the Capacitor in a stand alone mode. So it means that you have to implement the native UI layer, the pieces that will connect the native layer with the front end layer. You need to write it on your own, but Capacitor will take care to run this code and translate to the native functionalities. So that's great, your work is well supported. Basically, this is it. There is a new version of Capacitor.

Chris

That's interesting. I think everyone is curious about what do you use for, as writing mobile applications today.

Tommy

Yes. So nowadays at Frontend House and Liki mobile, of course on my own, I prefer to select React Native as it has a great ecosystem and environment for working on the mobile apps. Great quality of products. Yeah, I've got the biggest experience with React Native, to be honest.

Chris

Me too. And we need a very nice application so you can check the comments and have a look. Guys. It's a Dailab. Dailab is the mobile application we developed. We developed it in React Native with the latest changes and latest news from the front end world. So it's almost fulfillment for our Frontend News podcast. So I strongly recommend you guys to have a look, download, and use it. But talking about mobile applications. Yeah, I think it's enough about mobile applications today. So what was the next news? Was it SVG, right?

SVGO - scalable vector graphics SVG optimization tools

Tommy

Yes, that's correct. Scalable vector graphics - SVG files -is a really popular format for keeping the graphics, the images (SVG images) or anything connected with the graphic in your web apps or in your mobile apps. And especially if you want to scale that without any problem and modify colors in scalable vector graphics - SVG files - be able to customize the icons, especially. And we received a new tool and features that works with the Node.js. So it's more like the tooling for the back end or for some tasks execution or something like that. That basically means that the whole optimization of scalable vector graphics SVG files can be done in the back end and you can remove the unnecessary metadata, comments, hidden elements, or you can optimize some values that are responsible for displaying the SPG.

Chris

Yeah, that's good to know because I always do these manipulations to optimize scalable vector graphics SVG files manually and it makes a difference actually. So I'm good to know. Can you connect this if I don't know, any kind of builder NPM package or whatever?

Tommy

Yes, we can do this. We can do this with the webpack or if you're still using it, you can also use it with the Gulp. I don't know if you still have this laptop.

Chris

No, I don't think so.

Tommy

Okay. Yeah, but webpack is a good choice, I believe. Thanks to that, you can work with your assets automatically.

Chris

Okay. Thank you so much. Nice explanation. I will keep it on file. So the first news is about the CSS module that is on our list once again.

CSS module scripts

Tommy

Yes, but this is a different type of CSS module. I just want to share the news that Microsoft and Google collaborated together to create a new standard and to define a new way of importing the CSS files into your apps. So instead of using, for example, webpack as a middleware for taking the CSS from your import and transpile it to the correct links to be put into your head in a document or any other way of attaching the styles into your app. You will be able to do this like a native functionality, and you can import CSS files the same way as you're importing the JavaScript files. And it won't require any middleware and plugins. To do that, you will be able to apply your CSS from the JavaScript files starting from the newest version of the Microsoft Edge and Chrome version 93. Yes, that's it.

Chris

What a detailed explanation. I'm very surprised this time. You always say, hey, guys, check in the comment, but today they're very well prepared. Well done.

Tommy

Thank you. Thank you. Everything's in my head.

Chis

Amazing. At this time, I'm actually curious. How are you gonna sing Happy Birthday to our Bootstrap?

Happy Birthday Bootstrap!

Tommy

(sings) Haaaapy birthday to youuuuu. Happy birthday to you! Happy bi...

Chris

Ok, I think that’s enough. But you did it very well. I hope you guys enjoyed it, but yeah, maybe let's talk about some numbers.

Tommy

Yes, guys, before numbers. If you want to hear me once again when I'm singing or dancing, please leave a comment under our video. If there will be five comments on the video and over 30 likes, I will dance and sing especially for you guys. I promise.

Chris

It was brave!

Tommy

Okay, why not? Why not? It will be fun. Let's take some. Fine. But yeah, going back to the numbers and to the Bootstrap birthday. It's about 394,000,000 downloads from the NPM since 2015.

Chris

Wow, and none of mine.

Tommy

No, no, no, no, no, no, no. Don't lie to us. I know that you are using Bootstrap in your project. Nothing will hide from me. We have known each other for too long together. But over 131,000,000 of these downloads occurred in 2020. So the fame of Bootstrap is expanding and it becomes more and more popular. Yes, this tool grows really fast and it's been used to build MVPs all over the world. But that number means that it has been downloaded circa 180,000 times per day over the last six years - I made a little search. It's the image of quite big success. Big numbers!

Chis

Wow. Wow is the only word I can say. That’s surprising. Good for you guys. I keep my fingers crossed for the next few years. So yeah, I think let's smoothly jumped into React native.

Say hi to React Native 0.65

Tommy

So again, we will speak about mobile apps, but let's make the long story short and discuss the meat of this topic. So we received a new version of the React Native it's version 0.65, and it includes some updates around dependency versions and some features around it. Accessibility fixes and some additions to that. And the most updates were done around Hermes, which is Facebook's open source JavaScript virtual machine that is optimized for the React Native. So Hermes makes our code translation and compilation much faster than the classic engine that was applied to the React Native. So all of these updates make React native better too. But about them, they didn't include some breaking changes. For example, we received a new concurrent garbage collector available for the Hermes. We get an SEMA Script Internationalization API, which we were talking about in the previous episodes and Hermes on iOS now supports Apple M1 one processors. So if you have new Apple laptops, you can work with the React Native without any middleware or any hacks.

Chris

Do you have one?

Tommy

Yeah. So you can run React Native apps and develop them on the newest Apple machines. That's great. They get some improvements around the memory. And yeah, basically, I really encourage you to check all the descriptions on your own. Links are in the comments section. I mean in the description section...

Chris

Let’s put them in the comment section. Why not?

Tommy

Yes, I think. Yeah, that's it. We can move forward.

Chis

Thank Tomasz for such a detailed explanation. I'm wondering, when they gonna release version 1.0. Today there is like 0.65 and it is worth it using it. But when the gonna release the final-final?

Tommy

I think we’ll have 35 versions still. But to be honest, I'm not sure when they will release version 1.0.

Chris

Nobody knows.

Mongoose 6.0

Chris

But you know a lot about Mongoose 6.0. What is it?

Tommy

Maybe not a lot, but we've been using Mongoose in the past. I remember.

Chris

Yeah, I used it today. Very good tool.

Tommy

Okay, great. So Mongoose is a tool to work with the MongoDB, and we received a new version after 18 months of development and working through all of these details. New features. We received a new version, which is 6.0, but without any breaking changes inside. They did some slight updates around performance. They fix some bugs and make the whole code base using the new features from the JavaScript, but about some numbers. The Mongo six version includes 457 commits, which means basically that includes a lot of code and improvements, but you should not require any bigger actions to rewrite your current apps. And if you are using the 5th version of Mongoose, you don't have to worry about rewriting your application.

Chris

Okay, sounds good. I’m curious about version 6.0, but if something is perfect for a there won't be any breaking changes anyway. So we have three pieces of news left? Three?

Tommy

Three, three of them.

Chris

Tomasz, Let's make it good because this time it's me who has daily in five minutes.

Tommy

Yes.

Chris

So Cypress release?

Cypress release 8.3.0 - what’s in?

Tommy

Yes. So Cypress released 8.3 .0 where we received a lot of updates around performance and some bug fixes. Cypress is a popular tool to write end-to-end tests and I believe...

Chris

I love end-to-end tests. They are the best. Oh, yeah.

Tommy

You can observe what's going on in the browser. Yeah.

Chris

Yeah, yeah, exactly.

Tommy

Especially because there is a big business value for them. So guys, we are specialized in end-to-end tests too at Frontend House and we use Cyprus as an example of one of the tooling links it's responsible for end-to-end tests. So if you have any questions about how to write end-to-end tests, leave a comment.

Chris

You’re an expert now. Oh, I'm surprised.

Tommy

But if you want to check the details, I know we do not have much time. So guys, check the link in the description and go through all of the changes on your own.

Chris

Yes, indeed. And let's jump into SQL.

SQL on the web

Tommy

Okay. Nex news: we received a really nice tool where we can use the SQL statements to work on the indexed database in our web clients in web browsers, sorry. So it's called absurd-sql, and it's based on indexeddb.

Chris

And it sounds absurd, yes?

Tommy

Yes, yes, but it's based on the indexeddb. And I know this is really maybe not funny, but it's interesting, and it's not something I can explain in an easy way, believe me or not, absurd-sql is based on the indexeddb, but it's ten times faster than the indexeddb, so I don't know how they've done this, but it's a really great boost for the performance and querying the data.

Chris

Yeah, actually, I could. I'm gonna give it a try. Actually, I’ve never seen any, like, business use cases, have you ever worked with indexeddb?

Tommy

For some reason, I was using it to create an app. I remember it was like three or four years ago, we were using indexeddb to store some data inside the client browser. There was no need to possess it on the server. And we were okay. If the user will clear this data, we just want to use it as a cache layer to obtain this data really, really, really fast without needing to send the request to the server. So, yeah, this was used more like a cash layer.

Chris

Well, that sounds good. Tomasz, thank you for your explanation. So let jump quickly to the last news, which is, of course, Node.js update.

Node.js updates

Tommy

Yeah, node.js updates, guys, as always, we received many updates - the same bunch of fixes, performance improvement. Oh, my headphones are going out of my ear. No worries. We received some small packs of the same updates. I mean, fixes improvements around performance from the different packages of the Node.js. And I just want to say that the newest current release is 16.7.0. So, guys, if you are interested in using the newest version, the latest version of the Node, please update your apps. And that's it from today's portion of news.

Chris

Thank you so much. Very good explanation. In very good news today, I was happy to hear about everything. We're going to adjust to the new technologies. It's amazing.

Tommy

Thank you, guys. Follow our YouTube and our Instagram.

Chris

Twitter, LinkedIn, Facebook, and everything for everything, follow us and add to favorites. Talk to us in the comment section in our forms like everywhere. Oh, and remember about a free consultation. See you guys in one week, two weeks. See you all the time, you'll find a lot of interesting content on our Frontend House YouTube channel.

Tommy

Bye, boom.