The police command in Akwaibom says it has repelled an attack launched by suspected hoodlums on a divisional station in Odoro-Ikbe in the state. The police public relations officer Odiko McDonald also said the command lost one of its officers in the process. McDonald told Newsman Inuyo that the attack on the division was repelled by officers and men of the operation restored peace recently launched by the Inspector General of Police. He also said the command lost one personnel in the attack who was hit by a bullet and was rushed to a hospital for treatment but later died. Hello hope you enjoyed the news please do subscribe to our youtube channel and don't forget to hit the notification button so you get notified about fresh news updates


Hi, Jane. This is Ashley with Oxmore Toyota. I wanted to send you over a quick video greeting that way you can see who you've been working with. Thank you so much for taking the time to speak with me about your interest in a new Avalon. I want to hit and send you over an email a little while ago with our current inventory of Avalons. That way you can kind of take a look at them before you're able to stop into dealership. If anything interests you, please let me know. That way I can get more information. You can give me a call. My number is<PHONE_NUMBER> or you can also email me back. Thanks. Bye.


Hello, my front-end friends. I've been getting a lot of questions about how I go from just having a design in front of me, whether it's a Figma file or a JPEG, or just whatever it is, a file that a designer created and how do I plan things out to make it happen in the code. So we're gonna be doing that today by looking at this project right here, which is a front-end mentor project that has enough complexity going on with it that I think it's gonna make it interesting enough but it shouldn't take too long to do either. And we're gonna be doing this from start to finish going through the entire process and really breaking down my thought process when it comes to getting everything organized and set up in the HTML. It's also gonna be a fun exploration of custom properties and some things we can do there. We'll be looking at Grid and Flexbox and hopefully a few other fun things along the way as well. And I've time-stamped everything down below. So if you wanna skip to certain sections of it, just go to wherever you are looking for. And with that, let's jump into this. And the first thing we wanna do is just look at the design and we have a mobile design and a desktop design. In general, when I start writing my HTML and sort of breaking down the layout, I am gonna focus on the desktop design first because it is always the more complex one. But you always wanna look at both just to make sure there's nothing weird happening with a major reorganization of the content. But in this case, we're just going from stacked to then two columns, so nothing too fancy here. So for now, I'll leave the mobile design off. Now we wanna start writing some HTML for this. And when I look at something like this, the first thing that I am looking at is, is there anything really tricky or not? And I don't really think there is, but the main thing I noticed is that this, we have one big background for this all and then two sections inside of there because we can see the sort of that, this has the border radius on it. So we just wanna make sure that the parent has the box shadow on it, but we need some border radiuses on this right here. We have some interesting things with the colors and everything. But the main thing is we have a layout like this and we have two columns. So we can either use Flexbox or Grid to do this. It really doesn't matter. First thing we need to do is go ahead and create something that would allow us to do two columns. So in the HTML, I am just gonna use emit and hit tab here to get a basic starter like that. We can give that a title. Then I'm gonna go with a main just because we have nothing else on the page. Even though I won't use the main for this component type thing we're doing, we'll use a div for that. And I'm gonna come in with something just like this where we have the result summary, which will be my entire thing. That will either get the display flex or display grid to create the two columns. And then I have my results and I have my summary, one for each of the two columns or in the mobile. They will be stacked one on top of each other. Now we're gonna focus first on the results. So we're clear everything else out of the way. And before we do that though, we don't, even though we're gonna be working on this section right now, we don't wanna completely look at it in isolation because it does live in a larger site. And one thing with CSS is it's global. We can take advantage of how CSS works. And one thing we'll notice is while these two things right here and right there, these are different colors. Just because they're different colors doesn't mean that they're completely different. They have the same font size by the looks of it and the same font weight and other things like that. So in that case, I'm gonna have the same class for both of them. And I can rely on inheritance to get the colors set up properly for each side since the two sides are different from one another. The other thing that I'm looking at when I'm breaking this part down is this is sort of like the title of my entire component. This is my results. I have my results here, results 76, great. And then I have a summary of those results. But this is the big title for the entire thing from like a logical point of view. This is, I'm looking at all of my results and then we're breaking things down. And because we have nothing else on this page, if I did I might want a different heading level, but it's going to have the main heading level, which will be an H1 in this case. So we can add an H1 in there, nothing too fancy. And I've given it a class of section title because I want it to match what we have over here. Again, we're gonna rely on inheritance to set the colors and things like that. So we don't need any modifier classes on this. Next, we can look at this section over here, which is the score. And basically I see this just as we have results. Then we get our score right there. So your results 76 of 100, all in one paragraph. Could be in a div. But the important thing here is I wanna span around the 76. This information would be something that could be dynamically brought in through a database or whatever. So by this being in a span, it does make it easier to select. We could put a data attribute on it or something like that. But for styling purposes as well, we could hook into that span instead of trying to come up with some sort of obscure class name for that like result score, actual score. I don't know, don't have to worry about it. We can just use result score and we have a span that we can easily style inside of that. Next, we have this section here. So the great and then the paragraph that follows it. So we can do a result rank and then have a regular paragraph right after that. And I think that should work out pretty well. I have put all of this in a div just because if we look at the spacing here, this space and this space look pretty big. And then we have a small space here. So whenever we have things like that, I find it easiest to create spacing in elements like this using gaps. It's just so convenient now instead of mucking around with margins. So I can have a large gap set on those. We'll look at setting that up in a second. And then this can all be grouped together and this one can have the smaller gap set on that because we will be using gap. I just tend to use grid for things like this. Now there are some side effects to grid. They're gonna work out really well when we get to this side. So every now and then you might be better off with another solution, but in this case, it should work really well. So I'm gonna add this class equals grid of flow right here and we're gonna hook into this grid flow a little bit later on, but that's gonna set things up well here. But when we also have this that I mentioned, we'd wanna set that up on as well. So I'm gonna come all the way back up here where we set those results and we can also add the grid flow on that one as well. Because this grid flow is different that we want larger spacing on it, we could either use a modifier class or what I've started doing a lot more, which is using an attribute selector. So in this case, I'm gonna use a data spacing of large, which is gonna modify my default spacing that I have on the grid flow. If you'd prefer to go with something else like a modifier class instead of a data attribute, that's a perfectly valid solution as well. Now we can move over to the summary, which will be this part right over here and we'll focus on that next. The first thing we're gonna do is add an H2, again with our section title like I mentioned earlier. Now I used an H1 in the other section and then an H2 here and the reason I'm using an H2 is the summary sort of falls underneath results. Results is the big title. Now we're creating like a secondary section under there that's gonna have the rest of this information. So it's sort of like creating a table of contents. This is the subsection to my results. Now once again, we have sort of larger spacing here and here and then we have the smaller spacing in between them. So for this part right here, we can set up a grid flow just like we did earlier. So it's gonna space everything out with the regular spacing. And then on the entire summary, we can add a grid flow with the data spacing of large on there. So I get larger spacing here and here, just like we were doing on this side as well. Now it's clear all of this off because we wanna look sort of at each one of these individually a little bit more. And so for each one of these, we do have a few different things going on. We have sort of a little micro layout going on within here and these are the types of situations where I see flex working really well rather than grid like I was using there. Flex could work to do the spacing the way I'm going to use grid. It just takes an extra line of CSS. That's the main reason I went with grid there. For these though, we have these little guys where the icons might be slightly different sizes. And we also have these words, some of the words are longer and shorter than each other. So I see this as a flex container that then has two things in it. We have one on this side and then this one here and then we can just separate the two of them and we can use flex box for that. And then even in here, I see these sort of as two columns within the area. Probably we wanna vertically center things as well. So when I see something like that, I sort of picture, okay, that could probably be flex box as well. Do we need to group it that way? There's other ways that we could achieve the same thing but I think the simplest way to do it is to have this as a div within the larger space. So for each one of those four, we're gonna create a summary item. Then each summary item will be made up of a flex group that will have our SVG right there and then the H3, which will be our summary item title. So we can have our title that's there that will change colors for each one of them. And then we also have the paragraph that will be our score over here. Now just like here, when I wrapped this in a span because that way we could have a data attribute on it make it easy to reference a JavaScript and change that number dynamically, we can do the same thing over here with each one of these individual scores. And that also gives us a nice easy way to style those as well. Now in this case, within each one of these summary items, we do have an SVG and there's a couple of different ways we could approach this. The front and mentor project did give us individual SVGs for each one that already have colors on them. This is my reaction one. I'm gonna copy the SVG from here and I'm gonna put it in as an inline SVG. There are other ways of dealing with inline SVGs but we're gonna take it the simplest way possible where I'm just gonna drop the actual SVG in here. We're gonna turn off word wrap for a second and take a look at what's set up in here. There's nothing that we need to change except for one thing which is when we look here, there is a stroke which is what's controlling the color. We could leave this here because it's just going to work anyway but I think it's a fun little addition if we actually take this stroke off from here and on the SVG we can add a class and I'm just gonna call this summary icon. So it looks like there's a lot when we're dealing with this inline SVGs. It can be a little bit annoying. You can always collapse things away if you want or of course just turn off word wrap so it doesn't look so bad. So we have our summary icon and then our title that's gonna be here. And again, I don't have a stroke or a fill set on the SVGs. We're gonna rely on our CSS to do that to make things a little bit more dynamic. So that's just one summary item here. If we were using something like React or Svelte or View, we could of course make these into components rather than having it as regular HTML like this but I'm just gonna copy and paste it four times and update the text. So I'll be back in just a second. So I've brought in all four of them. We now have the summary item four times but as I alluded to, when I see colors like this and let's clear everything off again, when I see colors like this that are sort of different for each one of these, the first thing my mind goes to is using custom properties and then I want a really easy way to manipulate that. So we'd want either a modifier class or in this case, I will use a data attribute once again to be able to control the colors on each one of these. So I'm putting a data item type for each one. So we have our summary item and then the item type is accent one, accent two, accent three and accent four right here which will be what controls our colors. And once again, if you do prefer using a modifier class rather than data attributes, that's completely fine. With all of that done, the last thing that we do need to include over here is also our button. And because I only have one style of button, I will just call it button but if you had multiple versions you'd probably want to use some sort of modifier to set things like the background color and other things on it. Now with that done, I'm gonna go all the way up and over here, we're just gonna make sure I have a link to my CSS. We can use emit for that where I'm gonna do link colon CSS and hit return. It defaults to using style.css which just happens to be my file name but if you have a different location or a different file name for your CSS file just make sure that you do put the correct path right there. Now a fun thing with this project is frontend mentor did give us a font file and it happens to be a variable font. So that's in my assets, in my fonts folder. So I'm gonna set up a font face for that and this font face declaration is looking at my font family which is the name that I decided to give it. The font display swap is for performance reasons. Because it's a variable font we list a range of font weights and in this case this font goes from 100 to 900 so I'm just making them all available to me to use in the project and then I'm just putting the path to my font right here and the format of it which is a true type because it is a TTF font. If I was putting this in production I would be looking at updating this to a WOFF2 font just to help with the compression of the file to make it a little bit smaller. And if you'd like to know more about setting up variable fonts and converting it to a WOFF2 font file there's a card popping up or a link in the description. Now the next thing I always do is set up my variables and the variables in this case are my custom properties. I have set up quite a lot of them as you can see here especially for something that is as small as this but one of the reasons for that is I've listed all of the HSL values as individual values for the colors and then I've referenced those back to set them up within an HSL so I don't have to write it out every time. The reason I've taken this extra step is because we have lots of areas including the box shadow, the background here, the text colors here where we're gonna be using one of our HSL values but we need to play with the different opacity levels and having these available like this makes it much easier but if you're using one of these colors and you don't need to modify the alpha value you just need the solid color then it's a lot easier just to have something where your color works and it just works and you don't have to worry about it. So here we have the color that I'm setting up and then down here I have the HSL function and in there I'm using the custom property just to map them together. We'll see as we go through this though that sometimes we'll be using this version and anytime we need transparency or alpha values we'll be going through and using these ones right here so it'll give you a better idea of how it works. The other things I have mapped in here other than colors is while I did set up a couple of gradients we have the gradient here that will also be used in our button and we have the gradient that's right here as well so those were set up. So other than my colors I have set up the gradients I guess those are colors as well but these are all just coming straight from the design. I've taken the gradient that we have set up here and the gradient that is right here and I've put those as custom properties too just so I don't have to start worrying about them later on when I need to use them I just put in the custom property name and it works and I've also set up the accent colors right here which are the colors we're using over here. I've set up the font family as a custom property because that's always easier to do and I've mapped out some font sizes. This is a static JPEG. I'm just taking a guess at this point at what those are and if we ever have to modify them later on we can but and one of the reasons here is we have a two, five, a five, a seven, five it just gives me a nice range that I can work with when I'm guessing I want my font sizes will be and those happen to be pretty common ones all the way up to two and this looked a lot bigger so I went with a five.  Now just before we get into getting the actual CSS a very simple reset for a small project like this I'm just setting my box sizing to border box I'm removing margins from everything since I'm gonna be bringing the margins back in using my flow classes. I've also set font to inherit which sets all the font sizes back to one REM including the defaults and it sets all the font weights back. I like doing this it just forces people to use classes to declare what the fonts are gonna look like instead of using heading levels because people will often use a heading level in the wrong way because it's styled the way they want it to look so this just sort of prevents that it is a little bit heavy handed but for something like this I think it does work well we don't actually have any images and I don't know if we need this on our SVGs but this is a line that I just include basically in every single project I ever do so I've included it here as well. So now we move this out of the way and take a look at what we actually have on the screen and we can start styling it up a little bit. The very first thing we're gonna do is come down and set the font family and font sizes and color all on the body. These will all inherit through so you can see that everything is set up as at least a decent starting point. Now when we're on small screens we sort of want the design to take up the entire viewport but when we're on larger screen sizes we do want it to be centered so to be able to accomplish that what we can do is in a media query we can use the min height 100 BH display grid and place item center so it will center things at larger screen sizes. Maybe everything would work well outside and doing it here without the media query but this is the break point I'm gonna be using for this project so that's because that's when the layout's changing and I want to ensure at that point it's centered I'm including it in the media query and before we get into the layout one of the things I like to do is set up any of the generic or very simple styles so the first thing we can start with is those section titles and for those we don't need anything too complicated we can just come in and set them up and once again if we take a look at them the colors of them are different but as I said on this section I'm gonna be changing the color of the text on it and we can rely on inheritance to change that as we'll see in a second. Next up we can also style our button and give it the hover and the hover state once again is just coming from the designer who supplied there it is we have the regular and then we have that hover state there so now I have that hover that is coming on there as well all we're doing is setting up some basic styles here nothing too fancy and I'm using a border radius of 100 VW because that just is a gigantic number it ensures that we get this pill shape it could be a much smaller number but this works perfectly fine and I don't have to guess at it and then I'm just changing the color on hover because it is a gradient background from a color to a gradient we can't do an animation on that if you did want to do something like that you'd have to actually have a gradient on both of them that moves and it gets a little bit more complex so we're not doing anything too fancy we're just gonna go with a simple transition or lack of a transition a simple switch like we have right now now if we take a look here we call this entire element my results summary so we can get around to styling that even though we will have a few other utility class style things coming in but one thing we'll do is we'll give it a max width and we're gonna give this a display of grid and the reason I wanna give it a display of grid is so at larger screen sizes we can have two columns so to be able to get two columns it's nice and easy we can do a result summary grid template columns 1FR 1FR inside of our media query and the reason that I'm using grid here instead of flexbox is personal choice if you'd rather use flexbox you can use that as well though you'd have to select the two children to assign a flex basis to them or a flex of one just to ensure that they have the same size now looking over here when we're in the small screen sizes we don't actually have that border radius with the box shadow on it but here when we're at the large screen sizes we do so that means that we can include some of those styles in this media query as well so here I've added the border radius of two REM as well as this box shadow and you'll notice here I am using the HSL with the variable inside of it the reason I'm doing that is if we simply went with the variable here and didn't use the HSL version but we just used the solid you can see how dark that is because we're using the colors way too dark we need to lower the opacity on that so that's one of the reasons why I like doing it this way where I have access to the HSL version of it so I just have the HSL values getting passed in and then I can control the opacity of that shadow and make it lighter or darker and play around with that without any issues so there we go that's one of the use cases of putting the HSL here and we'll see a few more of them coming along as we go now next up we have the results that's right here so we can set that up and give it the background color and when we're looking at the design you can see that everything in here is text-aligned center since everything is text-aligned center we might as well rely on inheritance there and this is once again another use case where we want to rely on that for the color as well where we want to be using our HSL variable to be able to set the color once again so we can control the opacity of the text so here I've set that up we haven't put the alpha value and you can see it's very very light whereas here we need to fade things out so it becomes very easy to do we just come down, add our comma and then we can do something like 8.5 or maybe 8.7 in this case to get the color that we're after now one issue that we've run into is we have a border radius that isn't being adhered to on these sides one simple solution for that is on the element itself that has the border radius we can also put in an overflow of hidden and by doing that it means those parts that we're overflowing get the border radius but we don't actually get them over on this side and ideally this element is sharing the same border radius as its parent there's a nice easy way to do that we can do a locally scoped custom property so on the result summary here I find it easier to do it up here and so on the parent we can set the border radius and then when we're using it we can set the variable down there and then we can also reuse that same variable over here on our results and now we have that on here as well as on the parent now we could get rid of that overflow of hidden though it's not getting in the way or causing any problems right now after being interrupted by my dog barking and then my kids getting home I didn't have any more time to finish recording so you can see change wordrobe I've shaved we're gonna be jumping right back into it but before we do I just wanna ask you a quick question and that's about what do you think of this format of video where on these longer form ones I usually type everything out and I'm just walking through my process here it's a little bit more jumpy a little bit faster paced where we're looking at the code and talking about what it does I'd love to know what you think whether you love it you hate it you don't care one way or the other leave a comment down below to let me know to know if I should be doing more of these less of these or whatever it might be and with that let's jump back into finishing this layout we just got our border radius set up I realized we were missing a little bit on the left but you weren't really missing anything so it's all good and we're ready to keep on going with this where we need to add some padding now now this actually presents an interesting scenario because we have the padding here that's on our white background but then clearly we don't want that padding to actually be on the parent because this element needs it as well and if we were to add padding to the parent then we'd run into a few issues along the way but we ideally want the padding to be equivalent on the two of them so once again we can use custom properties for that and here we have our border radius and we can also come in and add some padding this way so this is gonna control the padding for the entire element even though it's only the children that have the padding on it so we can add our padding in this way on both the results and the summary and we can see they both have equivalent padding on them now the nice thing with this is if ever we wanna change it and we want this padding to be five for some reason we can switch it and they both will change at the same time so it's a nice way to have one padding declaration that controls it everywhere that we need it now if we open our dev tools and to shrink things down a little bit we could also go in responsive mode if we wanted to but we can also see here that everything's working in the sense that it's stacking properly but the issue is once again with our border radius in the top corners where it's not looking so fantastic ideally the mobile design would not have a border radius on the top so we can fix that really easily by coming down and where we did our initial border radius declaration where I'm just gonna copy this here and what we're gonna do is we're gonna say that it's actually zero zero and then our border radius two times for the bottom corners so it's giving us our border radius on the bottom two corners and nothing along the top and then what we'd wanna do is within our media query switch that over so we added on all the sides so then we can add this media query in it leaves everything alone here we're using the same break point as we were before and we're adding in the border radius back to what the original declaration is so now we have the border radius coming in like that it's also a little bit awkward that it's touching the sides especially with the shadow and that border radius there so if we go back up to this media query and you could definitely combine all your media queries together if you're worried about repeating code though once you upload things onto the server most servers these days automatically compress your CSS files and repeated code like this it makes a very small impact on the total size so if you'd rather keep everything together in one media query for each component or something like that there's no problem with that but if you do wanna separate them out like this so they're all grouped together with the selectors you're probably not gonna run into any issues but here within this one what we could do is add in a small margin on the left and the right and so I'm gonna do that with a margin inline which is the inline axis which most of the time if you don't switch your writing mode to be a vertical language will always be the left and the right so it just gives us a little bit of cushion when we're on smaller screens but when we have more space it won't have any impact now we wanna dive back into here and set up things a little bit better because they're not looking perfect but they're actually not that far off we can see that our font color here is really good we've already done that we just need to space things out basically and get this set up along with that grate right there now if you remember when we set this up we used our grid flow class in two different spaces and we're gonna be using that to create the grid itself and space things out and then after that we'll tackle setting up the circle for the element in the middle for the basic setup of this I am setting things up like this and the align content start is very important here if we use our grid inspector and we look at things we can see that they're actually laid out really well here but if I did not use that align content start grid wants to stretch and it will take up all the available space now this obviously doesn't create a very good flow class when the gap isn't actually what's creating our spacing so we can put that on and it fixes that problem it keeps everything grouped together at the start or the top of the element now we did have this data spacing large that we wanted to use in a couple of spots as well so for that the easiest way to do it is to use our data attribute selector and we can set things up just like this this is one scenario where I used to use custom properties a lot to set the gap to make them easy to rewrite but I've stopped doing that because custom properties will inherit in so if you had a large one that we have in this case on the outside and then a smaller one on the inside the custom property inheriting from the parent could actually impact the child this prevents that from happening and so if we look at the parent grid we can see we have the large gap that's on those now and if we look at the one that's inside of that we can see that the gap is smaller so the small one is using the one RAM the large one here is setting things up with the two RAM which is exactly what we wanted next up what we wanna do is focus on the circle right here which is pretty simple we just have a gradient that's set on here and we have to increase the font size there and that's about it so let's get that set up so here on the result score we're gonna start with a width as well as a margin inline auto just to center it within the space that it has we have the background gradient that it already created when we set up the custom properties earlier and I'm also putting an aspect ratio of one on here to ensure that it's a perfect circle because without that we would get some really ugly oval shape the one problem is we also need the text to be centered within that space and we can either do that with flexbox or grid to me grid is easier because it is less lines of code so we can use a display grid place content center and we get the number right in the middle next up we need to style the 76 that's here so the first thing I'm doing is giving it a display block because it is a span but we wanna make sure that it's on a separate line from the of 100 we wanna set the font size to be the nice big font size on there a font weight set a line height just to keep the spacing from being too big and of course set the color to white instead of that transparency white that we said that everything was just inheriting within this space really fast with the selector here I did just use the span I mentioned this earlier it makes it a lot easier than having to come up with a class name specifically for the current score or whatever you'd wanna call that if you prefer not to use any descendant selectors like this of course you could give it a class instead but for me this works perfectly fine next up we have the result rank that we can style up with just a color font size and font weight on there and everything is good and this is where one place people often run into issues where they go there's too much empty space underneath here and they try and come up with solutions to fix that do not do that yet maybe you need to fix things in the long run but this isn't a problem at the moment the problem is because we have too much content on this side and everything is really spaced out but this is not what the final layout on this side will be these items have to go next to one another it's gonna make the space a lot smaller there and right now these are trying to stretch to match each other so before you run off trying to get this thing to be perfect get the layout for both sides to be correct and then see if there's any inconsistencies and things that you might have to fix because remember all of these things live in relationship with one another that's sort of how CSS works we're relying on inheritance to set things like colors we're also setting up a layout that's relying on the relationship it has with other things never forget about those relationships we can't work on this in complete isolation we have to remember that it's part of a bigger picture get the entire picture sort of in the right direction before you start worrying about things like the extra spacing that's just matching the height of its sibling now jumping back to the HTML quickly here we have our grid the entire thing set up with our grid flow and our data spacing large which is giving us the spacing in between these and right now there's also a little bit of extra space because we have some invisible SVGs that we're gonna be dealing with soon before we get to that though we will be doing a few things on this summary item and that's gonna set the stage for our SVGs while we're at it so jumping back over to the CSS we can move down and we can set things up very quickly here and you'll notice I'm using a display of flex along with the justified content space between to separate them out side to side like that align items center just to make sure everything's lining up nicely a little bit of padding and a border radius on there we can't see those yet but we will be adding background colors so we can start things off by using a display of flex to set the two columns up like we'd mentioned with a justified content space between to space things out and the align item center to ensure that we are aligning things it does not look aligned center now again because we have some invisible SVGs we have a little bit of padding, a border radius and for now I've used a filler background color just so we can see these things a little bit and we'll be changing that shortly now just so we can see our SVGs I'm gonna add this in for now where we're just selecting our SVG that's inside the summary item and setting the stroke to red I'm using stroke because of all the elements that we had before that was the stroke that we removed from them and I said we are gonna set that with CSS so this is the beginning stages of that but obviously we need these two elements to go one next to each other and right now they're not they're going stacked like this and if we jump back into the HTML just to take a look inside this element now we have those inside of what I called a flex group if you had a different name for it that's completely fine but I'm gonna style that up next now in the CSS I'm gonna scroll all the way back up to a higher section here because this is sort of where we're keeping more utility class style layout things rather than things that are specific for this component that we're building and having something like a flow class or a flex group all seem to be a little bit more reusable they can plug and play them where we need them so I group those higher up in my CSS and in this case we're gonna have our display flex on there a line item center a gap and a flex wrap just in case they run out of room it lets them wrap around and there we go we have the SVG icon plus the text right next to it now let's go get those colors set up and the way we're gonna do that is we'll scroll down in our CSS back down to this section and if we come and take a look you might remember that we use this data item type attribute on here and we're gonna be using those to style the colors and set them through custom properties so we can have our summary item with our data item type accent one and then we wanna set the custom property for that and if we look at the design here it is our red color where we set all of those up as custom properties up higher and so we're gonna set the custom property of item color using the accent one color that we had when I set these colors up I only included the HSL values I did not include like a finished version of it and that's because I knew we were gonna be using a lot of transparency in them if you'd wanna do that more similar to how we did this we're mapping HSL values into HSL functions here we could do that as well but for these purposes I didn't really see a need to do it so if we come down here and we have that set up what we could do is actually change the background color on all of these and in that case we could set it up to use our item color now because it was only the HSL values we wanna use an HSL function and then inside that HSL function we can put the color that we want and you can see the red is coming through as the background color and then we can just add in the transparency that we need for it and of course we need this to work for our SVG icons as well so for those on the stroke we can use the exact same thing but set those just as the solid color and these ones have disappeared because we haven't declared the custom property for anything other than accent one but we can see that it's working wonderfully there now before we get those next three set up the other thing that we do need to set up here is to also set up our titles to be using the color as well and once again we're using the exact same method plus I'm also using my font weight bold here to make the text bold next we can just duplicate this so we have all of them and then here we can switch this to my accent two take these ones, switch them to the accent three take these ones, switch them to the accent four hit save and all of those colors are set up and it's working wonderfully now this is a wonderful use case for custom properties and the advantage of stripping the color out of the SVG and then adding it back in this way is if ever a designer came back and decided to change one of these values or changes the color and we change this over to maybe a 150 the color will change and the icon and the background they all change together by updating one single value and it's really easy to do of course it's way too bright now but you get the idea of it's really easy to make changes to the colors and everything is impacted we don't need a new asset to switch things out with the SVG or anything like that also notice the spacing between these is correct already that's because we're using that same flow class that we're using before and you're also gonna notice that remember before I said things were stretching out and the spacing was really awkward and everything's sort of falling in line a little bit better now than what it was before now that we've fixed our layout on this side and one issue does seem to be that this element has a bit more padding in the design on the left and the right side on the sides here than the element does on this side we're gonna tackle that closer to the end it's really easy to set up but for now let's just fix up the rest of this there's not very much more to go so this is very similar to when we set up the score on this side over here we can set up the summary score itself we can lighten things up a little bit changing the color on this as well as set up our font weight for the entire thing that all inherits in and everything in there is using it and then the user score once again was in the span so I can just change the color of that span to have that highlighted a little bit better and match our design and with that we can now go ahead and try and match the padding a little bit as I said the padding on the top is the same for both of them and it looks like the padding on the bottom is the same it's only the padding on the left and the right of this side here and nowhere else and if you remember we were using a custom property for that to be able to control things all together and to me that relationship would probably be maintained so the simple solution for that if we come back up to here where we set up our padding on everything is to actually break these apart into two different selectors the reason I did it like this at the beginning is it's probably close enough and we don't really have to worry about it but I do want to cover this because it's a nice little trick that I use quite often actually so what we're gonna do first is we're gonna take this and copy that and just come down a little bit further where we'd set up our summary we never actually selected it so we're just gonna move this down here so we have that declaration all on its own then moving back up we can then delete all of this I'm just going to remove that delete that because we won't need it anymore and in here where we set things up we can bring in our padding but we want the padding on the top and the bottom to be different from the left and the right so the easiest way to do that is to declare it two times and then on the second one which is our left and the right we can wrap that in a calc and then just give this a multiplication factor of 1.5 so we're increasing the padding on the left and the right a little bit compared to the padding on the top and the bottom if ever we change that padding custom property all of them will grow or shrink in relation so it still has that connection that we had before but now we're doing it where we're just increasing the one on the left and the right a little bit and it seems by doing that it does help us match the design a little bit more now we can open up our dev tools really fast hit the little responsive mode so we have it in there and we're going to see when we hit our breakpoint that it collapses and looks a lot more like the design that we had for the responsive mode that we have here the border radiuses are all well set up everything is looking pretty good we're taking advantage of grid which is automatically having these items stretch including our button at the bottom and overall I'm pretty happy with the end result here if you enjoyed this video and you'd like to see me build out more projects including where I'm coding things a little bit slower instead of this style of video you might be interested in the ones that are in this playlist right here where that's exactly what I'm doing and with that I'd like to thank my neighbors of awesome Johnny, Michael, Ralph, Simon and Tim as well as all my other patrons for the monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome


The essence of collaboration and knowledge sharing to educate and empower Africans on trends and possibilities of the future of work and businesses has been brought to the fore. This was the focus of the inauguration of the Knowledge Digest Africa conference aimed at building the continent's largest one-stop digital knowledge bank details in this report. It has often been said that most businesses died not necessarily from lack of funds, but as a result of theirs are fresh ideas, new technologies and facts to ensure productivity. It is against this backdrop that this digital knowledge bank has been put together. In her keynote address, Commissioner for Education in Lagos State, for Lashadi Adifisayo, emphasizes the place of collaboration. The founder of the Digest, Samson Olatunde, who speaks about his passion for the past 15 years, says the country must leverage emerging digital technology to produce employees of labor for the 21st century. Look at the synergy that you can get from using online platforms. How many people can you teach in a class? 30, 40, 50? How many people can you teach online? Millions. So I think that because there's a masterclass component of it and there's also the fact that there's a market component of it. How many people enter a bookshop to buy a book? But how many people go online to buy a book? So I think it's a great initiative and I hope many people will tap into it. We believe that many people are struggling with implementation because they probably expect knowledge from a developed country and then many things are structured in a developed country, unlike our country that is developing an older African country. So we felt why can't we look for business leaders, executive career professionals who have been there for over a decade, right? They've gone through a lot in their country, in the industry, so they will be able to share experiences and help many people connect more to navigate in terms of maybe they want to start their business, they want to sustain their business, they want to scale up their business, most importantly they want to build a system around their business which is saving them stress, time, energy and money, system saves you stress, time, energy and money. And the whole idea of knowledge that is just Africa is going to be a collaboration with order, young think guys, people in different industries for medications. All the speakers share their thoughts on the need for a digital bank, including the immediate past president of the chartered institute of bankers of Nigeria, who gives useful insight on the need to create tri-generational wells. Most businesses that would die, die within the first two, three, four years. And if you are able to sustain a business beyond 10 years, then it makes sense that you try as much as possible that that business at least you. The ecosystem thinking means I'm not the sole provider of a solution, okay. I get in touch with people who are like minds, people who can actually augment whatever product that I'm developing such that it moves from being a product into a solution. That way first you can reduce your cost of delivery because other people are imputing to the cost of delivery. Two, you can have a faster route to market that way because a lot of people are bringing in expertise that you don't have on your own alone. My information on the platform shows commitment towards providing digital learning in line with the digital policy of the federal government.


Well hello and welcome to another OpenShift Commons briefing and today we have my friend and colleague Paul Lanscaster from the Part of Development Group over at Red Hat and the Cloud Platform BU and we're going to talk about something that I bet people have heard a lot about but don't know really the origins of and what the details are behind it. Cloud native network functions or CNFs which get misspoken as container native functions or cloud native functions but today you know Diane will try not to illiterate the the acronym and let Paul introduce himself and tell us about how all of these things came to be and hopefully give us some insights in how you too can build some of cloud native network functions and work with us here at Red Hat. So Paul take it away thank you very much for coming today. No problem thanks Diane. So yeah so I'm gonna talk a little bit today about cloud native network functions running on OpenShift but more in generally running on Kubernetes you know we at Red Hat have had a lot of experience with this stuff and you know hopefully the presentation will make things a little bit more clear about how we look at these particular workloads running on top of OpenShift and what we have done both in the open and with our customer base to sort of make OpenShift and therefore Kubernetes more real and more powerful to run your applications your network applications on okay so so I guess let's start first of all with defining what exactly a cloud native network function is so so a little bit of credit to Legato here I pulled this from their their site if you go to ligato.io you'll see an explanation of what this is but at a high level right a cloud native network function is simply an application but it's a specific application a network network function that is designed and implemented to run inside of containers right so cloud native network functions inherit all of the cloud native architectural and operational principles including the Kubernetes lifecycle management and agility and resilience and observability and they are I mean they're built to deploy and run on top of Kubernetes right so it's a very distinct type of application and there are some things that around tuning and specifics and building it and best practices that we can talk a little bit about as we go on and maybe I can give you some examples of but think about this as an application there are some specifics around the application but it is a type of application that is built on Kubernetes it uses Kubernetes principles there are some specific tunings that you'll want to have and in fact we've built into OpenShift for you so at a high level that's what a CNF is okay so in terms of the journey that the community and the partners and the service providers themselves are on it is not an uncommon journey from other cloud-based applications right so very similar to other applications in the cloud it started as what you would call bespoke hardware that's very verticalized especially in this industry to more monolithic applications that ran as virtual machines eventually those things got sort of broken out and ran on more horizontal platforms such as OpenStack where by the way we've had a lot of experience with that as well and then you know ultimately are making their way or have made their way and still are making their way towards being cloud-mated okay so that's the network functions or NFV journey that a lot of these folks are on hopefully a lot of you folks that are on the call today are well acquainted with this and what's driving it I mean what's driving it more than anything right so and there are a couple things I mean obviously the idea of the next generation networks around the world are really driving this right so both the CSPs and as well as the the media players all want to get to the same place which is to be able to run applications just like you would in any other cloud okay to be able to install those applications to manage the life cycles around those applications I mean really to just make it easier to operate and deliver new services the same model that really any other companies journey to the cloud is undertaking again there are some specifics around the way that the needs of these applications but this is what's driving it right so 5G it's a it's a big buzzword that I mean probably everybody on this session has heard about but these are the things that are the transformation to 5G the transformation to what we call digital service providers is driving a lot of this in the ecosystem okay so why cloud native then why why do we want to get to this part of the journey well it's about all the things I just mentioned in the previous slide it's about making it easier for you to operate easier for you to upgrade easier for you to manage you know easier to roll out new services the entirety of the story of Kubernetes is and in cloud native applications in general applies to this we as a company have been engaged in this for quite some time I'm sure that all of you are aware that you know we are you know one of the biggest contributors to Kubernetes and we're big believers in this whole thing but in the whole world of telecommunications and 5G it's the same sort of principles apply right ease of delivery ease of rolling out new services ease of upgrading those services all of those principles are are why folks want to have cloud native network functions and and run those on their new 5G networks so to that end red hat has been very active in a lot of upstream communities not just the kubernetes or the cncf communities but many different communities including linux foundation networking you know I mean the list is very long the open air interface the oran community and we see lots of our customers participating in these communities and this is a just a for instance of a customer very large customer China China mobile who who has been investing in in helping build what is ultimately going to land you know ultimately for a lot of different service providers out there ways to deliver these applications you know using open source technologies right so you can read more about this I the the actual use case itself I mean you just simply google 5G and China mobile there's a lot of data there but in particular within the LFN community linux foundation networking community you can see a lot of the work that China mobile has done and this is across various parts of their network including radio and AI and their entire ecosystem this is one of the partners that we partners customers players in the service provider community that we see oftentimes and so we have you know we've worked with them and ultimately what we've done as far as putting together this this model for 5G cloud native you know service providers like China mobile will be adopted and have adopted so maybe I can talk a little bit about some of the architecture and this is not an uncommon architecture that you would find to many services that are being built out in a global way but this is very specific to to network functions and some core functions and some edge functions that you you might want to sort of build out your architecture to look like this right so you know we work with many tier one service providers around the world and this is kind of an example of an architecture you might see out there so where there are there are core packet processing functions there's an SDN if not multiple SDN layers and then there are edge sites out there with applications that are closer to radio towers so making it multiple levels you've got the radio tower is the farthest edge you've got a centralized office edge and then you've got your data center edge and all of those areas are sort of being modified if you will and then becoming cloud native as far as this particular architecture is concerned so this is kind of an example of what we did um or what we are doing in the community okay so talk a little bit about the POC that we did so a couple of years back now we started working on something called VCO which is a short for virtual central office this programmatically has gone through well not programmatically but technically has gone through a couple of different iterations we of course had a virtual machine based one but now as of even a couple of years ago had moved on to something that was cloud native and for those of you who may have attended jubicon in the last in person jubicon which i think was in San Diego a few years back but i'm sure folks will correct me if i'm wrong you may have seen a demo that we did which i'm going to talk about a little bit today that that has actually been updated since then but as far as i know it was the very first ever live demo of an end-to-end cloud native 5g network where uh several folks internally that i work with folks like Hanan Garcia and Azar Syed put together an ecosystem of players that i'm about to talk about here in different locations where we showed an end-to-end video call that was completely based on open shift all of it was done in the open and these were the locations that we that we actually use right so we had a location for radio that was in europe we had a location for the control plane and core which was in Montreal and then we also had another location for radio and core which was based in San Diego and this made up our global network for delivering this poc this was the architecture for the poc right so all of the functions themselves broken out for four as well as radio you can see how that sort of looked here and who some of the players were our partners like Kaloom and Lenovo uh in in Montreal as well in San Diego and then what the technologies they used were based on so it was you know obviously red hat enterprise linux and red hat enterprise linux core os as well as as well as open shift and this is the design for the radio pieces of it so you know we we were unable to obviously get any spectrum for this demo so we did this all in a fair day cage but nevertheless conceptually it's exactly the same as what you might find as an implementation or at least it gives you an a vision as to what you might find as far as implementation is concerned and this is these are the partners who we better build it out with right so again Lenovo a10 uh Ultron provided us with the 5g core comm scope for the remote radio units and then we had a set of end user handsets which you can see over there on the left 5g phones uh this was the core design in Montreal again partners like turnium a10 Ultron Kaloom and Lenovo were involved and uh you can see how we stitched this together again it was operating across Europe Montreal and San Diego this is the European edge point um again you can see the open air interface scope so open air interface is another upstream project that we're working on they aim to sort of make standard interfaces for radio available across open source and hopefully that's going to gain adoption this is the software stack that we use right so it was all running on bare metal um well not all of it some of what was running in a public cloud but for a lot of the c and fs it was running on bare metal with with red hat enterprise linux and red hat enterprise on the score os uh open shift container platform running on top of that a lot of the cloud native uh uh applications and projects we were leveraging all the ones that you can see there on the left and then for the public cloud pieces you can see some of the functions were actually run there and then of course the list of partners that we had folks like a10 ultron the ones that I mentioned before ultimately making this happen uh let's see so what did we learn from this well we learned first of all that it's possible to deliver cloud native network functions and build real services using the stuff from this poc um why do we look at it uh running on top of open shift of course you know red hat believes that we have the most uh enterprise ready um Kubernetes distro out there and we look to the community to help us make make it better frankly um so this is the work that we've been involved in in terms of uh you know the ecosystem uh the cntf the lfn and uh making all of this work available ultimately to our service provider customers who run who want to run their cloud native functions on top of open shift this is what the bare metal deployment looked like um don't have to get into too much of the detail here but you can see uh how we set up real time and add uh FPGA card so these are some of the things that I talked about earlier that are little tweaks that uh are expected from folks in the service provider industry red hat includes operators that take care of these tunings for you things like the performance add-on operator or the sri ob networking operator are in red hats distribution of open shift um red hats product open shift rather uh and you know when you turn these things on and run them that that that is a best practice way for you to run your containerized network or cloud native network functions so I've got a little bit of a demo here I can go through um Diane I'm not exactly sure how much time we have but uh we've we've got plenty of time and I would love to see this um so let's run it um and Chris if you're listening to let us know is there a sound to this or are you going to talk us through it I think there is sound to this um but let me take take it let it rip yeah I know these things these demos are hard to put together live so I'm totally okay with the video yeah so let me uh let me just see here I need to assemble all the pieces in part yeah so obviously this is us uh in our team logging into and building this entire demo uh using open shift um I guess the sound isn't coming through for some reason so maybe I could talk a little bit to it but what you're seeing is really the back end of how we built this entire um network again it's a it's a little bit of an older version of open shift and a lot of the uh innovation we've done since then helps our operators in the community take advantage of things like I mentioned the SRI the operator the performance out on operator but uh this demo sort of essentially shows how we built that now uh I think Diane maybe it's not as quite as good because the the sound isn't coming through for some reason so yeah the sound's not coming through but um the visuals are fine the what you're seeing here is is essentially the pieces that we've built it with including all the functions uh running on on open shift we you know we've brought those together here so I I think uh maybe this is a little too um gosh I I think we should probably skip on this because the sound is in the in the background but it's not yeah um we can we can we can yeah if you do you have a link to the video is I do have a link to the video I can send it out later if you just put it in the chat Chris short can run the video um and play it pull it we can pull it down but um don't worry about it just go on to where you're at in the slides and we'll okay you if you give me the video and anyone who's listening I will um throw the video into the edited version of this so that you can hear that play by play I will do that yeah I'll send that send it on sorry the apologies about that not exactly sure I wasn't working but you know ultimately it talks about things about how we set it up of course this is a lot of detail on it uh another community that we've been working on is the multis community so this is all about the plug-ins or or the meta plug-in to CNI for instance this is another thing that we can set up very easily using operators in open shift so these are all the partners that we had involved as as I mentioned at the sort of the top of this uh it was folks like A-10 and Ultron the list goes on here um but the projects were in the LFN community and the OP NFE community okay so um that at a high level is the entirety of the presentation and if folks have some questions I'm happy to do my best to answer those now yeah so um I have there's not not a ton of questions here um and I'm not seeing anything maybe Chris if there's any in the any of the live streams you can forward them here it what's interesting to me if you put that slide back up on the screen um when 2019 we had China Mobile come um and give a presentation basically on these topics the early edition of it um in Barcelona in Spain and then I couldn't find it but I will find that the talk you were talking about at the San Diego KubeCon in 2020 the evolution of this um this whole thing into something that's actually program now for certifying container native network functions you know it's been yeah we've been watching this transition and I'll for almost I've been watching I'm sure you've been watching it much longer because you've been in the telco space waiting for this all to evolve but for me it sort of hit um in 2019 when um the gentleman from China Mobile came and stood up on stage and he was saying waving his hands and he had the most deep dive um thing you know it was sort of mind blowing this the schematics that he was doing yeah and what you're showing now um is so much more I mean it's it's comprehensible that you know that the diaries and and I think that's what these container native network functions have done is they've taken the complexity out of deploying this um and cleaned it up so it's reproducible and automatable in a way that even in 2019 was um you know somebody's dream well I mean I think that is the case right so a lot of the work that we're finding in the EMEA ecosystem now in terms of the partners I mean they're definitely make doing a lot of work to make their applications much more easily deployable on OpenShift and a lot of that has to do with uh their uh the belief in things like Kubernetes operators the operator framework and building operators to do things like not only the day one sort of install and upgrade stuff but ultimately how the operationalizer application so the day two things um and all of the additional functionality you can build using an operator so so there's that and not only that but what we've built into our platform from an operator perspective so a lot of the learnings that we've taken from having customers that are tier one service providers around the world we've actually put those tunings into our product using operator concepts right using literal operators like I keep mentioning the performance out on operator in the SRIOV operator to make it that much easier for anyone who's interested to deploy build deliver their cloud native functions on top of OpenShift. I do have uh an additional deck which talks about our certification and why we think uh you know CNF certification is important at Red Hat I can talk about it at a high level as well but we do have a program right and the program sort of looks at a couple of different areas um one area is of course how you've actually built your containers the other area is how you've built your automation right so a lot of folks were choosing Helm but Red Hat are big believers in in Kubernetes operators obviously the third area is how we actually test a an ecosystem um of different types of applications and how they should best perform on top of OpenShift and we've donated some of that testing in those concepts back to the community through various Githubs and I can you know share those with folks after the call or after today's talk but we're welcoming folks in to sort of add their test cases and talk to us about those or you know even engage with us to talk to us what's most important to them so we can even make these programs more meaningful ultimately to the customers. So I think and that's the other thing that's that's um I'm hoping to do um with you over time is to get some of these folks who have built um certified cloud native network functions I'm gonna do the CNF full on now that I'm gonna memorize it today what it all stands for but um is to get some of them on to talk about the use cases and why they built it and how they built it because I think that's also an interesting aspect and the more of these that we get I think somebody told me the other day we had around 40 to 45 of them in in the you know already certified uh out there but I'm sure there are lots more um use cases and different things that we can um do and so the more people talk about you know what it took to build them to containerize these things and um and get them tested I think that'll be um an interesting thing for the community to learn about um and also you know how some of these things are being used in in practice too that's I think some really I mean mostly what I've seen is um aside from your short demo and today um is really the China mobile story um and it'd be really interesting to see some of the you know some of the other stories as well so yeah um we we certainly hope to be able to bring some of the partners or a lot of the partners that we've worked with uh to to OpenShift Commons and have them talk about the work that they've done there's some very specific work depending upon the use case that probably is is very interesting to uh to the attendees um obviously if you know you're a radio application it's a lot different than if you're a say a core application and we can talk maybe to some of those those those partners I mean the the partners that we're working with on the radio side or partners like Altio, Star, Parallel, Wireless, Ericsson and the list kind of goes on and then on the core side it's very similar you're affirming networks of the world and avenues of the world, CASA systems, Ericsson, etc so um yeah we I hope to be able to bring those folks to uh to this discussion in the future and they can talk a little bit about what they've done and how they've done it using the future. So where can they go um and maybe this is a share your screen again on the Red Hat site world to find out more about the certified program that's I think the key thing that um so if you're not in the certified program yet or if you're just getting started um there's kind of a uh a sort of a getting started page I think I stumbled on it the other day um when I was trying to figure out what all this was about. Yeah so um so maybe I'll uh let's show that real quickly uh-huh let me uh just uh we share my screen just a moment let me know if you folks can see this yep okay so that's the upcoming event well this uh so this uh it should be I should be showing access.redhat.com right now it is indeed yes okay so the first the very first step for anyone who's interested in partnering with Red Hat um and helping uh having us help them build their native network functions to best practices on OpenShift is for them to join the um technology partner program right so you can go to access.redhat.com slash join there is there's uh there should be uh two options there one option is the technology partner program and once you join the the technology partner program that will allow you access to all of our products and services including OpenShift right um it will allow you to do things like uh you know grab subscriptions etc but that is is where you want to start now there is a um there is a workflow which I can share with everyone on how to go through this journey it's a get book and maybe I'll actually let me just share it with folks now I'm in the chat window just a second here is the guide for how partners can start the certification process with us all right now I'm gonna put that in the chat window for for folks to take a look at all right there there is one question but it might be slightly off topic um and it's coming in from um one up like either youtube land or somewhere what are the benefits of OpenShift serverless and OpenShift service mesh um I think that's a bit off topic um for today but I don't know from from my perspective I think that's not something in this bailiwick yeah I mean I think serverless and and service mesh are a couple of you know obviously very important pieces in the CNCF world and it's also things that we ship with with OpenShift I'm not the expert on serverless or for service mesh but I would say that you know we could probably guide you in the right way there and there's obviously some pms that we work with there's a ton of there's a ton of other OpenShift commons briefings on both of those topics that we can we can shoot you through and now and get you to but I think that's a little out of scope for today's conversation just to let Ayesha Akesh know that Chris that would be okay and we definitely will cover that in multiple times and we'll cover it in future talks as well so I think that the the interesting thing for me is and I'm going to go back to this evolution from 2019 to you know here we are in 2021 and it's you know highly operator focused and there's certification programs in there what do you see is the next big thing in this road roadmap what's beyond you know getting your your functions certified yeah I mean the so we we've partnered with folks that can tell to put together hosted labs where you can come and understand best practices with us you know you as a partner you may want to do that because of course we can provide a lot of coaching on that but in terms of the next big thing I mean I think it's it's happening now right it's it's what's going on in the world around 5G and a lot of this is pushing the next level of how these these applications are being delivered right and so the service providers you know tier one service provider even tier two service providers are all sort of pointing through this transition and that you know ultimately is driving the next the next level I mean hopefully the next level will be continued to be open there are projects that are even looking at how to open more of the radio bits or radio applications projects like the O-RAN and the open area interface that I mentioned earlier so I think the adoption of those things and you know the increased adoption of just open ways to deliver these applications I think is frankly the future of telecommunications networks in 5G and UI yeah it's pretty amazing to me how much of this is being done in the open too because telcos you know prior to sort of I don't know yeah I don't like even 10 years ago or five years ago you weren't seeing telcos playing well together in at least I wasn't in open source spaces they may have had proprietary foundations and things and done stuff yeah together and you know and in industry backed initiatives but they weren't really huge open source players and and now you're seeing them you know all you know coming together whether it's in the Linux foundation or in you know the cloud native foundation and that is really huge eye-opener for me and I think that's also helping a lot drive these things to be much faster in the evolution so you nailed it there Diane I mean a lot of the vendors excuse me a lot of the vendors who are or have been supplying the telecommunications service providers for many years uh are now starting to realize that this is the trend and so all of these vendors are are now starting to collaborate in the open and I think that is you know that's the sea change that everybody wants right it's the sea change that the customer wants and it's also the it's the evolution of how we all work together and so we're starting to find the various players you know working in things like ORAN open our interface LFN I mean the list of projects just with kubernetes multis the list excuse me it goes on and on there and I mean I think this is the future of what's going to happen yeah it's happening now but it's going to continue because it you know there's a huge initiative inside of red hat around telcos is you know a coalescing of different technologies I mean you're focused on one area but there's you know there's another team I've been working with Bill Wright and Lisa Kaywood around this enterprise neuro systems initiative around leveraging what a few what's the Mexican telco's name I can't think of it yeah thank you thank you I have been doing and they're open sourcing all their ai ops for you know automating and and the the back end side of the telco operations and you know you know 10 years ago five years ago you weren't you wouldn't see this and this is just I think and we see it in every industry so it's it's not new but the embracing of you know the open source development model and the understanding that doing it and innovating together benefits everybody and also I think it makes it easier for end users and customers to adopt and trust the services so they're not dealing with one big locked in proprietary entity so I think it's a it gives a better level of trust that you know maybe they can move and play in different spaces and aren't as locked in but the benefits of the home look the the you know the mobile network service providers are they're in partnership with this next generation of applications which are going to be able to or are taking advantage of things like you know the edge or the provider edge or whatever you want to call it the telco edge and there are all kinds of applications that are going to be running out there that are going to require for or best going to become meaningful when they're using things like AI whether that's for industrial use cases and manufacturing whether it's for the you know energy world it I mean in general these things are referred to sort of at a high level as private by gene where the network is extended not necessarily using a public spectrum but no private network all the way out to like retail facilities you know in the energy world and mining and and the service providers are a part of this and the applications that live on the network are all part of this so again a lot of those use cases ultimately are driving changes as well in addition to the fact that everybody on their hands that wants to have the best possible experience there's these other use cases that are sort of adding on top of that to drive what's the change in telecommunications so it's going to be an interesting ride this next couple of years I think watching watching this space and seeing what comes out of the telcos space as they learn more and more about you know the power of collaborating here and I think the stuff that your team has been doing you were working with a couple of architects you know just in the work that you've been doing but Gil who's also on our team is doing a lot of stuff with Verizon and you know there's you know Mark's doing a lot of partnership so that's really interesting to watch how the partner ecosystem is evolving and the best practices and getting the labs set up and getting all this stuff available and the role of Red Hat as the vendor or and partner for all of these folks who are collaborating helping them you know do the testing you know get the best practices in place make sure it's all secure we really it's been really very interesting to see the speed at which this change is happening and I'm really pleased that you came and explained what all of this was and what we were doing that was pretty cool today to get that story in the background it's interesting that you mentioned best practices I'm going to put another link into the chat for folks but this is a document that we spent a lot of time on with Verizon in particular and it's a roadmap it's a very in depth and detailed roadmap on how to best build your automated functions for OpenShift it's 60 plus pages of very deep technical and engineering information on how you can do that and so you know it's a PDF I would encourage you guys to go grab it I take a look at it and you know ask us if you have any questions but this is really the culmination of work that we've done with again two or one operators like Verizon I will definitely add that in it's yeah it's it's the version 1.21 from October that's yeah I saw that come by and I have to say I ignored it because it was huge and too deep it was one of the mind blowing things like I'm never going to get the hardware to play with any of this and I think that's the beauty beauty of having having you on to be able to explain this because it's like most of us we hear about this stuff but we don't have you know this you know this is this is a big buck lab set up so I know this is not your home lab thing that you're going to do with okd or something yeah this is not poc stuff this is definitely this is commitment yeah no I've heard you guys bandy about some price tags for these labs and I'm like okay hmm out of my little open source okd home lab budget here but it really I'm grateful that you came and you spent the time today and and you you shared the stories with us I'm really looking forward to you kicking off a series with some of the partners to to tell us about their journeys and what they're doing on the edge and in telco and how this is working and what I really think is that some of the we should get the open air folks and yeah the other folks to them to come in to tell you know give sort of an update on where they're at with their projects and where they're going you know what the roadmap is and where you know how to contribute in the upstream too so I think there's there's a lot of content here that we can tease out and in the coming months to really showcase some of this because you know we've come a long way since the Barcelona Spain China mobile talk that I gave that kind of was like whoa this is really complicated I'm not sure I'm gonna get you know and the odd and you could see sometimes you know the the diagrams were like packed in every inch of his slide and he was he did a wonderful job of it and especially in the time a lot it but you could see where the complexity has really the operator ecosystem has really helped simplify a lot things and so that's I think the other piece of the puzzle is the other technologies kubernetes and maybe service mesh and service less and all of these other things start to come into play simplifying the complexity of where we are at even just in 2019 over the coming months will be really what I'm looking for to see hearing more about and where where people can contribute in the upstream if you're definitely if anyone's watching this and listening and you're interested in you know getting on board in the labs or getting your you know learning more about the best practices or getting certified for open shift calls the person to reach out to yeah maybe I put my email address for folks to yeah share your share your thank you slide there with that or your email address or anything all right and I will throw that yeah plan cast without the ER on the end of it at redhat.com and we will leave it at that for today and thank you and definitely have you back because um it isn't it's still pretty complex there there are some pieces of that um that it is for sure yeah yeah like the multis piece you know you had one slide and I'm like that's a day that's a day of talks I've sat in multis talks that's yeah there's plenty of information that's correct there's plenty more so if you're interested in this topic let us know if there's an aspect of this topic that you want to hear more about um reach out to me or to Paul and um we will definitely try and schedule a briefing on it um and at the very least find the resource to help you get your questions answered so Paul um thanks for today uh lovely view out your window back there um I'm liking that the empires day Billy I know you I know you're not really there but um I wish we could be so hopefully soon we'll be doing this in person so take care all and um we'll talk to you all soon thank you diana


Here's the reason why so many Christians get burnt out. It's because they're running on the wrong fuel. We're motivated by other people's expectations. We're motivated by the fear of not measuring up. We're motivated by the church's expectations. We're motivated by the shame that tells us that we'll never be whole. We evangelize, serve in Sunday school, do all the right Christian things. And yet we get burnt out because we're running on the wrong fuel. Our fuel needs to be love, not shame. Shame tells us that God will never accept us unless we work harder. Love tells us that God has already accepted us through His grace and what flows from that is joy and love and peace. When we step into joyful faithfulness that flows out of love, that is a sustaining fuel. This isn't a sprint, this is a marathon. Follow to grow daily as a disciple of Christ.