SVGO, React and More - News 17 | frontendhouse.com
Guy with notebook

September 3, 2021

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

Krzysztof Wyrzykowski

CTO

Tomasz Krajewski

Head of Frontend
Share

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?


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.

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.