Thing is, I have configured my Firefox to be as “private” as possible. It can also backfire, because corps can fingerprint you based on your browser’s preferences. So, when I am saying Firefox is bloatware is because it is out-of-the-box. You can spend hours tinkering with it, but the average person won’t bother doing that, so Mozilla would force them to be part of their ecosystem through all those syncs, branding, AI, no actual strict privacy by default, etc. That’s what I call bloat, that on-boarding experience with terrible UI changes.

Because it is a bloatware. Like, what is the point of using Firefox? It’s faster? It was never because of speed. Less RAM usage? No. It was because of privacy. Peoples started hating on Chrome because Google became evil. Then they went after adblockers. Google search became bloated with garbage results, DDG became a better alternative, also marketed as privacy-focused.

It just happens to be that out of all other web browsers, there were no better alternatives, and Firefox seemed the best option at that time. Opera was a spyware. Brave was still fresh. Actually, Brendan Eich, the founder of Brave who also founded Mozilla and created JavaScript, was called out for making an anti-LGBTQ donation, so many people hesitated using Brave when it released. Needless to say, anything Microsoft was hated with a passion.

That’s why people need to keep reinventing the wheel.

Absolutely agree on every point. I felt this for the last few years, not just with the latest updates. I haven’t updated Firefox for months (a year?), and when I decided to do it after convincing my friend to switch to it because he said he couldn’t find the option in settings I told him about, I was basically ~10 versions behind. So updating it and seeing the redesigned settings that looked less intuitive and completely unnecessary, I felt really frustrated.

There’s a new browser in the making called Ladybird, I don’t know if it’s going to be available on Windows (they say the alpha is for Linux and macOS). Yeah, I am on Windows, sadly, and I don’t plan on switching to Linux, yet. Mozilla was praised for being a non-profit “good guys”, but they’ve been really annoying, perhaps trying to appeal to the mainstream. Truth is, the mainstream does NOT care about Firefox. You need to spend all your funds on marketing it, not making it uglier with each update.

Huge screen and DevTools being docked (either left or right). I am currently on a laptop, there’s no other choice than to alt-tab. If it’s a small desktop screen, then having a second monitor would be nice, but then if already got used to alt-tabbing, second monitor would be useful for some white noise TV. I once tried that dual screen setup, and the second monitor was small, and using it as DevTools was not that bad. But huge screen would’ve been better.

hand it off to a front end person eventually

This is what’s sad about the current situation in the industry: some things are being preferred not because it’s better for quality and performance, but to reduce the friction in learning. So, if you’re using a framework that everyone does, you’d expect your next hire/whoever is going to use it next to be familiar with it.

I don’t want to give you a bad advice telling you to go against whatever the industry agreed upon. I am personally doing things the way I think is the best, without caring who is going to use it next, because usually there’s no next. It’s either my stuff or work I do for someone else who just wants things to work.

Yeah, I remember when semantics were not a thing, and people would do everything using tables, and when the Grid was introduced, I was a bit skeptical because I thought, while it is useful, it might not be compatible with most browsers used at the time. Today, though? Most of the people are on browsers that support flexbox, Grid, semantics (which is also important for accessibility), etc.

I see what you mean. Ignore learning from frameworks. They are bad. They are messy, chaotic, and they are not tailored for your website, they are generalized for any use case, so things are awkward, bloated, etc.

So, try to avoid duplicating things. The rule of thumb is: if you want to duplicate something, then something is not right. And your feelings about it are on point. I will show an example of how I do things below. What I also try to avoid is using JavaScript when the same exact thing is possible to achieve with pure HTML+CSS (think of cases when someone has JS off). CSS is powerful enough for you to be able to create a DOOM-like game.

Good news is, you don’t need JavaScript to create such a navbar. And many people still don’t know how to properly create navbars, e.g. they are using lists (ul,li) or might still use tables. SO, it all comes to your knowledge of CSS and how to “refer” to elements (e.g. your knowledge of “>” and “~”).

Suppose we have an HTML where I define a header with a navbar:

<header>
    <div class="logo"></div>

    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

Notice how it does not use any lists, the links are not items–those are simply links, and I am also using semantically-correct tags (even though you can still use div class="navbar"). Then, in CSS:

header {
    display: flex;
    justify-content: space-between;
}

.logo {
    background-image: url("https://lemmy.ml/pictrs/image/fa6d9660-4f1f-4e90-ac73-b897216db6f3.png");
    width: 32px;
    height: 32px;
    background-size: 32px;
}

nav {
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
}

I want you to also notice how I have this “logical progression” in how CSS reflects exactly the flow of HTML elements, to keep it clean and intuitive (sounds like something very obvious, but from my experience it’s still rare). This is me doing to for “desktop”, the next concern would be making it “mobile-friendly”. This is done using a “trick” where you add an invisible checkbox and make it look like a button, and once you click on it, it triggers the navbar. But I will post the full thing below, to not turn it into a full blown tutorial, I don’t know if there are character limits here.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
		}

		.logo {
			background-image: url("https://lemmy.ml/pictrs/image/fa6d9660-4f1f-4e90-ac73-b897216db6f3.png");
			width: 32px;
			height: 32px;
			background-size: 32px;
		}

		nav {
			display: flex;
			gap: 20px;
		}

		header input, header label {
			display: none;
			cursor: pointer;
		}

		@media only screen and (max-width:500px) {
			header {
				position: relative;
			}

			nav {
				display: none;
				position: absolute;
				top: 100%;
				right: 0;
				flex-direction: column;
				background: #fff;
				box-shadow: 0 4px 12px rgba(0,0,0,.15);
			}
			nav a {
				padding: 20px;
			}

			header label {
				display: block;
				width: 20px;
				height: 20px;
				background-image: url("https://www.svgrepo.com/show/94793/menu-button-of-three-horizontal-lines.svg");
				background-size: 20px;
			}

			#menu_toggle:checked ~ nav {
				display: flex;
				flex-direction: column;
				width: 100%;
			}
		}

	</style>
</head>
<body>

	<header>
		<div class="logo"></div>

		<input id="menu_toggle" type="checkbox">
		<label for="menu_toggle"></label>

		<nav>
			<a href="#">Home</a>
			<a href="#">About</a>
			<a href="#">Contact</a>
		</nav>
	</header>

</body>
</html>

I don’t want to assume things you know or don’t know, but I want to still point out some things like how I start my CSS with resetting certain values, like margins and paddings, and also setting box-sizing. It’s an absolute must-have (believe me, back in a day I spent lots of hours trying to understand what is wrong when the reason was all because of box-sizing).

[Edit]: Also, one thing with positioning the nav menu is that in header you have to specify “relative”, and the menu (nav) should be “absolute”. That’s because the “absolute” is being set relative to the header, so the element’s properties are going to be relative to the header, i.e. if you do not set the “relative”, it will assume it’s relative to the body and navbar will appear at the bottom of the page. This is also one of the concepts that at first might be confusing and annoying, but once you get a grasp of it, you’ll be more confident with writing vanilla CSS and not touching frameworks ever again.

Anyways, try not to overthink and always keep in mind that things should not be complicated and the best way to do something is the simplest way.

That’s a matter of preference, what you’re already used to. But the way that I personally do things when it comes to the design part is first do the “desktop version”, then the “mobile version”, i.e. I don’t do those things simultaneously. If you have a dual screen setup, it sounds useful to have the DevTools on one screen and the browser on another, is all I can tell.

Here’s the reasoning behind “first desktop, then mobile”: first, I start with the problem, and it takes a lot of time to get things straight; then, I try to build a mockup of how the product (website) should look like considering all of its features (elements); then, I write the HTML/CSS. Here, I am only focusing on the desktop, because my focus is turning the mockup into a reality, into the finished product. And everything else that is related to “mobile” or “tablet” or whatever smaller-screen-view comes with the use of CSS media queries. So that’s not the main problem, should not be the main concern.

Once I am done with the “desktop mode”, my goal becomes making that to be responsive and adaptive. Responsive, in this case, means some elements are stretchable/can shrink upon resizing. Adaptive means that layout changes depending on the size of the screen. And I am absolutely using the mobile mode from DevTools, it is not a “jank”, it is actually very useful, because I can choose from the dropdown what screen I want to emulate, including toggling the touch mode, or adding some throttling (also an underrated feature, because most people don’t really care about performance), etc.

Hope this answers your question!

Thanks! And, yeah, exactly. I think it all comes from people mostly using their own websites on desktop PCs, in full screen on a wide monitor (though some websites still have overflows–there is a visible horizontal scrollbar even on a wide screen). Or people who seriously hate dealing with CSS (most of them use frameworks) and are too lazy to debug. But, point is, it’s not hard. DevTools is super easy to use to detect all kinds of problems: be it from HTML, styling, scripting, cookie related, performance, etc.

If there is a website (yours or someone else’s) that has an overflow issue and you don’t know how to fix it, you can share the link and I will take a look, try to fix it, and reply with a solution.

Alternatively, if you have any related questions, feel free to ask and I will try to answer them.