In your pretty short answer you’ve already caught mistake. Let‘s see:
> And if you want to stick the header to the top you can use `position: sticky` in CSS instead of including a huge Javascript file that can do all kinds of fancy stuff you don't need.
Your „simple trick“ to avoid „including a huge javascript file“ doesn‘t work in: Opera, Chrome for Android, IE and a couple more[1]. It does work in Safari, but not as you would expect. Also, position:sticky is still a Working Draft. It is suspect to be changed at all times. Want the same functionality across all Browsers? Better use Js.
Another thing is that most people here think „huge JS bundles“ are what make websites work. These are to be used for webapps though. If you want anything more than a static site, you‘ll need JavaScript. No way around it.
Are we looking at the same compatibility tables? Caniuse lists it as working in android chrome and opera with the exception of <thead> elements, which are not relevant here because OP's example was about <h1>, not <thead>. I'll give you IE, but that's already ignored by many.
> If you want anything more than a static site, you‘ll need JavaScript.
Forms are still a thing. Then there's hover animations, summary/details, video elements and a few other interactive things that don't need javascript.
There also is a middle ground between "static page" and "huge JS bundle". A little javascript usually isn't what makes web pages slow.
So, really, no huge (or small) JavaScript file needed at all in this case. Like most other bloat in web dev, that's just laziness that accumulates.
that means that 6 out of every 100 people can't use it.
Roughly 10 million people visit HN every month.
that means that about 600,000 people can't use it just on HN alone.
Anyway in my comment I was actually saying that if you do things right it will work even for that 5%, without any JS. Maybe it wasn't clear enough?
Just use CSS. No one will miss the sticky bar if it doesn't show up on their browser.
Who doesn't want static sites? I certainly do. They're faster and easier to use. I've never heard a user say "I wish my back button didn't work and the page rendered wonky so that buttons move as I try to click them".
It's web developers that push to turn simple HTML documents into "applications".
The problem, as always, is (poor) developers making poor decisions. Implementing static sites as a JS-required, JS-heavy pages is something that some poor development teams are doing.
Bungie, game developer, have been replatforming their site and they've turned what is mostly static content pages into purely client-side single page app which requires javascript to display anything https://www.bungie.net/7/en/Destiny/BeyondLight It's sad because there are extremely productive ways to build this out using their preferrred technoligies (react) but deliver the static content from the server in the initial page load AND continue doing SPA-style navigations if desired.
---
There are lots of webpages out there, that means there's lots of developers making them. Some developers will be good, some will be average, and some will be bad.
The 'problem' with websites is that it's a lot easier to see when they've been done poorly, compared to say native apps.
This is not the point. The point is some developers just include big Javascript files because they don't know what other methods and options there are.
I have seen developers include Javascript to 'fix' things across browsers but it made things worse because the `let` keyword was not supported in some browsers at that time.
So it is not about if you should use Javascript. It is about the fact a website or webapp can and should be fast. But when a developer does not know about the technical aspects we will end up with multi-megabyte pages that take 10 seconds to complete.
--
About the `position: sticky`: it is not smart to promise a client a pixel perfect experience across all browsers (unless they want or need to and will pay the extra price). In the case of a sticky header you can support all modern browsers with two lines of CSS (`position` and `top`). The other 6% won't have a sticky header but still a perfectly working website. So imho you did not caught a mistake but a real world example.
I’ve been noticing this kind of rebranding of what static means a lot. It seems to create lots of confusion (you can see it in this thread already).
Traditionally, “static” websites were websites without a server-side programming language backing them—sites whose content was unchanged by any users. Javascript, CSS, and HTML are the tools used to build static websites.
Today, some developers seem to use static to mean Javascriptless.
The term fits both situations pretty well, so I get why it happened. I don’t know if there’s a better less-ambiguous term used for either of these things now?! Non-database-backed?! Nonjavascript’d?
Looked at the source for one answer because of their login wall and couldn't be bothered to re-create my account and to get to the actual answer is about 30!! nested divs and then each line of text (provided you've returned to the next line in the visual text editor to write your answer)is in its own <p> which is fine on its own, but each <p> is styled with a boatload of classes for no apparent reason....
I'm fully with you as far as loading times, but even a simple wordpress install these days add incredible useless stuff that makes it non trivial for the average blogger to simplify...
1. Lack of expertise/interest, as you say. One root cause here is that there are many devs in web development who are self-taught, with no CS background.
2. Time pressure and contractual agreements: Things need to be finish ASAP to reduce cost, and implementation contracts usually state features and looks, but not performance or maintainability.
3. Many effects, such as sticky elements, couldn't be done in CSS just a few years ago, so devs got used to include libraries for these things. In fact, I think many modern CSS features got introduce because they were widely used, but with JS implementations.
That's an excuse when you're just getting started, but after 3 or 4 years everyone has had time to figure these things out. There's papers, blog posts, youtube videos... even wikipedia can help in understanding performance on the web. If you've been doing web for 5 years and still don't know these things, it's not because you're self-taught; it's because you're lazy and/or being overworked with not enough room for learning.
Also in a lot of cases you can build the fastest website with minimal markup and only the necessary CSS/JS libraries for the base functionality but if then for "business reasons" you need ad networks, google tag manager, analytics scripts, third party support popups there's only so much you can do as a front end developer to keep the site fast.
Also, not programmers are guilty of such bloat, but the tools that they use, html css included. There is no compiler that takes an idea / a representation of it and turns into highly compressed, DCE'd, -O3 LTO'ed bundle. There is some progress in this direction, but it is not that great and requires an effort to use.
because Bootstrap told them to do so, they nest as much DOM as possible
Bootstrap also does that for reasons. For reasons that are unclear to bootstrap itself, because these all lie in the inconsistencies, legacy-ness and incompatibilities of the allegedly most compatible platform ever. And when we try to discuss how to extend it (not even replace!), someone brings idealistic arguments about how it should stay as is, because otherwise (again allegedly) they couldn't print a webapp or screenread an html5 platformer game.
Does anything like that exist?
What does that mean?
Edge devices here means the most modern browsers?
And noice means unnecessary?
Noice is just an awkwardly phoneticized spelling of the word nice intended to convey a sarcastic tone.
I have seen websites where the homepage's HTML alone was over 1MB! in size. The only thing that got exited was my CPU.
Let me tell you: if you want a header with a background image where the text is aligned at the bottom you can just write:
There is no need to write it as: And if you want to stick the header to the top you can use `position: sticky` in CSS instead of including a huge Javascript file that can do all kinds of fancy stuff you don't need.But I am not sure I can blame those front-end developers. Deadlines are tight and it takes effort to learn about the technical aspects of front-end development.
My personal standard is that a page should be ready in 1 second. For huge sites 3 seconds max. I've been creating small and huge websites for over 20 years now and never had a problem with these goals. This includes webapps built with Javascript.