Ask an Expert: How to love CSS with Josh Comeau

well hey amazing we are here on another wednesday yes and i'm joined today by josh como who hello an amazing course all about css which i'm looking forward to talking about josh thank you so much for joining us today oh it's my pleasure thank you for having me this is super exciting yeah definitely i'm a big fan of css as many people know but many people hate it and um you clearly like it um and you've made this course to try and change people's minds i guess is that right yeah i i like css quite a lot but it wasn't always so uh i think you know like so many in the javascript community um i started programming with python i mean i started doing web stuff before as well um but when i started learning python it all just like there was such uh everything that you needed was right in front of you if you do something wrong you get an error message and just by using the language you develop this really solid skill with it and the same thing is true with javascript what i noticed with css is that even though i mean i started i think i built my first website in 2006 2007 something like that so i've been using css for like well over a decade at this point um and it wasn't uh until maybe like three or four years ago uh that i had any sort of comfort with it like it always felt like at any moment this whole house of cards could collapse from under me you know you're going along and things are working and then you try to add as that index to something and suddenly you are now like stuck in this quagmire of just like throwing random properties and trying to get your way out of it um and i feel like it's such a common experience you know if you spend as much time as i do on twitter you will see this kind of constant drum beat of like css is so shitty your css is so hard there's all this like frustration with it um and so yeah that's that's kind of the uh the reason i wanted to do this uh and you know i had a bunch of different ideas too for different courses but i wanted to focus on the thing that i thought would have the biggest impact and certainly from what i could see um helping developers feel comfortable with css was the the highest impact thing i could have um yeah i i just add on to this a little bit um i think the reason that it is there is this kind of gap right why some people and i know this isn't true for everybody so i want to make sure that i'm speaking like very specifically to people that i've seen in this kind of community um why people feel so much more like solid with javascript is really just and i mentioned this a little bit earlier uh there's like an intuition that you get from using it that builds up pretty quickly just from like dealing with error messages uh whereas with css you can use the properties for years and years and years and just never stumble onto some of the deeper mechanisms that govern how these properties work i like to say that uh the properties that we write that's not actually like the language like those are inputs to the language right it's like we're calling functions in css and passing it these parameters without really understanding what css is doing with those parameters so that when i add position absolute or overflow scroll right i have a general sense of what it's going to do but i don't actually in general developers don't know what those algorithms actually do with these properties and this can lead to that feeling of things being inconsistent or unpredictable where it works sometimes but not other times and it's like you do this you write the same css you've written 10 times before except now it's not working almost always that's because there is some internal mechanism that is depending on some other variable that isn't something that you've written or at least not in this same rule but is kind of throwing a wrench into the gears that is interesting actually it never really occurred to me before that css doesn't have error messages like javascript okay sometimes the error messages are kind of cryptic but at least it's given some idea of what's wrong and you can google it but with css it it just acts like everything's fine and then it either doesn't work at all it doesn't make any kind of visible difference or it does something totally bizarre but as we say that's because you don't really understand what the property itself is doing or perhaps how it's um interacting with other properties so yeah very very interesting point looking forward to hearing a bit more about this css odyssey shortly but first people are leaving tigers in the chat well that's not actually not one that one's one yes and the reason for that if anyone is wondering is because we do a thing here where if you're new i ask you to put a bunny rabbit in the chat and if you've been before to put a tiger there's no use for this it's just something of a tradition that has started so hit me with those bunnies and tigers yes and thank you all for coming along brilliant so we've touched a bit on um kind of what makes javascript easier than css ie it tells you what the problem is what do you think it is about css that people struggle with other than the kind of lack of feedback and how can they overcome these problems do you think yeah i mean i think i jumped the gun a little bit and launched into that uh essentially that's that's in my experience that's really what it is is just not really understanding you know like i like to say that css is actually like five or six different languages that are all but kind of bundled together and those languages are the layout algorithm so you have flexbox and grid and positioned layout and flow layout you have all these different kind of sets of rules that govern what actually winds up on the page um and even i think that framing is something that i only stumbled upon recently which is that like the different algorithms right so flexbox or positioned layout they do different things with different properties which is why like uh left zero will do something in position layout but it doesn't do anything in flow layout right you can add that to a div and witness no visible effect and the reason for that is that the flow layout isn't using that property right the algorithm doesn't do anything with it um so that whole like just that way of thinking about it is pretty uncommon and i think it's just because like that's not like people often focus on the properties um and if you focus on the properties you kind of miss out on that deeper that kind of broader sense of what these properties are doing um in terms of how people can overcome it uh i can tell you what i did which is a couple years ago i was sick of not understanding how this all worked like so as i made like a conscious choice where whenever i ran into one of these situations where the property wasn't doing what i expected uh the old way that i would solve that problem is i would uh essentially just experiment right try random properties or google like position absolute getting the thing in the viewport and just kind of copy paste whatever snippets i found from stack overflow and the moment i got the result i wanted i would move on with my life and forget all about this problem until the next time it happens sure it's very familiar to everyone watching that approach yeah no i mean it's natural and to be clear this is something i do with javascript as well like this isn't really specific to css um but yeah i made the kind of conscious conscious decision that what i was going to do from now on was like sit with a problem for a while and see if i could understand a bit more about the language and that takes a couple different forms one form is just by experimenting and not so much experimenting to try to get the solution experimenting to try to understand why the solution works so like try changing other properties try removing properties try to like you know like if you have uh if you have like a puzzle in front of you and you have a single piece like try to find the connecting pieces and build up kind of a sense of what this model is doing um another way is just by going to mdn so like mdn docs are fantastic they have all this information on every property and you can go into a rabbit hole in the same way you can go on like a wikipedia rabbit hole i'm just going deeper and deeper in following links um and if you follow links for enough time you will eventually hit what i call like the core of the earth like the css specification which is a set of documents that are primarily intended i think for browser vendors right so if i'm working at crow at microsoft or google i can essentially use this information to try and build the browser engine uh but that's not all there like they are generally intended to be used by developers as well i learned this recently um and they're surprisingly accessible and i want to be careful that like they are still very dense and technical so they're not like an easy sunday read but i had expected that the specification would be like nigh impossible to get through as someone that isn't a browser vendor and what i discovered is like i went through the flexbox specification in full when i was building my course um it's surprisingly readable like you can actually go through and learn quite a few things about how these different algorithms work um so yeah that's that's what that was kind of what my journey was was over the course of a couple years taking this approach so that whenever i hit something that didn't make sense i wouldn't just kind of do whatever i could to solve the problem and then move on to other things i would take the time to try to figure out why isn't this doing what i expected and how can i improve my mental model so that from now on i'm never going to have this problem again because i will understand why it's doing the thing that it's doing and this incidentally kind of takes us around to my feelings with css uh because it's true that like for a long time i didn't enjoy css and it was because of this thing right this this constant sword of damocles hanging over your head that at any second could just ruin your afternoon by sending you into a css rabbit hole but i find that i don't really have that problem anymore which is i mean to be clear i still do get stuck on things in css i don't want to make it seem like i have all the answers immediately but i have a robust enough mental model but i can pretty quickly figure out what's wrong and honestly i get excited when that happens now because it's like an opportunity to fill in another puzzle piece on this now quite large puzzle that i've been assembling that's really good way of looking at it and are you able to identify um what knowledge was missing before that you later found from reading the docs and stuff that was causing this kind of issue was it to do with how properties were interacting with each other or was it something else or was it a whole range of things i would say that uh and i've heard this from a couple people that have gone through my course now which is it's like the nicest thing anyone can say which is people have realized the connections between things that they thought were different or like they've like essentially you've had these like aha moments of like oh that's how that works and this is why i've been so confused about this the most recent example i can think of because i only had this moment like a couple months ago was um overflow scroll and overflow auto right so this is a property you can use so essentially if you want something instead of like spilling out of the box you can add a little scroll bar so that you can scroll to see that um one of the common kind of stumbling blocks for people with css is if you set let's say overflow y scroll so you want to say that like if it spills out the bottom you're going to get a vertical scroll bar you'll notice now that you can't that the normal behavior is gone from the x-axis so before if something was spilling over in the opposite axis it would just overflow normally when you set overflow y scroll or auto or hidden or anything you have now truncated anything coming out of that box from any direction and this was one of those things that's like oh well that's weird um and a long time ago i just learned that's the way it is and that's too bad what i learned recently is that when you set overflow to a container you create what's called a scroll container and this is one of those like mystical mechanisms that are in the specification but you would never learn just from using the language essentially a scroll container has this contract that like it is going to form a box and it's like a little window into a different world so that if something spills outside that box you can scroll um this concept only exists as like an entire box right so you can't say i want it to be a scroll container in the y-axis but not a scroll container in the x-axis it's just this contract that when you add any sort of overflow property other than like the default of visible to either access you create the scroll container and related to this this is another one of those little connections which is kind of cool overflow hidden is a scroll container without the scroll bars so the only difference between overflow scroll and overflow hidden is overflow hidden doesn't let you scroll but it's the exact same mechanism right it's the exact same behavior and the algorithm works the same way we've just opted to hide the scroll bars and any other kind of ancillary ability to scroll well that is interesting because i had a problem recently where i put overflow x or y i don't remember which one but it seemed to be doing something odd to the other one i didn't really understand why so now i will look into what you've just told us hopefully we'll get to the bottom of it yes didn't know that says michael well there you go michael i'll also share one other little just bit of sorry i didn't mean to interrupt um a similar thing i realized because often what happens with this is you want to have like a tool tip right you want to have something that happens to spill over and you realize oh shoot i can't because i've added overflow y scroll and now my tooltip doesn't work um if you learn about containing blocks which is another one of these little internal mechanisms you can actually bypass this behavior because a scroll container contains the elements that it contains for lack of a better word like essentially for something to be in this scroll container it has to be contained by it but you can change which element contains another by using position absolute and being very careful about where you don't use position relative um this is honestly like i'm realizing now this is kind of a complicated thing to explain but uh more than teaching this one particular aspect i kind of want to make the point that you start making these connections and rather than just finding the trick or the hack that works now your mental model can prepare you for these situations and you just you don't even have to do any problem solving because you just you know that this behavior works this way and you can kind of slot in the solution uh that comes to mind yeah i think that's it when people are learning to code they might be intimidated by the amount of stuff they have to learn but really what you're learning is how to tackle something it sounds a lot like you're explaining how to tackle css as it were so yeah perfect yeah some questions from the chat moomin asks i'm kind of facing a problem of forgetting css when i moved on to javascript do you have any solution for that yeah i think that this i've heard similar things i used to teach at a bootcamp and at the bootcamp that i taught at we would have week one would be html css and then weeks two through twelve were javascript you know i i do think that uh and this is another reason that i wanted to make the course is that often uh developers are just taught we spent so little time on html css that it's no wonder that people struggle with it that's true but yeah i think that it's it's common in situations like that where you know if you if you're spending so much time on javascript even the question right when i move to javascript implies that you've moved away from css um i think that it's worthwhile to make sure that you're always doing a little bit of both so like when i'm i'm granted depending on the project this doesn't always happen but in general i try to mix them together as i'm working right so it's not so much that i'm going to spend a day or two on all the logic and behavior and application logic and all that stuff and then i'm going to focus exclusively on the styles i try to kind of piece it together as i go which i think is a helpful way in general to build something because you don't get too far down one road before realizing oh actually i've done this in the entirely the wrong way because i haven't thought about how this was going to be presented to the person um so i think that's maybe part of it um in terms of like uh forgetting css when moving to javascript i think part of it is there's like a certain amount of that's inevitable and hopefully just with experience um you know it definitely takes a couple tries for me to learn something i can learn something the first time uh and then move on something else and forget it and when i come back i have to learn it again but hopefully the second time i learn it is a little bit faster because i have glimpses of recollection um so as long as you know as long as you feel like you're still moving forward in general i think it's fine if you're if you really feel like you're constantly starting css from scratch then i would recommend trying to mix them together so you don't spend that long without doing css yeah that's a really good tip actually snowbit says one day scrimba will become most popular platform to learn coding it will beat all other competitors okay palm veer says so josh you discuss all these details in your course well that actually loops me nicely on to having a look at your course um here it is now everyone who's watched me for a while knows that i love a gradient and here is a lovely gradient look at that yeah beautiful so um yeah would you like to tell us a little bit about the content of the course then and what people can kind of expect certainly yeah so the idea with the course is essentially to try and share the experience that i had that i mentioned spending a couple years kind of digging into how these things work this is my attempt at a comprehensive look through all of those things that i've learned so i share there's 10 modules and they're broken apart broadly by layout mode and other things so there's a module on flow layout a module on positioned layout one on flexbox one on grid um essentially the goal the primary goal is to get people comfortable so that when you're handed a design from the product team you can implement that design without any stress right you enjoy doing it it's fun and you even though you're not gonna like breeze through it without ever hitting a snag because that's just not realistic at least you'll be having fun doing it and you'll be constantly improving um that's the main goal we also talk about and this is kind of one of the most common questions i've gotten is what does it mean for javascript developers like i'm a php developer i'm a rails developer i don't touch javascript is this course right for me um it's a complicated question to answer because uh module 3 for example which is on the screen now is all about how to use a js framework like react or view to build a component library and uh there's a lot of and this is another thing too which is there's so many css resources out there very very very very very few of them are specific for working in a js framework like react or view so this course does i'd say like 75 of it is plain css fundamentals no javascript required but then the 25 is things like a lot of the workshops are done in react so that you can see how to apply these principles that we've learned in a real world context there's also like further down there's modules on typography images animations little big details is my fun name for the last module which is like all of the things that don't fit anywhere else and a lot of these are like aesthetics so like gradients and shadows and filters and all the cool things you can do in modern css so it really is intended to be fairly comprehensive like we look at every bit of the language what we don't cover is things that are outside of the scope of css so we don't talk about svgs we don't talk about canvas animation right i do try and keep it fairly tailored to like these are the css skills that you need to build css layouts wow amazing yeah i'm really enjoying this uh um images well yeah i'm not sure how they're made but they look amazing yeah i've been teaching myself blender for the past few months so these are blender illustrations beautiful yeah very nice and i really like the the sound of this and all the cool things you can do especially this little big details which is very exciting indeed yes um if you have a question for josh uh drop it in the chat and i will do my best too um yeah ask as many as i can so and yeah we've talked a bit about why people kind of struggle with css is there a common css error or some common css errors that people make so maybe your time at the boot camp sheds some light on the same old mistakes that everybody seems to make can you tell us those so we can avoid them yes it is it's um i'd say the category of mistake there's there's like two ways i can look at this right there's like kind of the broad abstract way which we've already kind of talked about a fair bit which is essentially the most common mistake is just assuming that the language works some way and just totally missing some other piece concretely though like to talk about some of the specifics um the three most common things i've seen uh one would be issues with position layout in terms of like putting something to be absolutely positioned and then it not going where you want right and this has to do with i mentioned containing blocks understanding that an absolutely positioned element will be positioned based on its closest ancestor that is also using position layout so if i set something to use position absolute and i say top zero left zero where does it go on the screen a lot of people think it's going to be in the top left corner of the viewport but that's not necessarily true if that element's parent or grandparent or great grandparent also uses position layout and what i mean by that is that that's position relative or position absolute or position fixed or position sticky that will form the box that contains this absolute child so essentially when you want to know where an element goes you have to kind of trace up you have to kind of follow the parents upwards until you find something that uses position layout if you get all the way to the html tag and nothing uses position layout then it uses what's called the initial containing block which is a box the size and shape of the viewport so if you want something when you set it to be position absolute to stick in the top left corner of the window you need to make sure that it doesn't have any parents that could be interfering with that um that's mistake number one mistake number two is stacking contexts which is um and this one is it's less common i honestly didn't see that much of it in the boot camp but when it does happen it is absolutely bewildering and you can easily spend like a day or two or three or five uh stuck in this rabbit hole um if i set something to have a z index of two and i said position absolute or relative so that the z index property does something um it doesn't automatically show up in front of something else that has a z index of one you kind of think okay i have two elements on the screen the higher number wins so it shows up in front this isn't always true um essentially there are different contexts that can be true in so if i have a header let's say and that header has like a button on the side i can set that button to be that index a thousand or 99999 it's always going to be stuck within the context of the header if the header also uses that index so if the header has a set index of two uh i think of it like semantic versioning right so the overall z index is 2.999999 if we compare that to another element that might be 3.1 uh the 3.1 like if i have below the header on the body i have some random element even if it's a lower number it's going to be compared against the header and not against the little button in the header so that's one of the most common things i'm taking more time on these answers than i had expected um i have fallen into that trap with the zed index actually and it did in the end i just went over to scrimba's discord and asked like what is this and somebody answered me but if i hadn't had that then probably i would still be trying to figure it out now yeah well it gets back to what we were saying that you can spend a decade writing css and never know what a stacking context is because at no point in your time using the language will you run into this concept it's totally implicit right you really have to pop the hood on the language and have someone explain to you or go digging in the mdn documentation css specifications to figure out what the heck is going on here and css is just uh you know we've talked about a couple of them now but there's all kinds like the third one i was going to mention which i don't we don't have to get into but hypothetical sizes in flexbox if anyone wants to google that that's something that i think has caused a lot of confusion oh really that's intriguing would you like to give us something with you yeah so the the form that this mistakes takes uh this mistake takes is i set something to have let's say width 50 pixels and it's inside display flex right so i have a parent with display flex and what i want is like a little icon that's going to be 50 pixels wide and then i want to have something beside it that has flex grow one so this thing beside it should grow as much as it can as i shrink the window though what i notice is that my square icon starts becoming rectangular or my circular icon starts becoming an oval it becomes kind of squashed and you think what the heck is going on here i set with 50 pixels flex basis 50 pixels works the same way so either way you can set that property and not get the result that you expect which is no matter what's happening with the container it should stay 50 pixels the problem in flexbox is when you set either width or flex basis you are setting what is called the hypothetical size which is the actual language and the specification which i really like this is the size that the element will be outside any other constraints and uh steps in the algorithm so if it can't fit it right like if like let's say the sibling is a little bit too big to fit um it will essentially scale that down if you want something to be like like so essentially the way to think about it is that width is like a suggestion in flexbox like if you use width or flex basis you are essentially saying this is what i want it to be but i understand if you have to tweak that number to make other things work if you do want it to be like an iron clad guarantee that like this thing will be 50 pixels you need to use min width that'll solve that problem which is why sometimes you'll see this is kind of a bit of a tangent but sometimes to make something do what you expect you have to set min width zero and essentially what you're saying there is that you can allow it to shrink more than it would naturally be allowed to shrink by so if you have an image let's say a flexbox container with an image inside you'll notice sometimes that it won't shrink below the size of that image and it's because there's like a minimum size that is implicit based on the content so if you have an image which is just naturally 100 pixels wide flexbox won't let you shrink below that unless you set min width 0. so whenever it comes to like the size that you want to guarantee without any other flexbox shenanigans men with this is the way you do it i will remember that one definitely yes bruno says josh goes over these painful details in his course that's amazing yeah yeah brilliant stuff um yes so can you um because in your course i should say first you have made sure to um include a lot of i guess knowledge about accessibility so some courses have kind of a module you've baked it into the whole course can you um tell us a little bit about how you've approached that and what it kind of looks like in the course yeah i'm so glad you phrased it that way because actually this is initially in my drafts i did have an accessibility module and what i realized is that it actually makes more sense to kind of tackle excess because like it just comes up all the time like not every property but with so many properties there are accessibility considerations um so yeah it was important to me that uh and the other thing too is that uh this was maybe being a little bit sneaky um i didn't necessarily want people to like skip over the accessibility module if it wasn't important to them i wanted to make sure that like you are getting this information because i do think it's really important um so that was kind of my way of making sure that it's uh prioritized in the course uh it was especially important to me like uh you know like i've i've believed in accessibility for a long time but when i started doing this course i was dealing with a nerve issue that left me unable to use a keyboard or mouse for like six months so i actually started working on this course platform using dictation and eye tracking which is uh i like to say that like i feel pretty confident that most of the course is going to be keyboard navigable because i didn't have a mouse while i was building it um yeah so you know i definitely wanted to make sure that it was like highly prioritized um it's not like i should say i don't consider myself an accessibility expert i think that i'm like intermediate level uh certainly i think i know a decent amount and a lot of that is from like firsthand experience of trying to use the web without a keyboard or without a mouse really because keyboard i had like a voice dictation that was kind of serving that role but yeah i definitely think that it's something that we emphasize quite a bit in the course so whenever you know like for example font size um you don't really want to go below a 16 pixel font size as a base size but more importantly you want to make sure that the user can control the font size right because if i have poor vision i'm going to have to crank that number up for a long time if you set font size and pixels there was nothing the user could do and then browsers introduced this kind of zooming feature where if i press command or control n plus everything on the page gets bigger and this works regardless of what unit i use in terms of like pixels or rems or m's and so i've noticed this trend of like developers saying oh well that's a solved problem now so i can use whatever unit i want for font size there's two remaining troubles though the first one is that there's two ways to change the font size there's the zooming in that we've talked about but you can also go into your browser settings and change the default font size and this defaults to 16 pixels um and that method of changing the font size doesn't respect or rather it can't override pixels so if i set on my html element font size 16 pixels the user can crank up that default size as much as they want is not going to have any effect which is not ideal because that actually does seem like a better way to do this right like i don't want to have to be manually tweaking the zoom on every website i want to just have a better default font size and the other way that typography can be implicated here is the viewport width unit vw a lot of people like to use this unit to essentially say that like the size of the font should scale with the width of the window and the problem is that this unit in particular won't respect either of those zooming options and you can there is a way to make it work essentially you have to use calc to like make sure that you're mixing a viewport unit with a pixel unit or a rem unit or whatever else something that actually not pixels but rem or m um so yeah this is like a good an example i think of the kind of thing that you really want to make sure that you're thinking about because unless you yourself have poor vision and are used to doing these things you'll just never realize that it's like a thing that you should be trying to make sure the experience is good um and i try to make sure to cover as many of those things as i can in the course excellent yeah yeah i'm looking forward to finding out some more things about accessibility a few questions coming in the chat interesting one method man redman fan your opinion on tailwind css yeah um so i'm not a fan of utility classes in general but i don't have a super strong argument about it it's just personally right like there's a lot of this is subjective so i want to first make sure to say that like tailwind is first of all like there's so much about it that i really do like in terms of enforcing a consistent design style and having built-in guidelines for how to like pick sizes and colors all of that is wonderful when it comes to like actually writing tailwind i have not enjoyed it personally but you know i think that that's fine like there's a bunch of different tools that as long as like i'll back up for a second um i think that one of the most important things that a tool can do is to solve or not solve but make the cascade easier to work with and what i mean by that is when i started writing css and in fact still across the web many websites are still built this way it's common that if you right-click an element and inspect it and then scroll through the css you will find like seven or eight or nine places that are applying styles to this element whatever it is and it's super common for this to happen when you build things in kind of a generic way right where you're just okay i have a button so i have these baseline button styles then i have like maybe this little module of like a form with a button and that has styles and then when it's on the homepage i have these styles and then when it's the user's not logged in i have these styles and you have all these different competing styles and the specificity challenges with that are trying to make sure that the right styles apply at the right time tailwind solves this by essentially you only have one place to set styles which is in the class name right i have a bunch of these little utility classes and those are the styles that apply to this element so i really like that that's really important but pretty much every tool nowadays will solve that for you like in the course we use style components which gives you the exact same thing which is i have my little styled dot whatever which i can use for people who aren't familiar essentially it's a way to create like a react component that comes bundled with the styles that i write and those styles are very like uh there's a word that i'm looking for that i'm not finding but they're connected essentially uh to this element so that when i use this element these are the styles that apply and critically i only have one place that i can apply styles to this element and like realistically you might also have global baseline styles so i might have styles at the tag level so that like all buttons and all links and all paragraphs share these styles but in general there's only those two places to change things i have my global baselines and then i have specific styles for a specific element as long as the tool that you use gives you a way to do that i think that it is fantastic and worth using nice yeah jimmy says i don't hate css i just hate using flexbox for everything really i actually like flexbox it's grid i can't get on with we've probably learned grid about 12 times now but yeah i find people like one or the other but not both interesting questions i was going to say that i've come to appreciate both but for a long time i was resistant to learning grid because i felt like i can already do most things with flexbox i don't want to have to learn a new thing yeah i think that they both have strengths and weaknesses and actually i think that if you only focus on a single layout algorithm then you'll grow to dislike it because you're using it in ways that it was never intended for and it's just kind of all you're always wrestling with it to do what you want so the way that it works now is that i use flexbox in two cases um one case is i have a single dimension that i have to worry about so i have a header that has something on one side and then some buttons on the other right i have a single axis that i'm worried about and i don't care at all about the cross axis which is like things being stacked the other way the other case that i use flexbox is if i want things to wrap and be asymmetrical so for example i have three cards on desktop right one two three i guess i should do that backwards for the mirroring one two three um and then on smaller screens i want it to be like one two and then three below right so i have this kind of triangular shape you can't do that with grid or at least it's super annoying to do that with grid um so i use flexbox for those two things i use position layout whenever i have something that needs to sit in front of something else and then i use flow for everything else like when it's just paragraphs and headings and you know typical just elements on the page so i do think i suspect germain that you will dislike flexbox less if you don't have to use it for everything yeah i haven't thought of that that's a very good point the right tool for the right job yeah moomin asks would you recommend pure css or to use frameworks so your course if i'm not mistaken doesn't deal with frameworks is pure css only is that right yeah i mean i guess it depends what you mean by framework like uh if we're talking about things like bootstrap right like essentially pre-configured styles it's true we don't touch any of that in my course and my thinking is that you know no matter what tools you use at the end of the day the browser only understands css all of these tools will either compile or run themselves away and when it comes to debugging right the principles are the most important thing you have to understand stacking context and containing blocks if you want to figure out why this element is sitting in the wrong place no matter what tool you use to create that element in the first place um in terms of frameworks like bootstrap and i guess tailwind kind titleman's like in this weird gray zone in my mind but things like bootstrap or foundation or material ui right things that give you uh an entire library of styles i don't really i've i've gotten a little bit more flexible on this because i've heard from a lot of other people who feel very differently and they've swayed me a little bit but my initial opinion is i don't really think that they serve much of a purpose and let me explain um when i worked at the boot camp what would often happen is someone would use say material ui or bootstrap because they didn't they liked the idea of not having to worry about css or styling and just having this it almost feels like a cheat code right like i have all this stuff that's already there and i can just drop it into my application and i'm good to go the problem is that the first week things are great you're going along you're dropping these components in but then you realize oh there's a component that i don't have that i need so i have to build it myself or this component that does exist isn't quite right you know this header component comes with two buttons but i actually needed to be one button and a drop down and it doesn't make it it's not configurable in the way that i need and i've spent so many hours with students helping them hack around the css that comes with the framework thinking that it would have been so much easier just to do this ourselves um yeah i do think that if you are building something where you don't care that much about the aesthetic so for example you're building an internal tool for a company like i used to work for a company called a breather it was kind of like airbnb for office spaces and we built this little application for the cleaning staff to use so that they could easily track like which unit needed cleaning at which times right it doesn't have to be like consumer grade polish because the you have a very small user base and they're trained how to use it so it doesn't you don't have to worry too much about the overall aesthetic or ux concerns all the you know it's still important to make sure that it's nice to use um in cases like that i think it's good because you can save a lot of time writing styles from scratch but for anything consumer facing i would say that it's worth it's worth writing your own styles especially because you know like i've worked for a few companies now like khan academy and digitalocean companies tend not to use pre-configured component libraries they tend to build their own or css framework whatever you want to call them um so i understand that if you're doing like a personal side project it does seem compelling to use one of these tools but you're not building the same level of skill that you would if you tried building it yourself and then those are the skills that ultimately a lot of us will wind up benefiting from on the job yeah i think that's the thing we always say at scrimba as well is that if you learn one framework you know that framework if you learn css fully then you can basically use any framework pretty easily so you can move jobs or yeah if someone brings in a new technology or take the technology away you're still going to be good so yeah that's my thought that's great this was a question i was going to ask you anyway but someone else has asked her said ben what are your thoughts on it now i will start by having a little whistle stop tour of what them is um to be honest i don't have a huge understanding of it but it's a way of naming your css um classes so it's block element and then modifier so in our example here the block is the form and then we've got the elements input and submit and then they've got modifiers such as disables or you might have or any other modifier really um yeah so that's ben what do you reckon of ben do you use it um and why slash why not yeah so this is a great question um and it actually it connects to something we talked about a little bit earlier when we were talking about tailwind so tailwindow was saying that you know you want to find a tool that solves the specificity challenges for you so that you don't have the situation where i have like seven or eight different places that a style is being applied um them is also a solution for this same problem right the idea that we have the reason we have beem is to give you a unified way to add styles in a predictable way right so we're not using ids we're not using lots of complicated selectors we're only using classes and the way that we're distinguishing between different kinds of things is we have this naming convention so that and the order matters right so in this example we have form underscore underscore submit those are kind of the baseline styles for this input and then we have form underscore underscore submit dash dash disabled and that's the styles that apply if this element is disabled although i think in that case you could just use the disabled pseudo selector but that's uh neither here nor there essentially i mean the thing is there's lots of different states right so disabled uh is one example but you might have like simple above is a perfect example of like you have some variant of this thing um you know you don't really have those problems if you use tailwind and you don't really have those problems if you use style components or css modules or any number of a set of modern tools essentially what i like to do is defer this problem to someone else or to some tool right because i don't want to have to keep track of keeping unique names and making sure to be very very requires a lot of discipline like to make sure that you're using bam appropriately is like a lot of work and if i can find some tool that will generate the class names for me which is what happens in style components or css modules i can just write the styles that i need and not worry about any of this sorry that's my thing is that you know bem is fine and it's uh a solution to this problem but it's a solution that requires work on the developers part and i prefer to find solutions that are just in the background solving this problem for me yeah good answer question here from julian um do you use sass i don't know how people say that s double a s or post css i don't actually know what either of those are so um preprocessors and what that means is essentially you write some code and it often looks like css like both i know sas and i think post css are like super sets so any css that you write is also valid sas but you get additional helpers things like variables and loops and the ability to use the little ampersand to reference the current thing so you can nest rather than having a bunch of like flat level selectors um i don't but i don't because i use style components and style components uses a different preprocessor called stylus so effectively i do it's just that i use a tool that kind of does this under the hood um like this are great they were especially great like 10 years ago when css just didn't have a lot of things um it's becoming less and less important every day i think because like variables for example right you used to have to if you wanted to have a color in css that you used in 10 different places you'd have to have your hex code or your hsl color snippet you would copy and paste it and then if you want to change the color you have to go and update all those places which is horrible um yeah so sas was great because you could you know dollar blue and then you just drop dollar blue and then so what happens is before you actually like you have a build step where it compiles this into css and it replaces those variables with the 10 instances and then the code that i write has this variable but the code in the browser is just plain css css has variables now and they're wonderful and they do things that sas variables can't because the browser knows about them so you can change the variable after the page is loaded and everything changes so um definitely like i you know i use sas for many years i still have bond feelings about it i don't think i would use it i guess i would still use it if i was doing a vanilla css project if i was doing anything with the javascript framework it would not be my first choice hmm yeah i do love css variables they are very handy indeed yamin asks any backend course i'm not sure if that's to me at scrimba or to josh i can answer for scrimba um yes hopefully early next year yes we're looking at doing node first uh josh i don't know if you have a back end course in the works but i don't i would recommend people because i you know i have gotten the question a few times now about like what's next for my the css courses i plan on updating it but in terms of like major content it's pretty much done um i kind of want to stick to the stuff that i think i'm uniquely good at so things like and i think we're going to talk about this a little bit later um bits of polish and like whimsy and interactions maybe i want to do something with design because while i don't really consider myself a designer i have to admit i've designed enough things now that i think i have enough to share right i think i'm a couple steps ahead of most developers so even if i'm not an expert i can hopefully still provide a lot of insights but yeah no back in course yeah i reckon you definitely can the design on your blog is very nice and that's something i will come to shortly but first an incr interesting question from tom chant is it considered bad practice to use flexbox on an element that then grid on the same element in immediate query that is interesting i don't think so um bad practice i mean the only downside to that is it can get a little bit confusing because like we talked about a little bit earlier different layout algorithms do different things with different properties so justify content for example does something specific in flexbox and something similar but different in grid and so what can happen is i might have display flex justify content center in my let's say media my mobile styles and then in a desktop media query i have display grid unknowingly i have now changed what this property does in a subtle but significant way that would be the only like thing that would make me wonder about it a little bit but i have to admit i've done this myself before sometimes it really is like you know things become two-dimensional on larger screens so it makes sense to switch it to grid so i think the only thing i would say is to be redundant like even if justify content should be the same value in both cases i would write it in again just so that there's no confusion and that way if one of them has to change i don't accidentally change the other one wow that is a good point which i would not have thought oh have i have i been lost can people still hear me am i still here yes okay cool i'm guessing leanne had a bit of an internet ah there we are i like leanne's cat avatar i learned something interesting about cats recently um there's only two different kinds of like melanin in cats that are responsible for the wide range of cat colors and so this black and white cat is like the most uh like un mixed melanin i suppose i suppose i should like actually i saw it in a tick tock and i'm uh probably misunderstanding it um yeah hopefully leanne uh pops back in momentarily i'm surprised it wasn't me because uh it occurs to me that i'm on wi-fi i normally have an ethernet but i'm moving computers and it's a bit up in the air right now i will answer some questions while while i have well i have the floor um what is my opinion on canvas should it be used for web design animation yes this is a great question um i would say that canvas is particularly good at two things um the first thing is if you have lots of elements that need to move around so for example on my blog i have this thing where you move your mouse and there's like a couple hundred individual circles that become lines um if you ever have cases where lots of things need to move at once you're going to run into problems there's like a dom bottleneck of if i have to move 200 things it's going to be really kind of like stuttery and laggy so that's not ideal canvas you don't really pay the same cost because in canvas you're constantly just repainting pixels you're not really like reaching across into the dom so canvas is good for that the other like maybe the obvious thing is canvas supports webgl which means you can do like 3d things so you can build like games or wild interactive things you can do things that aren't really possible in css because while css does have a 3d positioning system you can move things in three dimensions it doesn't have like 3d lighting or the same performance characteristics of like i want to make a little car that i can drive around you could maybe do that in css but my goodness is it going to be a lot harder and a lot harder but like a lot more burdensome on the browser and you're going to have to kind of hack in things that you get for free in like a full 3d environment um what else do i see here did i make those blender illustrations all by myself i did with the exception of the little character on my website the little guy sitting i didn't make that i hired an artist for that but uh characters are hard like i've gotten decent at making objects like lamps or like i made a little van or a camera but people are hard um what is my opinion about something interesting as span i where i as attribute without name can be used as invoking a multiple space as a yeah this is okay i think i understand it's hard to say all that because ampersand and bsp colon doesn't make a lot of sense um essentially i think the question here is how do i deal with spacing where um sometimes you can do things in html like another example is the br tag right you can add space using brs um the ampersand nbsp colon is a way of doing a single character of white space and this is sometimes useful because you can add like a space between two elements or you can add multiple spaces um that don't get collapsed in the same way that they do by default um you know in the old days it used to be this kind of situation where essentially like there were these very very strict pillars where you had html for structure the skeleton of your website you had css for the aesthetics and the layout and then you had javascript for the behavior and this is still like a good principle to live by but we've discovered in recent years as a community that it's not the only valid way to do it it's still valid but there are different ways to do it the thing that you don't want to have is the wild west where anything goes and you have no sort of guiding principles that help you avoid making a big mess by everything doing everything um you know and this is if you've heard separation of concerns this is kind of what this refers to um i'd say that the another way to look at that is you organize things by domain so i have a button component or i have a contact form component and then the the rules of which technology does which thing are less important in my mind so i used to really try to make sure that any sort of spacing concern was in css i'm a little bit more flexible about it now although in general i still try and make sure that like you know there are css properties to manage things like white space and making sure that it's preserved you can use white space pre-wrap is the one that comes to mind so there are ways to solve this problem and i would say that it's uh generally still better to do in css let me know if i've totally misunderstood that question though hello i see you i don't hear you i don't know if other people can hear you but i can't because it's not how about now okay yes you're good yes apologies for that um you know everything's breaking thank you yeah that's the way it goes holding the floor so beautifully there josh that was excellent um so um a lot the mic the mic is turned on mike is telling me the mic's turned on switch the sound we can't hear you how about now i can i've been able to hear you for like a minute now yeah okay well let's move on then you can still come here i think people can hear me other than michael yes so like let's carry on then in that case yes um so what i wanted to do was um have a look at your beautiful blog um because i think it's definitely worthy of some attention so um here it is so if you haven't seen this um i strongly recommend going to check it out i could spend hours on here um for a number of reasons um the animations wow wow look at that the noise we actually just talked about that oh so one of the questions was around what to use canvas for and this is one of those things that i did canvas because too many things are moving and it would have been a performance issue if i tried to use svg or just regular dom nodes wow i will i will listen back to my own stream later to find out yeah and it's got wonderful noises can you hear that click yeah and and one thing i really like is i've already done that one you can right click if you want to unlike a post oh it's a little secret bit of functionality well just look at this when you want to like a post [Laughter] all of this demo i suppose is to ask you a little bit about how you um kind of built these features and how did you make these lovely animations which actually add something to the site rather than just be annoying and distract people yeah i appreciate it um i would say a couple things um i've always like the thing that i've wanted to be good at since i got into web development was animation because i always uh and granted like this is uh there's almost like i don't know what the right term is you can either like have something that's really nice or really not nice with animation right like there it doesn't tend to be it tends to be polarizing and not just polarizing in terms like some people like it some people don't but which is also true but uh polarizing in the sense of like uh almost like what's that there's a term where like the uncanny valley right like if something is not quite human enough it kind of creeps you out if an animation doesn't quite feel right it just it makes the experience worse rather than making it better so uh i've put quite quite a lot of thought into trying to make sure that things look right and feel right i've read a couple of books about animation i would recommend rachel neighbors animation at work um essentially the goal is always just to make sure that i'm doing like relatively minor things like i don't have a lot of like big page wide transitions um little things that people don't expect i think is also like a really nice way to go like little easter eggs that people can feel happy discovering um you know it's i feel like so much of the web has become kind of uh boring like for lack of a better term there's just not a lot of variety nowadays every website has the same kind of three-four layouts uh and for my personal site right i wanted to kind of do something a little bit different and fun and playful uh i also just highly recommend people build a personal site as and treat it as like an experimentation playground like you have like kind of a wild idea for something give it a shot and just see how it works because a lot of the things on this site were just like i was in the shower and had an idea and spent an hour seeing if i could get it to work um yeah like there's a lot of just like little bits of experimentation on this site yeah um ravine says wow it's so cool i totally agree thank you that blog is so satisfying yes it absolutely is very satisfying to get this nice noises and everything yes hey i have an interesting question here um is there a reason asks mika limba um why the css is embedded in the html file on josh's website performance is that true and um this is a great question it is um it is true but it is not something that i set out to do personally um essentially when you use style components the way that it works is um and actually i don't i'm not actually fully certain how it works in production in development how it works is it adds a style tag to your head and it essentially inlines it which i'm guessing from this question is true essentially you wind up with a bunch of css in a style tag rather than a link tag referencing an external file in general this actually does tend to be good for performance because like the downside is it means that your html file is bigger which you might think okay well that's not as ideal because it means that the html is going to take longer to get there but i'm pretty sure css is blocking which means that it doesn't try to render anything until it has the css anyway and if it did then you would wind up with this flicker of like first you just have all the raw html with no styling it would be an unpleasant experience right so by inlining it you increase the size of the html file a little bit but you decrease the amount of time that you have to wait until the page is actually visible because you don't have to have the whole like double round trip right so it fetches the html it downloads it it parses it it realizes oh shoot i need the css file it makes a brand new request it waits for the server to generate it it receives it it parses it and then it displays it that's a lot slower than just receiving an html file parsing it and displaying it um i'm sure that there and the way the style components works is that it isn't actually like every line of css used on every page of this application it's the css specifically used by the components used in the current page this is just one of the nice little optimization things the style components does for you out of the box um but yeah so i suppose the short version of that answer is it is good for performance but it's not actually something that i chose to do it's just the tooling kind of optimizes this stuff for me yeah good to know one final question from electric how did you learn to design josh yeah this is kind of like my answer for css but honestly less intentional like with css i actually had a moment where i thought okay i'm gonna i'm sick of this frustration i'm just gonna try and get better at this um in design it's mostly that i've always enjoyed working on side projects and i've never had the luxury of a designer so it was more that like if i want this thing to look good and i do because i want people to pay attention to it and a bad design can be off-putting even if the thing that i'm building has no you know like this is one of the great the biggest unfair things in the world which is that like if i'm building a developer portfolio to apply for a developer's job my development skills should be the thing that people evaluate not my design skills and yet it's hard to imagine someone being able to disconnect themselves so much that like design has no influence at all like even if the person tries to like focus on the code and you know the projects that are linked in their architecture and all that it's just you are influenced by what you see and if something looks really pretty it makes you feel a little bit nicer about that thing and for other than jobs right other if you're just you know like a while ago i made a project i was applying to work at spotify and i wanted to build like a little tool that would essentially like use spotify's api to let you bounce between related artists and that's the kind of functionality that spotify already does like you can already open the spotify app and click related artists and go through but by making it like really well designed for this use case it allowed me to kind of like highlight something there's all these kind of advantages right so how did i learn design i kind of just uh tried to make things look good over the course of 15 years and over time got slightly better at it and honestly i haven't really done much formal or even informal um a lot of what i do too here's here's actually the like maybe the takeaway trick um find three or four things that you like right so if you go to a site called dribble dribble with three b's it's like it's kind of like github but for designers so designers share the work that they're working on um find three or four things that look nice and steal something from all of them so like maybe you like the color and actually if you want to search you can search for like maybe do like dashboard panel or something look at this apple demon with six legs yes yeah i think it's hiding behind your yeah because if you search maybe do like dash or like social network or like any sort of like thing that you're trying to build right um yeah i think dashboard is a good example well now you have all these really nicely designed dashboards and obviously or maybe not obviously but i believe it would be unethical to take this person's design and implement it as is but i don't see any ethical quandary with finding three or four of these that you like and taking the color theme from one maybe the broad layout from another maybe the card styles from a third and the typography from a fourth and mix all those together and now you have something that still looks pretty good but doesn't look too much like any of these individual things and you're you've now uh short-circuited what would otherwise be a very lengthy process in terms of developing design skills now it's not like actually that easy because there's so many things with design that like developing an intuition for what spacing looks right is actually really hard and that's the kind of thing that can still make something not quite look super well designed but it's certainly a good way to get something that looks like decent enough and it's a good starting place for you to start refining some of those design intuitions yeah what a great resource very nice thank you for sharing that yes well we have now actually slightly gone over the um hour so um i will definitely share uh josh's calls here it is head over there and see what it's all about and josh's blog so go and press some bouncing cartoon hearts and hear those amazing noises that's really a lot of fun wow amazing thank you it was great to talk to you josh really enjoyed it hearing all about your course and your enthusiasm for css oh it's my pleasure thanks so much for having me this was this was a lot of fun yeah i really enjoyed it and i apologize for um leaving the planet briefly that's just the way it goes i think after a couple years of remote work we're all kind of that's happened to all of us at this point no that's it isn't it yes and thank you for everyone who uh came along it was great to see you all here yes and for your great questions as well in the chat um michael and i um where am i we'll be back on friday doing something i've forgotten what um oh yes that's right live coding a word count so join us then for some coding fun and uh yes thanks for watching and hit subscribe if you would like to see more live streams like this yeah bye for now bye everyone [Music]

Channel: Scrimba

Views: 4,906

Keywords: web development, coding, learning to code, coding tutorial, learn web development, front end developer, frontend, learn coding, web dev, JavaScript, javascript for beginners, learn javascript, javascript tutorial for beginners, js tutorial, javascript basics, javascript beginners, javascript functions, learning javascript, js, css, learn css 3.0, this is the only way to truly learn css, learn css now, learn css today course, write good css, css tutorial header, css in 10 min

Id: FUxMgk_CTYI

Length: 63min 9sec (3789 seconds)

Published: Wed Oct 06 2021