(Arguably weird) web dev tale

What am I on? (except drugs)

So, CSS is kind of the language everyone who touches Web development hates, why? because it’s weird, not logical at all, too easy, and it’s not a programming language.
1. It’s not weird, it’s actually well made, except for a few things, like every other language.
2. It’s very logical, you’re just too dumb to figure it out, don’t worry, nobody does, except when they actually try.
3. It’s not easy, oh right you agree, you’re just saying that because you don’t understand the parts that are complicated. Yes, it’s complicated, and sophisticated, which doesn’t mean hard either btw.
4. It IS a programming language, just using a very different system and syntax, for a very different purpose, for which it’s unbeatable at.

Anyhoo

As you can see, I love to defend CSS, poor chap has no way of defending itself, after all it’s not alive… (arguably weird, remember)
Like most hardcore CSS defenders, I do not like to use Javascript when I can use CSS, Javascript is fast as a lot of fast stuff, but it’s EXTREMELY SLOW because of browsers, and it’s wrapped up in a lot of added headaches that plain CSS doesn’t have when it’s alone.
That doesn’t mean it’s bad, does it? Some will say JS is bad, and it may not be the best language, it’s still very good at what’s it’s supposed to be made for. (seems to be a pattern, a torch is good at making one thing only: light)

Now, CSS does have one big issue, it’s kind of at its begining, not really because it’s 20 years old, but it’s only been a few years since browsers finally decided to make it more compatible, and that means a few things.
1. It’s growing slowly, small things take months to be implemented, mostly because they try to implement them logically, to prevent some people to say it’s bad.
2. It’s still missing some very basic stuff.

Now the big reveal: I used Javascript for a CSS thing… and that’s because I had two choice.
1. Either I forgot about the “problem” and decided to keep it like it was.
2. Or Javascript came to the rescue, in a properly implemented way.

Here are the incriminated lines:

1
2
3
4

/// Store the navigation bar's height in a constant
const navigationHeight = document.querySelector('#navbar').offsetHeight;
/// Set a CSS variable "--scroll-padding" with this height, minus 1 to be 1 higher than what we want so we don't have section problems, and all of that in pixels
document.documentElement.style.setProperty('--scroll-padding', navigationHeight - 1 + "px");

1
2
3
4
5

html {
    /* Set the scroll padding at the top to the variable "--scroll-padding" (that's if JS is activated only)
    If the user has JS deactivated, set to fallback value of 75px */
    scroll-padding-top: var(--scroll-padding, 75px);
}

This should work in 95% of cases

So wait, what’s new?

Well the navigation bar is sticky at the top of the page, making it easier to use it even if you’re deep in some content.

And believe me, this whole article is simply about this…

Now why all this for that?

I had this (the sticky navbar) in the previous design, and believe it or not, I only noticed the problem caused by it, when scrolling to a title, the bar would appear above it, months later.
I tried to fix it, but I did not notice the fix wasn’t that good, so I decided that “eh, it’s not much of a problem is it?” and it wasn’t, so I kept it.

When I revamped the design, I thought about fixing it, but I knew it had to be done with Javascript, and I didn’t want to, so I decided to keep it without it.
And now, I just figured what the hell, the javascript involved is very simple and doesn’t require 8 times the entire computer power on earth to work, so why not do it?
So I did.

And then I took 7 times the time needed to fix this bug to make this article.
I wanted to go back to my old, story-telling way of writing, even though I don’t really like reading myself when I write like this.

Conclusion

I’m tired, tomorrow I’m getting my actual CFC paper, I got a new suit for it, so I’m chuffed (that’s two Brit expressions in one article btw).

Have a nice day :D