How to Solve Grid Problems with CSS? - Frontend News #6

Watch the Frontend News #6 - the podcast in which our hosts Chris and Tom share tech and front end innovations. Today we will discuss:

• 0:00 - Intro
• 1:40 - Contents
• 2:18 - Hermes support in iOS
• 3:30 - Switch to Chrome to be safe - by Default
• 4:45 - NASA in JS
• 6:17 - React minor Release
• 7:43 - Update for V8 Engine
• 9:38 - Angular 12.0.0-Next.6
• 11:03 - Curated project of the week
• 13:00 - Tips & Tricks

Transcription

Chris

Welcome to another Frontend News podcast. I'm Chris, I'm here with Tommy K, who is in our headquarters. Welcome Tommy. Guys. It is our sixth episode, it’s going to be amazing. But first, let's watch the intro.

OK, guys, I think it was an amazing, amazing week for technology, but let's first see if it was an amazing week for Tommy. How was you week and what's the plan for the future?

Tommy

Hi, Chris. Hello, everyone. It's really nice to see you once again! And about my week - thank you for asking - it's really a good week for me, but unfortunately, I really miss you here. So, yeah. So please come back as soon as it's possible. But besides it, guys, during the last week I am preparing for the upcoming conference, which is the Warsaw IT Days. It will take place on 8th-9th April.

I'm going to speak about the micro frontends and I really invite you to this event, the link for the upcoming conference you will find in the description under this video. So, yeah, hopefully. See you there.

Chris

I will be there for sure. We know everything about Tommy K. Let's check the agenda. Tommy, what are the news for today?

Tommy

OK, so for the first shot, we will speak about the support for the Hermes on iOS.

Chris

The next one is going to be about HTTPS supported by default in Chrome. The third topic is interesting. It will be NASA in JavaScript. From space. Oh, my God. Oh my God. Let's see. The next one is going to be about a very, very minor React release.

Tommy

We will also speak about the updates for V8 Engine.

Chris

And the last one is an update for Angular. Fasten your seatbelt and let's get started. Go ahead.

Hermes support in iOS

Tommy

So let's speak about the support for the Hermes on iOS (Android maybe next time) with the newest version of React Native (React Native 0.64), we received support for Hermes to be used to create iOS apps with native. Hermes is a JavaScript engine that lets us work with React Native and compiled a code to run on mobile devices. And this is the alternative for the classic JavaScript core engine. But Hermes puts a lot of improvements around the performance, for example, around the utilization of the memory or decrease the time to interactive TTI, which is also a huge change in our apps.

Chris

OK, sounds great. I wonder if you guys do a lot of applications today and answer a few comments. If you have any questions, we have created a simple contact form on our website. If you are struggling with any kind of functionality or you want to check something before experts, go there and contact us through contact form.

Switch to Chrome to be safe - by Default

Tommy

The second thing is switch to Chrome to be safe by default. What does it mean? In the upcoming Chrome release, the Google team decided to switch the default behavior. So instead of running websites with HTTP protocol by default, the Chrome team decided to switch to support the HTTPS by default, which will make our visitor on different websites safer and faster by default. We do not have to worry about the protocols now, and this is the change I want to present to you with the upcoming Chrome.

Chris

When I first heard that HTTPS supports better performance, I was curious actually how. Can you explain it a little bit?

Tommy

Yeah, I know that HTTPS has some extra steps to support the increased security and support the other instructions that are obviously not implemented in the HTTP, but in short terms HTTPS protocols have better implementation that handle the whole traffic for performance and that's the whole magic.

NASA in JS

Chris

OK, great. So the next news is about NASA. NASA in JS.

Tommy

We want to speak about aliens. Not in this chapter, not yet, unfortunately. Let's let's come to Earth and speak about Earth topics. So I don't know if you already saw this package and used it or not, but on GitHub, we can find something that is called open MCT, which is basically open emission control technologies. And if it sounds familiar for you, it means that you know it.

Chris

It doesn't!

Tommy

It was developed by the NASA developers and is being used for NASA, by NASA to analyze the data of spacecraft missions as well as flying and operation of experimental rover systems. So NASA uses JavaScript often. And moreover, this tool is open source. So you can check it out on your own. You can use the life demo or fetch the code on your local machine and play with that tooling, put some improvements, play with it, just use it. And yes, it's by NASA.

React minor Release

Chris

That sounds incredible, so let's check this out. But first, let's go to the next news, which is about React release.

Tommy

Yeah, Chris, you're right. We are going to speak about some minor updates for the React. And in the newest release, there are no breaking changes. We can find some updates for the React-dom package. Actually, the React team just removed the isolation warning. And basically that's it.

Chris

Do you think it is like kick-off for Picker release? Are there any rumors about what they are working on right now?

Tommy

No, I think it's like, you know, it's a small adjustment that they want to push into the 17th version. But as far as I know, they do not plan to release any big breaking changes, breaking change features in the upcoming weeks. So, yeah, just we need to keep listening and waiting for some extra news.

Chris

So it's kind of a mystery right now.

Tommy

Yes, it's a kind of mystery. If you know something about upcoming React breaking change features, please share it with us in the comments section or just send us a message. We are curious what's going on with React nowadays. So the last 2 news for you guys. Tommy, what's next?

Update for V8 Engine

Tommy

The 5th news we are going to speak about V8 engine update. In the upcoming Chrome release, which is that 19th version- we can find some improvements for the RegExp. And we received a new functionality that helps the developer to get an array of the start and end positions for matched capture groups in regular expressions. So basically, it means that we can match some regular expression and see the index of start and position of each of the groups that has been matched.

The only thing that we need to remember is that we need to use the /d flag in our RegEx to be able to use the new function. You need to check it on your own. We will have this release. For now it's available on the branch version nine, but it's still in the beta because guys are waiting for the Chrome 90 release.

Chris

Thank you for this update. Tommy, let's be honest with our audience.
Are you the next developer who when he needs to do something in RegEx, he googles it?

Tommy

I don't want to lie. And I won’t lie. If I want to do something quick with RegEx, obviously I'm checking Google, but in basic usage too. Unfortunately. But yeah. Who doesn't do it, man?

Angular 12.0.0 - next.6 update

Chris

Exactly. This is it for the V8 engine update. So the last one is for Angular 12.0.0 - next.6 update.

Tommy

It was quite a huge update. We can find some bug fixes, feature updates and there are some breaking changes worth mentioning inside the animation and ruter packages. So for the animations, the DOM elements are now correctly removed once we remove the root view. Previously it was not like when we remove the root, all of the elements have to be removed too. Some of them still stay in our code somehow.

I don't know how, but now it has been fixed for the animations and about the ruter. For now, we will have reports for strict null checks on fragments that can potentially be null. And if you want to see all the details, you can see the changelog on their release notes, which I highly recommend to check. Of course, links are… Where, Chris, what are the links?

Chris

Links in the description. Correct. That's a good answer.

Tommy

Correct. That's a good answer. OK. And thank you. That's all from the news for today. Yeah. I give voice to you, Chris. Thank you, guys.

Chris

Thank you Tommy. So we kindly ask you to join us during the curated projects and?

Tommy

Tips and tricks.

Chris

Exactly. See you guys there.

Curated project of the week

Chris

Hey, guys, welcome to the website of the week today. Let's talk a little bit about, you know, scrolling. There are websites where you could scroll all the time - oh this pleasant feeling - everything looks so smooth, so attractive, and you just can't stop it because, you know, it's so delightful.

So fasten your seatbelt and check what I found for you today. I will present your landing page of the animation app named FlipaClip. It looks quite normal at the beginning with a copy inside and simple mockup. We find a workspace area at this point with this little little circle drawing experience. Once the scroll progresses, the real fun begins. We scroll, scroll… to the next part of the website we see some numbers and again we are scrolling down and going darker into total black background, impressive ink stains, inspired animation, by the way. Now is time to focus on simple toolbar and take a closer look at the possibilities we could get.

And with this same, but contrast animation, we're going back to the bright moment, look - we can even put our animations inside the video. Pretty cool one. At the end of the page, everything gets more colorful and finally ends with a very, very charismatic, animated girl. It's called frame by frame. I think it's a very pure example of what can be done inside the application. So if this page was designed for users like me, they succeed. I have already downloaded this on my phone and started drawing animations. So, guys, what's your opinion on this?

Tips and Tricks

Tommy

Hello, guys, and welcome in another round of tips and tricks with me. Today, we are going to speak about CSS problems. And the point of view is that you are a developer and your task is to create a gallery of employees. You have the collection of 15 images. We will use some randoms from the Internet and we want to display them in some kind of grid. This greed should react on the container with on our site and look well on each resolution.

So for mobile, for tablets and for desktop and say we cannot use media queries, OK, so how to achieve that? The answer should be simple and I'm going to show you how to deal with it with the grid. So let's add some class names at first and update our structure because we want to know, add, obviously, the grid class and let's wrap this in div containers. Great. This should be a great item.

And let's say this is grid. Let's call this image. OK, great. I think we have everything in terms of the structure. We have some of the format. I love Code Sandbox. I highly recommend this tool and you can have everything that your IDE has, you can build the project in the cloud. Don't have to set up your local environment. So yeah, it's worth checking. I use it daily. So yeah, it has been checked by me.

I recommend it. OK, let's come back to our CSS issues for now. Nothing has happened. We just add some structure and let's start from image styling. We can fetch the images with a certain size and let's say that our backend actually returns the size of the images equal to three hundred and three hundred. OK, great, that works. Do you want to style that image? Let's say we will leave as it is. OK, and let's do this.

Let's put some styles into our grid. OK, so this is our container class name. And as we said, we want to focus on the grid usage. We have grid and inline grid in our example we will use the block grid. So it's a display grid. And what we want to do is to define the width of the certain column because we want to display like few columns in a row. We can do it item by item. But it's not a fluid solution. It's like hardcoded. So we want to make our styles adjust to the number of items. Let's try CSS grid properties. We will use the grid template columns attribute to define the width of this particular column. And we will use repeat to apply this on all of our items and it will reflect on all the columns and we will choose the size from the range like we have fetched like three hundred pixels. So let's choose from this one to one fraction. OK, something magic has happened. It actually works. We want to define the gap between each of the elements, OK, and it should be like on the designs, let's say the designers put twenty five pixels, it doesn't look good.

Um, we need to put some adjustments in here to make it look better. If we stretch the with a little bit, as we can see, it behaves well, why it does not look well on the mobile is that because we cannot fit two items in one row because we have to use like three hundred pixels to be minimal width, let's say for mobile, it will be 200. OK, and it's still. One hundred, two hundred, and it still looks good. OK, great. OK, so these elements are not in the center on the smaller resolution, so let's see some other attributes to make it look better. We want to justify our items that are inside the grid to the center crate. And let's check it out. Nice. So we have our items being displayed in a grid. Let's check some bigger examples like let's say one hundred and fifty elements. Well.

I think it will load for a while. OK, great. Yeah, we have one hundred and fifty elements, and as you can see, they are displayed really nicely. Some overflow, that's because we are using the Codesandbox and, you know, it does not behave one hundred percent like the browser, unfortunately. Let's maybe adjust the image a little bit. So it will always have the parent container width and height being set up automatically.

Great. This is what was missing because the spacing between the elements was not correct, because the image was overflowing the container. And we don't need to use the grid item class because everything is being set up in the parent grid class. But as you can see by putting just a little bit of styling - a few lines of it, we can achieve the fully working grid layout to display our employees. I mean, to display any kind of images, any kind of component.

Everything will be adjusted automatically related to the size of our site. And we do not have to use media queries. It works perfectly, each line. It is a really performant way to achieve that. And as you can see, it does not require a lot of effort. So I highly recommend using grids in your daily work in resolving your problems that are related with layouts, with building CSS grid and any kind of stuff that is related to compose the structure and put the elements in the correct position.

OK, and that's it for today. I hope that you enjoy the show and you will use the grid often to resolve the grid problems in your application. And thank you for your attention. See you next time. Bye bye. OK, guys, this is from today. I hope you like it.

If you like it, join us on our website, which is frontendhouse.com and check our socials like YouTube, Spotify and obviously Facebook!