Building beautiful Blazor apps with Tailwind CSS - Lemon - NDC London 2022

i unfortunately have to tell you that we are uh uh at time and that means uh that it's time for a talk so i know that we're in day three i know that we're kind of like running down uh to the end uh i know that there's only been one bomb scare so far so you know like let's see if we can keep bringing that thing out and i know that we had some lunch we've got some other things going on i don't know how the energy is in this room so i do want to find out how the energy is in this room so hi ndc [Applause] that was actually pretty good that was actually that was actually pretty good okay so glad to meet you i have uh been uh at uh uh touring around to different ndc's uh first in porto uh now in london and uh so excited to be here my name is lemon and i make websites uh i've been making websites for around about 20 years or so sometimes i'm you know pretty damn good at it sometimes well there's there's some websites that i've made that i would not personally cop to but i've been making websites for a long time i still love it the the communication medium of the internet is so wonderful and exciting to me i love the fact that websites mean that you don't have to enter some sort of walled garden where some app store can say oh we don't like the way your icons are you don't have any right to tell me what i can do with my website if i want to make a bad website i get to make a bad website and the only thing that happens is well there's two things that happen either nobody sees my bad website or a bunch of people see my website um but uh but i've been making websites for uh quite a long time and uh and and i use a bunch of different technologies to do that exact thing um so i personally uh write a lot of my code in pug i don't know if any of you all have seen pug but as an html preprocessor very very similar to hamel um kind of looks a little python-esque with the indentation based thing um it's basically just html but faster and i've enjoyed pug very much i also really really like sas um i i adopted sas uh really early on um when uh doing the actual uh pre-compiling of it was a lot more of a process than it is now sas getting sas into a project is really really easy and again it's it's not that you're extending you're you're learning a new language it's that you're extending out a language that's already beautiful you're extending out css and i find that very exciting um i do also write a whole lot of view um i was looking at different you know those different frameworks the the react and the and the angular and the view vue was just the one that made the most sense to me so it's the one i kept going with but also i found some corporate clients that needed me to write some member well okay i'll figure that out we can write some member no problem there's also lots of situations where a client is going to just say well we have this.net project and we need you to write you know some c sharp okay awesome well they'll just write some c sharp plenty of times though you'll i'll end up writing a website where i have to be writing php uh because you know there's some sort of cms that's going to exist out there and that cms is almost invariably imbrocco exists other other things exist but almost invariably a cms is going to end up in being in php um i don't do it nearly as often as i used to but uh but i used to for a while to give myself sort of like little handholds to start with i use something called bourbon uh bourbon sass mix in that just sort of like gives you some sort of like very early footholds to uh to go with that it's a little bit deprecated now but i do still do reach for it i do sometimes reach for bourbon or beer or a gin but all of those whoa we just went right to the end but all of those uh those uh platforms except for the two that i just made up right in this moment uh boiled down to three essential facts three unbreakable facts of web development uh that you need to be uh cognizant of and those three facts are html javascript and css no matter what you're doing no matter what sort of like of like ruby micro service or or java monolith kind of thing as long as you're making a website no matter what it is you're going to be boiling that down to html javascript and css if you observated away that's cool but those languages will still exist and of course we're going to be talking about the css part of it because i think that no man that's not that's not that's not true at all i would never ever ever ever say out loud except for facetiously in this example uh that css is easy css is not easy um in uh in uh the words of dave rupert uh one of the co-hosts of uh of shop talk show he said he said css is is pretty easy the only thing you have to do is remember about 45 000 key value pairs and then you're good good to go uh css is not easy no but css is great it is an interesting dynamic language that is incredibly powerful and i think that that is what always excites me about it so uh you're probably familiar with this gif and i know that you've seen this gift before and and i've seen this gift plenty plenty plenty of times before people tweeted at me and i'm not saying i don't get it i do get it the entire point of this talk is that i do recognize these frustrations that put this thing to light because they are real you can tr you can get tripped up with a lot of css weirdness but what i'm going to try to do is change some mind so i want to start off here if i may uh and i wanted to just do an honest raise of hands this talk of course is called uh i'm gonna make you stop hating css and by a raise of hands i want to just see how many people genuinely would say that they hate css they hate it wow okay all right all right we've got okay that's fair that's fair i get again i get i got to get on sir i totally get it it is a valid thing to hate css but what i'm going to try to do is i'm just going to try to tell you some things that are more interesting about this and make it more graspable and make you think of it a little bit more like this because css is just a series of rules that when those rules are applied to the dom interesting things happen in succession so today's agenda uh we're gonna do a couple things here number one is uh we're gonna talk about things that are weird uh css is a spec that's existed for multiple decades uh and it is an additive spec it is not a spec that ever gets uh removed from uh every change that's made to css is an additive change so that means that things sometimes are weird we're gonna move into some things that are great because there are great things about csfs if there weren't then this would be a weird ass talk uh and then we're going to close out with some things that you can try now because if you want to sort of level up your css skills or just get a little bit more of a feeling uh of those things i've got some recommendations that i've personally used and have recommended to other people so with that said let's get weird uh this of course is uh the band uh focus uh singing a song called hocus pocus uh if you're wondering that's interesting a song called hocus pocus by the band focus i wonder what those lyrics look like those are the lyrics somebody wrote that down like that's not that's not google didn't do that google google would have tried to turn this into words they would have tried to make sense of it a human being went yo dey a dodo joe people have to know man people have to know i mean if you're not posting on the internet then really what are you doing with your life um one of those things that is weird is the concept of overflow and the concept of overflow is i think best is best to find uh by another image that i'm pretty sure you've seen in your life and that image is this i know maybe maybe you've seen this before maybe some of you owned this mug i've definitely seen this mug in person i do not own this mug uh even though people have tried to give it to me and this is totally totally reproducible in css in fact not only reproducible it's reproducible very easily so i'm just going to reproduce this thing in css so i'm going to say i want to make a box and my box is going to have a border of 0.1 em solid white if you're not familiar with the concept of ems you can do units that are sort of like rather than pixels uh or whatever you can do something that's relative to the actual m size uh by either em or ch and so you're saying i care about the font size in this measurement so therefore the font size changes uh you should change with it to the same stick we're gonna say that our uh the width of our box is going to be 4 am and our padding about 0.3 am um so that all taken care of and then we just got our html and there we go uh we made it um it is that is that is that graphic that you've seen before that is definitely the output of css so that's something that we have to fix now we have to fix that design okay cool well there's a couple ways to do that first of all we can say overflow hidden uh very simple concept of just you know you like i've got a box and my box is this big and if something's bigger than this box just kick it out it goes away hide that it's overflow hidden and we do that and then we get this which is i mean layout wise it's okay but it's definitely not pulling our message across like we're not actually getting our message across the css is awesome so i wonder if there's another way to do this so we're gonna try instead overflow y hidden so when we state uh concepts like overflow that have an x and y axis by saying that overflow y is hidden what we're saying is overflow x therefore isn't and so i'm going to say if overflow y is hidden which in this case it would be the y axis you can go ahead and scroll that or not it's totally up to you browser i'm gonna let you do this i'm just gonna change the value of overflow why and so in doing that we get this which like i mean okay so like that's well that okay i mean that's that kind of got our message across uh but i wouldn't say that we've fixed the problem we really haven't solved the design problem here so okay let's keep going word break break word word break break word is actually a property that exists in css and when i say to you css is weird this is what i mean you have to if you're going for this idea you have to type into your ide word break break word and by the way everybody involved in the css spec that wrote that went sorry we really should have called that something else that was a mistake but you know you can you can go ahead and live with that we do word break break word we're saying okay well you know usually you're going to just take uh any word and just like extend that thing out i want to break that rule now and you can just go ahead and just smash that word down together and then we get this and so like that's you know i mean like that's a kind of more of like a you know like a shopping mall like a like a upscale like shopping mall kind of stunning shirt and that's and that's something but again we still haven't fixed it we still haven't fixed our problem let's keep going let's keep going we've got uh text overflow ellipsis uh so i can say that you know this is something that actually ends up really really useful if you end up doing some sort of like uh sort of smooshed together like table or something where there's like way too much content uh you can say okay well uh go ahead and you know and let that text go but if it gets to the end i want you to just put an ellipsis at the end of that and let it go like that you can also like change that effect on hover so for example you can have like a table header text overflow ellipsis and you hover on it and then it shows you the actual thing uh totally possible in this case we've got css css let's go back to this rule so we started this thing out here we said we were going to have a border and that border was going to be white we said we'd have a padding that makes sense because we don't want our actual text to smash into our border um but what we had right here was a defined width of 4em we said that the box had to be this big and then we put objects that were too big inside of the box this in fact never was a css problem it is a design problem there is no conceivable way to hang out that design and still have it make sense your box is too small so we can just go ahead and remove that property and then we end up with this which i definitely still do think that it is i've got the idea for this from a blog post on css tricks uh so i'm going to talk about again in a little bit because i do always find it really really useful um another concept here is the concept of position uh which also can be a little bit confusing for sure so for example there's uh there's a couple of different uh position properties and uh if i so if i like throw a div on the screen if you're really good at css i'm gonna have to be quiet for just a moment here but if but if i throw just a just a regular old div on the screen and i don't give it any property what is the actual initial value of that div any guesses glenn you gotta guess okay glenn doesn't have a guess either relative is a great guess but totally the wrong guess thank you so much you stooge you walked in here and i immediately just called you out for having a wrong answer because that was a trick question uh the correct answer is that the initial value of a p of a div of an abbr of of sort of like uh almost any element i can think of is going to have a position of static a position of static is very close to position of relative but worse we're going to go through why here so for example we've got our relative position div and this is doing exactly what you think right we've got a box i gave a little bit of margin and then i'm going to go ahead and scroll that thing down and we we've got a box we've got a box on a grid that's very exciting uh now we've got an absolute positioned uh box now this absolute position is going to be positioned to its nearest restrictive element so for example if i have a uh an absolute positioned uh little uh circle here up in the corner and then i do an absolute positioned um uh star inside of that circle that's going to be its nearest restrictive element so if i do a top it's going to be 5 pixels at the top of of that holding container if it doesn't have a restrictive element it's just going to accept the body so it's going to stick itself to the body that's where the static thing comes in you move on and uh we've got position fixed uh position fixed is a situation where you're working at your job and everything's going okay and then and then some guy in marketing comes over to me and goes uh and goes hey um uh i got a question for you when people come to the site how do we do the thing where like the box comes up and it says please enter your email uh the correct answer that is don't you go that's impossible that's actually never been done before they must be using some sort of platform and we probably have to pay for it like that is emphatically evil and emphatically bad but if you need to do it and you lose that fight position fix is the thing position fix will never care about any bounding element it does not position fix does not care about the dom it doesn't care about the body it doesn't care about any containing element it only cares about the screen which means that if i go ahead and just scroll uh in the screen position fixed go ahead and stays there a little bit similar to this and something that for a long time people were doing with javascript is actually positioned sticky position sticky is very very cool because it is both a relative and a fixed element you can give a position's fixed position sticky element a a margin of top bottom left right you can also give it an absolute of top bottom left right and it will toggle between these things so in the case of my position sticky right here i've got it uh margin from the top i've got a margin from the left and it's gonna work basically like in a relative element except for when that hits the top it's just gonna stay there now again this is the kind of thing that people have been doing a lot of complicated javascript to get uh to wrap that thing around and that was necessary for quite a while but in the last uh i would say four years now position sticky exists and can stack on top of itself you can do position sticky inside of position sticky elements so that they can carry their own relative inheritance and it works very very good and then finally we've got position static which is the same thing that we saw in the beginning right so if we look at all five of these things together we can see that these things operate slightly differently except for our static and our relative element uh state stay together with each other so if we look at uh if we look at those things uh this is what these all look like our relative is going to follow the page flow and provide a restrictive parent and our static is going to be the same as above it's just going to be less helpful so then you're looking at that and you're going well okay with all of that said well what's the difference we've got in the case of a relatively static element i don't know if you've ever had this problem but you'll you'll be laying out something and you and you've got these little boxes and then you want this box to be on top of this box and this box is behind this box and you go okay well uh z index nine and it's like no and you're like okay cool z index nine nine nine no z index nine nine nine nine nine god damn it what is winning here when you're doing that the thing is is that is that your static element is going to ignore this value so you can you can play with that z index all you want it's just not going to do it your top bottom left right also it won't care you give it those elements and the and the position static does not care about those things it also will not hold an absolute it will not if it's got an absolute container inside of it it'll let that absolute container bound out so why does it exist well because we were talking about in the very beginning uh css is an additive spec as long as that continues to be the case it does continue to be the case um so one thing that happened for example uh many many years ago as a lot of people did these uh css resets where for example uh you would do like uh asterisk uh border box and then that means that if if a box has a width of 300 i mean the box is a width of 300 i don't give a about padding i don't give a about border i want the box itself to be a width of 300. and you can do that and make things a little bit more sane so you also could do for example this and say well okay we're going to start out things and before anything goes i want you to just put everything as position relative and you can do this the only issue that you might run into is that if you are working with other people's code which we all tend to do from time to time you might run into a situation with that containing element because if you're looking at code where there was supposed to be a static element and an absolute element isn't supposed to be inside of it and bust out that's going to break so i would say before trying this which totally again is a valid approach there's one of those things where it's like oh you know it's technically a performance hit as long as you have like 45 kajillion divs on the screen okay cool but like if you want to do this uh you totally can uh but you but what might be a little bit better is if you're struggling with something if you're struggling with the margin if you're struggling with the z index just add position relative and so many times it's going to fix that problem i wrote a codepen article on that uh if you want to read more uh and see some actual code examples behind this thing but i want to move on to a third and hopefully most important thing that is weird which is float when i look at float i don't actually see it like that that's not what float looks like to me what float looks to me is like this now float was a property that was made many many many years ago uh sort of when you know the idea of uh e magazines were a thing uh and it was really made for one thing the entire uh concept of float was if we've got a picture and we want to wrap some texture on the picture that's what a float is so we can do that exact thing right so i'm going to lay out some a semantic article i'm going to give this thing an image and i'm going to say okay i want you to get a float left over there i'm going to have a source and i'm going to do some paragraphs and if i do just that simple bit of markup with our float left then it's fine that's what we want right we've got our picture uh of tina uh we've got uh something that a friend of mine created called tina ipsum which is just randomly generated quotes from tina belcher of bob's burgers and that text floats around that everything looks great this is a viable web page but we can take that exact same thing and by only messing with the contents we can make something terrible happen which is this so this is the exact same thing except for instead of our three paragraphs we now just have one paragraph so that's not great like that seems like a strange thing and the reason why this is happening is that you you you have a floated element then you've got this first paragraph and the first paragraph says okay well i want to take care of that floated element and i'm just going to loop around here and then it's done and then your container element goes well i'm done too and it's like awesome we were floating right here just go ahead and close that thing out and this will happen so frequently with floats this is such a straight like a a um endemic problem to two floats there is a fix there is a fix and if you're doing anything in uh somebody else's code base especially something that is float based uh this code actually exists somewhere in there so if you don't know uh every element can have a pseudo element actually two different pseudo elements both a before and and after so i can say i can make a div and then i can make an after element and i can say okay so i've got this container and it might contain a float and so i'm a little worried about that so i want you to create a uh a a after element i have to give it some content but we're not going to give it really any content we're going to say that it's got a display table and we're going to clear both the left and the right side and by doing just that hack and it is totally a hack uh we've actually got this thing fixed just with that line of code which is nice except for like why does this work and why this works ends up getting sort of philosophical because we've got now a situation where here is our article and this is our after element so our image starts here we've got a paragraph here and then our after element which is something that we just can't uh put in to say we want to make a clear fix because there might be a float over here we're going to say here's a table that exists in theory please don't bother to render it there's nothing to think about with this table but this table should have both a clear a clear left and a clear right and by doing that we can actually fix this specific layout problem and make essentially a float layout so to that end i mean let's just make a layout with floats like we did it right we we put three lines of code in we can just fix our layout problems forever and so all we need to do is we just need to create a web page like twitter did this that's what bootstrap was bootstrap was a completely float based layout there was so many uh frameworks that were exactly float based layouts we can do that as well and so what we need to do is we just need to make a web page and a web page is of course uh pictures of william reicher with quotes from william riker so there we go we've made our web page we can cause a diplomatic crisis but he's pretty happy about that he doesn't know if someone could survive inside a transfer buffer for 75 years uh but uh my favorite of this always was wharf it's better than music it's jazz so this is what we're trying to do we're trying to make a layout with pictures of william riker quotes from earlier riker and we want to do this with floats and so now that we've got our clear fix we're in pretty good shape i mean there's some code involved in this we're going to say that every uh every riker is going to float to the left it's going to have a width that is calculated now some people don't know that this exists inside of css but it does that it's very very robust you can you can tell the browser to do math and the browser will do it like you can give it a calculation and the computer will go like yeah okay i think i got that so uh even i.e even ie will actually calculate things correctly almost all of the time um so we're going to say that every riker has a width of 33 percent of the screen uh we're going to we're going to subtract 30 pixels from that because we want to give a margin and a left to each riker so that there's a nice little gap between them and that looks i mean fine so now we can just go on to oh okay well that layout is no good that layout stinks um and this is one of those reasons why if you've used uh one of those frameworks like uh bootstrap no longer does this they changed some of that although actually they keep a lot of that html structure anyway but one of the reasons why if you're ever looking through that bootstrap code and you're wondering why there's so many container elements or if you've ever given yourself the pleasure of doing inspect element on any facebook page there's a thing that can actually visualize like how deep in the dom you are and like and like every div is like layered in like 45 deep twitter twitter especially tweetdeck we'll layer things like literally 80 deep to actually get to your tweet it's insane but one of the reasons why that's happening is that we basically just have to create a bunch of container rules because we're like well we want to be very explicit about what this content should look like which is not what css should do css should take arbitrary content hopefully crumbly written arbitrary content and fix it so there is hope here and that hope actually has two forms and one of those forms is a css grid uh css grid is such an impressive powerful tool uh that was added to the css uh css spec uh three three no no no no no uh it was out of the css spec a number of years ago and it is a tool for actually making a grid and it works incredibly well incredibly deftly and very very succinctly so we're going to make our riker layout again but we're going to start over so we're just going to say that we've got a container element and then our container element we're going to say here's all my rikers and we've got a display of grid we're going to make some columns i'll get to those in just a moment and then i'm going to put a gap in there so that was step one and then step two is uh we're done actually we're totally we've finished our entire layout um when i was actually doing the example of what i wanted this layout to look like so that other people could see like the thing that we were trying to make i did that in grid because this layout is in grid and is 288 bytes all told that's that's pretty amazing so there's a bunch of ways that you can uh express your grid uh and we're going to talk about the columns so so our columns that are that are expressed in grid can be done one of a couple ways and we've got uh like a multiple of different writing uh frs and fr is a fraction we're going to get to that in just a moment uh we can write the same thing but just in a little bit of a shorthand uh we can kind of mix different units of measurement and create a grid that way we can repeat an element and say you know go ahead and create columns as deep as you like with this particular width and we can also even give min min max values to that so i want to go through each of those and uh and this is going to be talking about a very important uh piece of uh of uh content that came in the in this in the grid spec and that is the idea of a fraction so a fraction says um that there's a number of space that you've got you can do rows you can do columns you can do whatever and you say hey browser uh you've got i don't know maybe 860 pixels i'm not going to get real specific about it i just want one fraction of that i want two fractions of that i want three fractions of that and so you can just take and mix and match these things and that fraction is really just meaning whatever's left so to explain that i actually would like to bring you the recipe of my gin and tonic now i'm not a fancy person by any stretch of the imagination i just like to drink um and i do like to drink gin and so when i make a gin and tonic basically i'll use four ice cubes because i like it nice and cold i'll do a jig or a gin uh i'll do a lime wheel and then i'm just gonna use tonic water like however much i've got like is this one of these little glasses is this one of these big glasses i'm not really sure i'm just going to use an amount of tonic water and in order to do that when i've got these different measurements i can still make that same gin and tonic no matter what kind of uh what kind of glass i have so so let's look at some examples of our grid here so we're going to start off with a grid template columns of 1fr1fr we're just saying i want you to make a grid i want each of those columns to just be one fraction of whatever you've got and we've got this i mean yay but like let's not really throw a party for that specific layout it's fine it's fine it's fine um but now let's say that we're going to take this thing and basically shorthand it so we can just go like repeat 4 1fr and now we can make uh this thing um so this is something where for example if you're looking for any sort of like css framework which specifically is giving you a grid structure like this is the thing that you can use to supersede all of that if i want the idea of a four column layout i can just go columns equals four uh repeat four columns equals five repeat five columns equal six repeat six like i can just make that thing short handed without any other framework involved but now we've got the idea of actually mixing uh our column so if we've got we're going to start off with a 200 pixel column then two additional fractions and then by doing that and just giving it these html elements uh that's going to give it this so now we've got the idea of something where we could say you know we've got maybe a sidebar we've got a header we've got like different kind of content sections and we and we want to specify like where these things are going neat but now let's take this so in this case i'm going to say that i got a grid template columns and i want that to repeat 240 pixels so i'm going to say hey browser i don't really know how big you are at this point and i'm not really that keen to ask what i want to tell you is that i want you to take this space and fill it up with a bunch of 240 pixel columns as many as you like and then wrap that thing around and if i tell that to the browser the browser go like okay well there you go uh you've got you wanted 240 pixels there's 240 pixels and we're just gonna do this now i could be doing this and resize this thing and i don't have to rewrite break points to be doing that because it's just going to know this guy wants 240 pixels just keep slamming those things out which is all right except for you're looking at the end of that thing and you're going well that's not bad except for the thing that you've you've got this weird old gap here so maybe you could do something about that yeah we can do something about that we're going to rewrite that spec in just one line of code and say okay i want you to instead repeat auto fill min max 250 pixels to 1fr so in that case what we're saying is hey browser i want you to uh fill this whole thing up i gotta i got a box and i need you to just start making columns and what i know is that i do not want this to be less than 250 pixels but if it has to be bigger you know go ahead and just take that fraction of whatever and so by doing that we'll get uh this layout now there's an important thing about this layout is that if you wrote this in a bunch of different ways it would like require some real break points to take care of this because you would say well okay so if it's on you know if it's on this width we're going to have like six columns across if it's on this width we're going to have five columns across but just by doing that line and letting the browser figure out how big each of those boxes could be we can just make a fully responsive layout literally with that one line of code that's a responsive layout right there by itself but we can get even fancier than that yes yes indeed we can and one of those ways that we can do that is by uh starting to rewrite some of these rules as far as specific uh child elements so we're starting off with a grid that we saw before which is uh just a simple four column uh grid repeated but then we're going to say i'm sort of in a rum move right now so i want to see some rum drinks so we're going to highlight that that mojito that daiquiri that pina colada and then we're going to say to those ones i actually want you to span two columns and i want you to span two rows and in so doing we can we can take our regular layout that is single stacked layout and we can give it that and end up with this now these things do not have different containers each and every one of these is a sibling of itself but we've said to specific classes you're allowed to span two containers or you're allowed to spam two columns you're allowed to span two rows you can also say to that thing well i actually want you to take and eat up the third column so if if there's a third column in there just go ahead and take that and we can just specify that in all the children um we can get even slightly fancier though because i'm going to give you uh just this piece of html now you can kind of imagine what this sort of looks like but we've got a bunch of different drinks and in each of those drinks we've got our pina colada our screwdriver a mojito or whatever and then we've also specified what those glasses are and so there's a bunch of different glasses that are used by you know bartenders not myself but you know there's a bunch of different glasses that can be used for different drinks and now i want to just rearrange these glasses and if i wanted to rearrange these glasses i'd have to write a bunch of different queries i'd have to write a bunch of different um you know like like php for this or something or i could just actually start to use order so we've got this here this is what our glassware looks like but now i'm going to say okay well everything that's in a collins glass that goes first everything that's in a martini glass that goes second everything is on a tulip glass that's going to go third everything that's in a margarita glass that goes forth by saying taking that exact same markup and changing only those values we can actually go ahead and just rearrange everything by the actual glass that is put into when you're doing this for like like magazine layouts or something like that and you've got a situation where like the ad is supposed to go over here except for like if it goes down into a phone it goes over here and you have to write a whole bunch of wackadoo queries for that you can do that by just having a container and then just setting that order on different breakpoints changing that order around however you feel like it or even you've got a situation where somebody else wrote the html and you can't touch the html so now you've got something that's over i'm floated on the left side but actually i need it to be down here you give that thing a grid and then you just say well now i want to change the order of these things and you can just change the order of things right there in the css by itself oh okay all right well you know in any front-end talk like this kind of thing is going to come up and the thing is is that this actually isn't as bad as you might think that it is now of course the usual caveat of like of like at this point if you're using like win 10 win 11 like win 11 doesn't even have it in there and then win 10 is like uh don't use this please like actually don't use this browser it was edge which is fine just totally fine um but this but this story is actually pretty good so if we look at uh the actual grid support uh we've got a incredible adoption like all the way across and even getting into the 10 and 11 all we need for that specific thing is we need prefixes so so and if we actually look at the um the market share base of of all of those things then we see first of all we see a lot of green and secondly so much chrome like like looking at the amount of crop like you know i'm i'm always into there's so many great people like that are on the chrome team and there's so much great innovation that that google made with chrome but whenever any browser has this much of a market share it's a little concerning also just over into the uh safari on ios um has uh has anyone ever has anyone in this room ever used like for example like firefox on safari no you haven't this is a fun thing that's actually in the apple terms of services you can go ahead and go to the app store and you can download something that's called brave and you can download something that's called chrome and you can download something that's called firefox or vivaldi or opera whatever you like you can do all of those things but that actual safari renderer is baked in legally they will not let any other browser happen and so i've had situations of trying to debug something and like i thought this was only i thought this was only a safari issue it is but safari is actually just wearing other clothes a lot of the time kind of like bugs bunny actually um so the takeaways here is that uh ie 10 and 11 as uh it has some support uh you can definitely do grid stuff uh in ie 1011 but you're gonna probably want to do some vendor prefix and some text into that because they had an earlier version of the spec if you're an ie9 yeah then that's a problem but the other thing that's also in there is the concept of flex now flex has a little bit better support because it is a slightly older spec but flex is one of those things that actually sort of got missed because css came on or css grid came on this on the stage and did so many impressive things so fast that it got a whole bunch of hoopla and people went oh there was this grid thing but we don't really care about that but but flex is actually still very cool so even though i've talked about css grid and even though i would definitely encourage everybody to try to just uh bang out a little grid in css grid i do actually want to bring to your attention flex as well so um if we do our riker layout uh and we just want to do that same thing in flex then really all we have to do is we're going to define uh with a little bit more code we're going to just define the concept of our rikers and we're going to say okay so i've got these rikers and i want that those rikers to wrap because by default the concept of flex doesn't want to wrap unless you tell it that it should wrap and then the justify content is going to be spaced between so you can say um you know you're going to have this container element there's going to be stuff in there and there might be space in the middle and you can say to flex well you know you can do different things with that you can go ahead and you can center everything you can do space between you can do space around so there's a gap in the middle but there's also a gap around it you can stretch stuff inside of it um and then for each riker we're gonna go back to our calc uh of uh of our width uh but you'll notice that i didn't actually use the property of width here i use the property of flex basis and the reason why was that flex invented this concept of you know ish and so if you're doing a flex container and you're doing flex elements inside of it you can actually say well okay so i've got this thing and i want it to basically have a basis of you know 300 pixels or whatever but i have i have opinions about whether this thing gets to grow or shrink now you're looking at a zero and a one here but this in this case this does not need to be a binary value you can actually say flex shrink five which means if i've got a bunch of things and something needs to needs to shrink that that one of the higher value of the flex shrink gets to shrink first but we can say i have a basis and that's basically what i want you to do but if things start to get hairy because you know a lot of times we you know we still think about this concept of like of like there's desktop and then there's mobile and that's fine but like there's so much in the middle you know that like that dealing with just those concepts of just desktop and mobile means that there's going to be so much squishy area in the middle which is real to everyone's experience because they're going to have honestly different devices but also just different layouts and if you're just doing a hard transition from like well here's a whole bunch of boxes and all of these boxes are all like spread out but then you get to mobile and it's just bam it's just a whole bunch of of blocks down the line like i get that basis and i definitely get that like that's how that design seems to come around but you can actually do stuff where you can say okay well i want you to take this design and i want you to do it just until the point that it seems that it might break and then when it gets to the point that it might break we're going to do some flexibility there in the middle flex can be used with or instead of css grid i would say if you're going to do a layout and you want to do sort of a grid based layout you should use grid if you want to do something that seems like it needs to be flexible you should use flex and you should possibly use those together because a grid can go or a flex can go in columns or in rows you can use these things next to each other work as perfect siblings um we've got uh wait what that was oh yeah yeah um i want to give you an another option here of of a layout uh with uh with our flex and that is just pictures of bjork um and so if i say okay i'm gonna here i'm gonna have this uh this flex container i'm gonna have a uh a flex i want that thing to wrap around and i'm gonna do some space between then in that case we've got uh this uh this gallery of bjork which crucially contains a whole bunch of inequal content and so we can actually um say well okay i want you to respect the actual dimensions of whatever those might be but for that space in the middle you know you're a browser go ahead and figure it out something you couldn't do really in any other layout you could not do that in any other layout without a whole bunch of very specific kind of container elements um vertical centering with flex uh i hope that you've never or i hope that you never have had a situation where somebody has said well i can't really center that because yes you can you can always center that you've all the front-end developers have been able to do vertical centering for literally 10 years in the case of flex display flex align item center justify content center yes of course you can always always always vertically center things this is uh a concept that um i i run into every once in a while and it makes me genuinely like a little annoyed because because we're all trying to be better developers we're all like at something like ndc to try to learn and to try to like and to try to like level up our own experiences and then somebody comes around with some sort of click bait like here's nine css and js libraries you should learn this year no man play with your kids like like watch a movie i'm gonna learn nine different css and js libraries this year because that's necessary for my career absolutely not if you are somebody that's doing css and javascript and you are and that's working for you and you're enjoying that experience cool that is not my choice but if that's the way that you want to run things that's okay but to everyone else i would say there's a thing called the cascade that ends up being really really important here so the cascade uh has been explained in a whole bunch of ways but it is of course that first c in css and the cascade i would describe as thus so the cascade is individual rules calculated in order of increasing specificity with ids getting extreme priority only beat by inline styles and important being the nuclear option so that means that i've got rules uh all of css is just a series of rules and sometimes those rules overwrite each other but but regardless we're just going to have rules stacked on top of each other those are going to be calculated in order which means that if we've got one rule and another rule comes later and those rules disagree the one that happened later all things being equal that's going to win but specificity also matters so for example if i say that a paragraph should be black but then i say that a paragraph inside of an article like article space p should be read uh then that's gonna win because that was more specific but even more specific than that is the concept of an id because you can you can write css based on classes or sometimes you can do it on attributes if you feel like it but if you do it on ids which is totally which is totally valid it will totally blow things up if if one if one css class has a score of one an id is a score of a hundred so if something is getting a style and and you're trying to figure out how to beat that style out if it's an id it's gonna probably start to win you can beat it of course by inline styles which is what the uh which is what the css and js approach is also technically what well no never mind never mind never mind there was a talk in here about tailwind and i do like tailwind and so i shouldn't throw shade but it is inline styles um and and finally important is the nuclear option if you're into a situation where where um where you have to do it you're you're coming up on a deadline and things are going bad and you just need to get this god damn button done then you just can use important now everyone would frown on that but what i would say to you is that if you're in that situation i want you to make a file that's actually called shame in my uh css architecture i have you know there's there's abstracts there's base there's layouts there's sections there's components and then i have a file called shame and things happen so i end up writing files that go into shame but when we go to production i'll say okay just so you know i have nine rules in here and we should probably take care of them so i'm going to actually skip past that because i am starting to run over because our next talk is happening real soon but if we've got this specific thing with these rules these rules are going to conflict and we're going to end up with this now one of the things that's really really helpful is when i'm working on css especially other people's css junior developers that i'm working with what i like to do is just always have that inspector open because if you've got that inspector open you can just look at any specific uh any specific piece of content and you can look at that right there and say oh well okay so that green is crossed out and the orange is winning and you can kind of like grok that cascade just based on uh the actual um uh inspector right there uh a couple things i want to leave you with uh number one is a really uh uh really effective uh game for css selectors called css diner this is a game by fluke out and essentially what you have is uh you're just trying to make a selection so for example i want to select the apple on the plate and so i can see that there is there's an element called plate and there's a element called apple i'm going to go plate apple and there we go i'm going to select the pickle on the fancy plate so now i've got a plate and that's got an id of fancy and that's got a pickle on it and i'm going to do that this is i think a really helpful way to kind of like recognize that specificity um there's only you know like i think it mentions up there yeah there's 32 levels and it is actually a really useful tool just to just to really hone in your selectors and figure out what those selectors should look like another one i want to give you is uh it's called flexbox froggy and so this is a game where uh by thomas park and we're just trying to put the frogs actually on the lily pads so we've got our layout here and we want to go uh justify content space around oops space between oh no center um so we've got a situation where we can just kind of like play with these properties usually there's going to be kind of tool tips at the top going like here's kind of where i'm trying to lead you down and we're just going to use these uh use these skills to try to like just get all of our uh our frogs on the lily pads really really cool for helping out uh and learning some more about flexbox uh similarly uh another one called grid garden uh by the exact same guy a very similar concept you're gonna have a bunch of different vegetables uh and you control the water so you're just trying to make uh a grid layout of water that's gonna touch all of the vegetables and only all of the vegetables codepen uh is a site that's been going around for a long time it is not specifically a a css site it's kind of an everything site there is uh you know the after code sandbox came around codepen kind of like extended out their things so they do like view applets and stuff like that uh but it was started by chris coyer of css tricks so it is a very uh css friendly thing um but you can for example just look at and and i've got so i just have a search here on css only which is just something that i look at and you know a lot of uh uh front-end design or front-end developers compete of just figuring out how to do really really insane stuff without css or with without any javascript whatsoever um sometimes there's a thing with like with like checkbox hacks or whatever um but it does create a whole bunch of uh very very cool approaches i think i saw one over here i mean it's neat there's a lot of really neat things that you can do with only css and without having to get um really complicated with your stack um finally uh is a game that i'm personally obsessed with uh it's fantastic it's called css battle and css battle is as uh you have to draw exactly the picture that's on the screen so for example some of the live battles right here we've got uh we've got we have to make the skull but you have to do this with code golf which means that you have to solve the drawing getting a hundred percent match on the drawing itself but using as few key strokes as possible so it's not only a a lesson in css it's also a lesson in how amazingly fault tolerant both html or css is like the amount of broken ass that you can write and the browser will go like uh i'll try to figure it out is incredible uh css battle is such a cool look into just how bad you can write your html and still have it render so we started off like this and i and i saw some hands and i'm hoping that by the end of it that we've thought about this language we've thought about the powers of this language we've thought about a language that is useful and cool and impressive and beautiful because i think that css is an incredibly beautiful language uh that i would encourage all of us to just be spending a little bit more time in so that's uh the end of my talk uh my name is lemon and thank you so very much one last thing i wanted to mention is i know that as developers we do love stickers and god knows that i do love stickers so if you'd like yourself a lemon sticker i'm just going to spread these all out here you go ahead and take as many as you like i am available for any conversation you want to have css breakdancing or otherwise thanks again enjoy the rest of the conference

Channel: NDC Conferences

Views: 3,636

Keywords: Lemon, .NET, CSS, Blazor, Fun, UI, Web, NDC, Conferences, Live, London, 2022

Id: dbJaijxPli4

Length: 57min 12sec (3432 seconds)

Published: Mon Aug 01 2022