CSS is awesome.
-
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
