CSS is awesome.
-
Jeremy Falcon wrote:
Anyway, you only have two ways to break auto pilot habits with peeps stuck in their ways: shock factor or repetition. The more stubborn someone is though the less repetition works. ... ... know that engineering types are some of the most overly emotional peeps in the world. What's ironic is a lot of devs treat people like dirt because they're socially clueless, but then they cry when something happens to them. Just like a child.
I can sing a song about that, I am like this. My point is, I was even worse and I am trying to evolve. That's why I know that NVC works. Looking back I do recognise a strong inflection point in my social interactions close to when I started to get better on it (still a long way to go, though).
Jeremy Falcon wrote:
Anyway, you only have two ways to break auto pilot habits with peeps stuck in their ways: shock factor or repetition. The more stubborn someone is though the less repetition works.
Yes, but exactly for this point, being rude is contraproducent, because people will the most of the times get deffensive and block whatever the message you are trying to bring over. I have experienced it a lot of times (on both sides, being the one that blocked and being the one that tried to "shock"). Lately I have realized that I can come way deeper when arguing with people just being polite and non attacking, than trying to confront them with MY truth.
Jeremy Falcon wrote:
And I 100% acknowledge I can be an ahole, but I'm an ahole from a place of love.
And that's why I think you would take profit too from it. You can still be an assh.. in the message, but you pack it nicer and is better received than the other way.
Jeremy Falcon wrote:
, it's just as much the receiver as the speaker as to whether or not something "is an attack".
That's the "one message, 4 meanings" theory and it is covered in NVC too, that's why good descriptions in the message help to reduce that. Yes, mostly is the receiver the one that "choose" (if possible) how to take something, but it is like in our jobs, the more concrete the specifications are, the less room for interpretations. If you pack your message in a neutral, good descriptive way, it will increase the chances that the receiver understands it the way you really wanted to comm
Nelek wrote:
That's why I know that NVC works. Looking back I do recognise a strong inflection point in my social interactions close to when I started to get better on it (still a long way to go, though).
Just so you know, my stubborn butt is hearing you. It does sound interesting, and I just may check it out. Can't promise I'll learn though (kidding). :laugh: But, I already do this. You just don't see it on CP since is the place you go to for 80% hate, complaining, and arguing. It's all about what you don't like here and ironically I've made an online home here due to my mutual love for tech.
Nelek wrote:
Lately I have realized that I can come way deeper when arguing with people just being polite and non attacking, than trying to confront them with MY truth.
Couple points to this... Respect is earned. I'm extremely polite to people that deserve it. If you scroll back a bit, you'll notice I never said anything about Gary's gripe post, for instance. Why? Because Gary is awesome. He's genuinely a good person. I e-love that guy. You'll never catch me being rude to him. It just won't happen. To reiterate my point, a lot of the peeps treat others like trash and get upset when they're called out on it. We can overthink or over talk this to death, but sometimes people are just aholes. I have no respect for that. Trying to play nice to placate their little, hypocritical feelings goes against my core. And I totally agree, that even if I'm right and they're wrong, defensiveness will ensure no point gets across so an eye-for-an-eye means nothing changes. But, by that time, I've already lost respect and don't care. Like, for instance, if I see I did something wrong to respectful peeps on here I'm quick to apologize. Some others have done the same as well, but it's rare. Then it's mixed in with all this childish drama that completely overshadows it. I have no respect for that. People can hate... cool. I say someone is a loser and then it turns into something drawn out. I can't respect that either. Drama bro. Way too much drama. Second point... I agree ish about the my truth part. Ish in the fact there is both objective and subjective truths. Objectively tacos exist. Subjectively they're either good or bad. You can say my delivery is subjectively bad. But, we can also objectively say people have hypocritical emotional issues. Perhaps you would include me in that, and that's cool (the colloquial you,
-
Jeremy Falcon wrote:
Anyway, you only have two ways to break auto pilot habits with peeps stuck in their ways: shock factor or repetition. The more stubborn someone is though the less repetition works. ... ... know that engineering types are some of the most overly emotional peeps in the world. What's ironic is a lot of devs treat people like dirt because they're socially clueless, but then they cry when something happens to them. Just like a child.
I can sing a song about that, I am like this. My point is, I was even worse and I am trying to evolve. That's why I know that NVC works. Looking back I do recognise a strong inflection point in my social interactions close to when I started to get better on it (still a long way to go, though).
Jeremy Falcon wrote:
Anyway, you only have two ways to break auto pilot habits with peeps stuck in their ways: shock factor or repetition. The more stubborn someone is though the less repetition works.
Yes, but exactly for this point, being rude is contraproducent, because people will the most of the times get deffensive and block whatever the message you are trying to bring over. I have experienced it a lot of times (on both sides, being the one that blocked and being the one that tried to "shock"). Lately I have realized that I can come way deeper when arguing with people just being polite and non attacking, than trying to confront them with MY truth.
Jeremy Falcon wrote:
And I 100% acknowledge I can be an ahole, but I'm an ahole from a place of love.
And that's why I think you would take profit too from it. You can still be an assh.. in the message, but you pack it nicer and is better received than the other way.
Jeremy Falcon wrote:
, it's just as much the receiver as the speaker as to whether or not something "is an attack".
That's the "one message, 4 meanings" theory and it is covered in NVC too, that's why good descriptions in the message help to reduce that. Yes, mostly is the receiver the one that "choose" (if possible) how to take something, but it is like in our jobs, the more concrete the specifications are, the less room for interpretations. If you pack your message in a neutral, good descriptive way, it will increase the chances that the receiver understands it the way you really wanted to comm
Just to be clear, I'm not disagreeing with the point you're conveying. There's an imbalance in the force here since I'm a bull in a china shop as it were. My station is that I'll naturally get along with geniuses and/or genuinely goodhearted people who grew up. My biggest folly is not ignoring those who deserve to be ignored and pointing out truths in a manner they're not mentally strong enough to absorb in the correct light. The latter is, of course, your point. The former is where I'm clearly lacking as solving that means the latter wouldn't happen. Because it would be nice to find a person or two of high mental caliber to chat with, without having to endure the drudgery of the hateful masses. They're just distractions... persistent ones no less.
Jeremy Falcon
-
Jeremy Falcon wrote:
Anyway, you only have two ways to break auto pilot habits with peeps stuck in their ways: shock factor or repetition. The more stubborn someone is though the less repetition works. ... ... know that engineering types are some of the most overly emotional peeps in the world. What's ironic is a lot of devs treat people like dirt because they're socially clueless, but then they cry when something happens to them. Just like a child.
I can sing a song about that, I am like this. My point is, I was even worse and I am trying to evolve. That's why I know that NVC works. Looking back I do recognise a strong inflection point in my social interactions close to when I started to get better on it (still a long way to go, though).
Jeremy Falcon wrote:
Anyway, you only have two ways to break auto pilot habits with peeps stuck in their ways: shock factor or repetition. The more stubborn someone is though the less repetition works.
Yes, but exactly for this point, being rude is contraproducent, because people will the most of the times get deffensive and block whatever the message you are trying to bring over. I have experienced it a lot of times (on both sides, being the one that blocked and being the one that tried to "shock"). Lately I have realized that I can come way deeper when arguing with people just being polite and non attacking, than trying to confront them with MY truth.
Jeremy Falcon wrote:
And I 100% acknowledge I can be an ahole, but I'm an ahole from a place of love.
And that's why I think you would take profit too from it. You can still be an assh.. in the message, but you pack it nicer and is better received than the other way.
Jeremy Falcon wrote:
, it's just as much the receiver as the speaker as to whether or not something "is an attack".
That's the "one message, 4 meanings" theory and it is covered in NVC too, that's why good descriptions in the message help to reduce that. Yes, mostly is the receiver the one that "choose" (if possible) how to take something, but it is like in our jobs, the more concrete the specifications are, the less room for interpretations. If you pack your message in a neutral, good descriptive way, it will increase the chances that the receiver understands it the way you really wanted to comm
[Are you a Nerd or Geek?](https://youtube.com/shorts/gz23hD4kjAc?si=nbM4cm-a8QgwHxzA) I'm a nerd turned Geek living in a nerd's world online. :laugh:
Jeremy Falcon
-
Just to be clear, I'm not disagreeing with the point you're conveying. There's an imbalance in the force here since I'm a bull in a china shop as it were. My station is that I'll naturally get along with geniuses and/or genuinely goodhearted people who grew up. My biggest folly is not ignoring those who deserve to be ignored and pointing out truths in a manner they're not mentally strong enough to absorb in the correct light. The latter is, of course, your point. The former is where I'm clearly lacking as solving that means the latter wouldn't happen. Because it would be nice to find a person or two of high mental caliber to chat with, without having to endure the drudgery of the hateful masses. They're just distractions... persistent ones no less.
Jeremy Falcon
Jeremy Falcon wrote:
My station is that I'll naturally get along with geniuses and/or genuinely goodhearted people who grew up.
I suppose I should say "thanks"? :rolleyes: :-D
M.D.V. ;) If something has a solution... Why do we have to worry about?. If it has no solution... For what reason do we have to worry about? Help me to understand what I'm saying, and I'll explain it better to you Rating helpful answers is nice, but saying thanks can be even nicer.
-
Jeremy Falcon wrote:
My station is that I'll naturally get along with geniuses and/or genuinely goodhearted people who grew up.
I suppose I should say "thanks"? :rolleyes: :-D
M.D.V. ;) If something has a solution... Why do we have to worry about?. If it has no solution... For what reason do we have to worry about? Help me to understand what I'm saying, and I'll explain it better to you Rating helpful answers is nice, but saying thanks can be even nicer.
You read my mind, buddy. :-D
Jeremy Falcon
-
Anyone who hates it doesn't really know it and cannot come up with a better solution to a *declarative* UI descriptor. And it's muuuuuch easier to hate than to learn, now ain't it? Also, anyone who intentionally is provocative to spew hate (out of boredom or some other psychological issue) only wants to drag people down to their level because it's very, very low and misery loves company. Probably has lousy relationships in real life and is generally not liked... except by other hateful people. Happy Friday! May the winners in life have an awesome weekend. You guys rock.
Jeremy Falcon
Yeah, I'll have to disagree with you on that one, but hear me out. Sure, it can do a lot, especially when you're good at it, but it's far from intuitive. I come from a WinForms background, and WinForms is just incredibly easy. Unfortunately, it doesn't scale (although you can trick a bit so it works on at least a few different resolutions). I can set height in WinForms without problems, but when I set height in CSS, like "height: 100%;", it somehow doesn't work because some other property I did or did not set prevents height from taking effect. Same with width, although width works better than height because for height they're saying "we don't know how high your page is", but for width they're saying "it's as wide as your screen". More general you can say: property A may or may not work based on the values of the collection of properties N, where each property in N may or may not be on the same HTML-element as A. I've been in multiple situations where I had to rewrite my HTML almost from scratch because I needed a footer and CSS simply couldn't do it with my current HTML. You'd think writing a footer class in CSS that just works would be easy, but it's actually impossible because of the collection of properties N that you have no control over. For that reason, decoupling HTML and CSS is a myth, you can put them in separate files, but you can't simply apply CSS to any HTML and make it work. I have a friend I hire for the difficult CSS shit, as it's his job, and even he is struggling sometimes (especially since the HTML is almost always already in place). Now I'm not an expert in CSS, far from it, but something that has so many WTFs to beginners and pros alike is not awesome in my book. That said, I get why CSS works the way it does and I don't have a better alternative. It's the least worst we have, which makes it the best I guess, but I wouldn't call it awesome, more like a necessary evil.
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
-
Yeah, I'll have to disagree with you on that one, but hear me out. Sure, it can do a lot, especially when you're good at it, but it's far from intuitive. I come from a WinForms background, and WinForms is just incredibly easy. Unfortunately, it doesn't scale (although you can trick a bit so it works on at least a few different resolutions). I can set height in WinForms without problems, but when I set height in CSS, like "height: 100%;", it somehow doesn't work because some other property I did or did not set prevents height from taking effect. Same with width, although width works better than height because for height they're saying "we don't know how high your page is", but for width they're saying "it's as wide as your screen". More general you can say: property A may or may not work based on the values of the collection of properties N, where each property in N may or may not be on the same HTML-element as A. I've been in multiple situations where I had to rewrite my HTML almost from scratch because I needed a footer and CSS simply couldn't do it with my current HTML. You'd think writing a footer class in CSS that just works would be easy, but it's actually impossible because of the collection of properties N that you have no control over. For that reason, decoupling HTML and CSS is a myth, you can put them in separate files, but you can't simply apply CSS to any HTML and make it work. I have a friend I hire for the difficult CSS shit, as it's his job, and even he is struggling sometimes (especially since the HTML is almost always already in place). Now I'm not an expert in CSS, far from it, but something that has so many WTFs to beginners and pros alike is not awesome in my book. That said, I get why CSS works the way it does and I don't have a better alternative. It's the least worst we have, which makes it the best I guess, but I wouldn't call it awesome, more like a necessary evil.
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
Sander Rossel wrote:
Yeah, I'll have to disagree with you on that one, but hear me out.
That's cool if it comes from a place of intelligence and willingness to learn. And to be fair, I've lost my patience on programming boards long, long ago. Literally being doing this my entire life for zero gain, ya know.
Sander Rossel wrote:
I can set height in WinForms without problems, but when I set height in CSS, like "height: 100%;", it somehow doesn't work because some other property I did or did not set prevents height from taking effect.
This is both true and not true. It's true in the sense that if you don't know what's going on it seems whack. If you do understand what's going on it's perfectly reasonable. The web is a much harder target to design for than say a WinForms app where you have complete control over everything (like window sizing). The DOM is very, very decentralized but it also mimics IPC in the fact elements can "talk" to one another (cascade, bubble, etc.). It needs to be this way because a typical web page will have thousands upon thousands of elements. And I can promise you that's no fun to deal with. Native web components make this a bit more WinForms/VB like to reduce the clutter, but we've also had component abstractions for years now before that. But, even in a component the element count can increase. So, abstractions can be good if you know what's going on. Part of the reason I'm so jaded these days is because I've explained what's going on with height a lot on CP. Nobody reads that though. But, someone's always gonna complain. So, at some point I realized I'm just wasting time doing that.
Sander Rossel wrote:
Same with width, although width works better than height because for height they're saying "we don't know how high your page is", but for width they're saying "it's as wide as your screen".
If you use width and height percentage units, both mean a percentage of the parent container (including body). The reason width appears to work better is because block elements default to 100% of parent, so by default it appears to work because the body's width will default to view port width but not height. Also, all block elements only have the height you need for content (including body). You can set it though. Most people just don't take 5 mins to learn what's going on. Why was it done this way? My guess is when CSS
-
Not everything is drag and drop or WYSIWYG... unless you use VB. Not sure what you're getting at. CSS is a descriptor no different than LaTeX or postscript. Saying you can't drag and drop with it has nothing to do with the language itself.
Jeremy Falcon
Yeah my point is really just that it's dumb to use any esoteric descriptor anything instead of just... laying out the thing and letting the machine handle whatever markup defines that. Hey y'all I can use Photoshop by script! And if I type this it makes a colored pixel!
-
Yeah my point is really just that it's dumb to use any esoteric descriptor anything instead of just... laying out the thing and letting the machine handle whatever markup defines that. Hey y'all I can use Photoshop by script! And if I type this it makes a colored pixel!
Saying something is dumb without knowing anything about it is immature and dumb. CSS is akin to ASM in regards to your point. If you don't care enough to learn it there are tons of frameworks or WYSIWYG editors. You should be grateful I'm spending my time telling you the obvious. Also, people do use actions in Photoshop. If you don't think it supports macros then you should recognize when it's time to learn rather than make side "arguments" that aren't even related.
Jeremy Falcon
-
Saying something is dumb without knowing anything about it is immature and dumb. CSS is akin to ASM in regards to your point. If you don't care enough to learn it there are tons of frameworks or WYSIWYG editors. You should be grateful I'm spending my time telling you the obvious. Also, people do use actions in Photoshop. If you don't think it supports macros then you should recognize when it's time to learn rather than make side "arguments" that aren't even related.
Jeremy Falcon
-
Yeah I know it and have done it. That's how I know we're doing it wrong and have been for a long time.
You just said you were doing it wrong and yet you blame CSS and still argue with experts...
Jeremy Falcon
-
You just said you were doing it wrong and yet you blame CSS and still argue with experts...
Jeremy Falcon
-
There were once "experts" who had it all figured out with "vapors" too. Once they took the advice to start washing their hands, they stopped killing so many people.
You're just looking to argue with nonsensical nonsense dude. You're not fooling anyone. :|
Jeremy Falcon
-
You're just looking to argue with nonsensical nonsense dude. You're not fooling anyone. :|
Jeremy Falcon
-
"Nonsensical nonsense" is the sort of thing CSS produces from people's brains long term, except it's more centered.
Thanks for demonstrating, yet again, there will always be someone childish and uneducated peeps on here to argue. Are you done wasting my time? I'm willing to be you're not. Enjoy your little kiddie game. I'm out.
Jeremy Falcon
-
Sander Rossel wrote:
Yeah, I'll have to disagree with you on that one, but hear me out.
That's cool if it comes from a place of intelligence and willingness to learn. And to be fair, I've lost my patience on programming boards long, long ago. Literally being doing this my entire life for zero gain, ya know.
Sander Rossel wrote:
I can set height in WinForms without problems, but when I set height in CSS, like "height: 100%;", it somehow doesn't work because some other property I did or did not set prevents height from taking effect.
This is both true and not true. It's true in the sense that if you don't know what's going on it seems whack. If you do understand what's going on it's perfectly reasonable. The web is a much harder target to design for than say a WinForms app where you have complete control over everything (like window sizing). The DOM is very, very decentralized but it also mimics IPC in the fact elements can "talk" to one another (cascade, bubble, etc.). It needs to be this way because a typical web page will have thousands upon thousands of elements. And I can promise you that's no fun to deal with. Native web components make this a bit more WinForms/VB like to reduce the clutter, but we've also had component abstractions for years now before that. But, even in a component the element count can increase. So, abstractions can be good if you know what's going on. Part of the reason I'm so jaded these days is because I've explained what's going on with height a lot on CP. Nobody reads that though. But, someone's always gonna complain. So, at some point I realized I'm just wasting time doing that.
Sander Rossel wrote:
Same with width, although width works better than height because for height they're saying "we don't know how high your page is", but for width they're saying "it's as wide as your screen".
If you use width and height percentage units, both mean a percentage of the parent container (including body). The reason width appears to work better is because block elements default to 100% of parent, so by default it appears to work because the body's width will default to view port width but not height. Also, all block elements only have the height you need for content (including body). You can set it though. Most people just don't take 5 mins to learn what's going on. Why was it done this way? My guess is when CSS
Long post, let's say I agree with you for the most part :laugh: I used to view CSS as pure evil, probably invented by Hitler himself (but apparently it was one Håkon Wium Lie). That friend who sometimes works for me convinced me it's not all bad, but that you have to think about your overall design up front. And because I don't do that I can't do some stuff and he's struggling to make things right. Recently, I created my first sticky header and footer layout without his help, so I'm learning! The WTFs/minute is still high, but flexbox (and grid) make things a lot easier (as you already said) :D
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
-
Long post, let's say I agree with you for the most part :laugh: I used to view CSS as pure evil, probably invented by Hitler himself (but apparently it was one Håkon Wium Lie). That friend who sometimes works for me convinced me it's not all bad, but that you have to think about your overall design up front. And because I don't do that I can't do some stuff and he's struggling to make things right. Recently, I created my first sticky header and footer layout without his help, so I'm learning! The WTFs/minute is still high, but flexbox (and grid) make things a lot easier (as you already said) :D
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
Sander Rossel wrote:
That friend who sometimes works for me convinced me it's not all bad, but that you have to think about your overall design up front.
I liken it to ASM, but for the web and UI. You don't just start coding ASM right away like you do in VB, etc. It does come with a learning curve, I'll give you that. And it's made worse by the browser compatibility wars (that's better now though), but that's the fault of the industry. But nobody's on CP saying "I hate ASM" because we all know ASM ain't for the faint of heart. And they think just because CSS isn't compiled it requires zero learning. And if they have to study... let's just just say we hate it and move on.
Sander Rossel wrote:
Recently, I created my first sticky header and footer layout without his help, so I'm learning!
Noice man. It's a good time to learn layouts IMO. There's CSS Grid, but for layouts Flexbox is all you need and support for that has been around since IE11, so you're covered. I mean, not that you should support IE. :laugh: I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
...
Howdy
...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}main {
flex: 1;
}Done :laugh: Also, when you get a chance, this is a great read on how flexbox works: [CSS Flexbox Layout Guide | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Jeremy Falcon
-
Sander Rossel wrote:
That friend who sometimes works for me convinced me it's not all bad, but that you have to think about your overall design up front.
I liken it to ASM, but for the web and UI. You don't just start coding ASM right away like you do in VB, etc. It does come with a learning curve, I'll give you that. And it's made worse by the browser compatibility wars (that's better now though), but that's the fault of the industry. But nobody's on CP saying "I hate ASM" because we all know ASM ain't for the faint of heart. And they think just because CSS isn't compiled it requires zero learning. And if they have to study... let's just just say we hate it and move on.
Sander Rossel wrote:
Recently, I created my first sticky header and footer layout without his help, so I'm learning!
Noice man. It's a good time to learn layouts IMO. There's CSS Grid, but for layouts Flexbox is all you need and support for that has been around since IE11, so you're covered. I mean, not that you should support IE. :laugh: I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
...
Howdy
...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}main {
flex: 1;
}Done :laugh: Also, when you get a chance, this is a great read on how flexbox works: [CSS Flexbox Layout Guide | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Jeremy Falcon
Jeremy Falcon wrote:
I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
Doesn't work, the footer is at the bottom, but the body is pushing it down, so even with only "Howdy" I still need to scroll :D
Jeremy Falcon wrote:
And they think just because CSS isn't compiled it requires zero learning.
This is very true! People make a small website and call themselves "full stack" (I'm guilty myself). I really got to know JavaScript with my arrgh.js library (see signature), but that was 2018 and it has evolved quite a bit since. But I've seen it time and again, and as I said, I do it too, but front-end is really just an aside and an afterthought because how hard can it be.
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
-
Jeremy Falcon wrote:
I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
Doesn't work, the footer is at the bottom, but the body is pushing it down, so even with only "Howdy" I still need to scroll :D
Jeremy Falcon wrote:
And they think just because CSS isn't compiled it requires zero learning.
This is very true! People make a small website and call themselves "full stack" (I'm guilty myself). I really got to know JavaScript with my arrgh.js library (see signature), but that was 2018 and it has evolved quite a bit since. But I've seen it time and again, and as I said, I do it too, but front-end is really just an aside and an afterthought because how hard can it be.
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
Sander Rossel wrote:
Doesn't work, the footer is at the bottom, but the body is pushing it down, so even with only "Howdy" I still need to scroll :-D
Sorry, I should've mentioned margin in that example. The reason it's doing that is because I used `100vh`, but by default elements have a margin. So, the browser took that is `100vh` for the min height (not max height) plus a little something, something to fit the body into with its margin. It's usually not noticeable because the default height doesn't span the full view port but only the content. Here's the full document that accounts for that. I added two extra "resets" in it too (border and padding) just in case a framework tries to tinker with them since they can also have the same effect on `body`.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Sticky Footer</title>
<meta charset='utf-8'>
<style>
html, body {
border: none;
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
padding: 0;
}header { background: pink; padding: 1rem; } main { flex: 1; padding: 1rem; } footer { background: cyan; padding: 1rem; } </style></head>
<body>
<header>...</header>
<main>Howdy</main>
<footer>...</footer>
</body>
</html>You'll notice I used the multiple selector `html, body`. That's not technically required these days but it's just an old compatibility trick from the years of past. It won't hurt anything to keep it with modern browsers, so I usually do. I also re-added padding after the reset in body to 1 root em so it should propagate as expected.
Jeremy Falcon
-
Jeremy Falcon wrote:
I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
Doesn't work, the footer is at the bottom, but the body is pushing it down, so even with only "Howdy" I still need to scroll :D
Jeremy Falcon wrote:
And they think just because CSS isn't compiled it requires zero learning.
This is very true! People make a small website and call themselves "full stack" (I'm guilty myself). I really got to know JavaScript with my arrgh.js library (see signature), but that was 2018 and it has evolved quite a bit since. But I've seen it time and again, and as I said, I do it too, but front-end is really just an aside and an afterthought because how hard can it be.
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
Oh, and to be fair, browser compatibility is where the real pain the booty comes in. Unfortunately, most browser makers (cough, cough Microsoft) hate following standards. Was even worse in the past when there was no standards committee as everyone was fighting for web dominance. But, thank God it's much better these days. Anywho, the site `Can I Use` will be your new BFF for web development as it'll list browser compatibility. You can automate all of this of course if you have a proper dev environment set up in Node, but for a quick check it's still a great site to know. Here, I'm checking to see which browsers support viewport units like `100vh`. So, they've been around for about 10 years now, which makes them pretty safe to rely on with this. For people with an old browser that doesn't support flexbox or viewport units, it just won't span the entire viewport unless there's content. No biggie. Site still works. [Viewport units: vw, vh, vmin, vmax | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/viewport-units)
Jeremy Falcon
