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.

How do you know it’s for this specific problem without ever trying it yourself? Plus, that website is bloated, crazy slow (1min+), and keeps downloading data even after the page has fully loaded. It is a perfect example of why the modern web is terrible. On the other hand, this post shows how to solve the problem, and it could perhaps aid in boosting your CSS skills for free.

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.

I do think the consumer market might still look depressing in upcoming years, but I don’t think there will be one AI company left. I mean, even if we don’t take it literally, like I also wanted to mention how OpenAI gets to build its fabulous data centers while Anthropic just signs partnerships, and both LLMs (ChatGPT and Claude) are good and competitive. And don’t forget about FOSS models like DeepSeek.

There is something those companies aren’t loud and clear about, like they don’t talk about architectural bottlenecks, that what they need is not scaling but an architectural shift. And once photonics enters the game, should we expect the prices[*] to drop or will they justify it by even more compute power.

[*] edit: I mean LLM pricing (tokens), not chips

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.

AFAIK, before AI it was COVID coupled with cryptomining, yet the only thing it hurt was GPU prices going up, not DRAM. Now, we have both GPUs and RAM sticks costing as much as a decent PC that you could build at least two years ago… yeah, I am somewhat hurt over my dream of building a high-end battlestation, which might not come to reality anytime soon.

nobody is going to get sued

I gotta agree with you, because the people who are currently suing memory makers seem to be names I’ve never heard of, maybe they are trying to cut some money for personal profit. But even Valve was frustrated with the way how they are unable to negotiate the prices, it’s like only a few companies can (like OAI, Anthropic, SpaceX, etc.), basically the ones who are currently “in control” of stock market prices.

It makes me think of when Epic Games sued Apple: at some point, there could be more “smaller” companies like Valve that would be frustrated with the situation enough to do something about it. Maybe we should boycott the use of AI (unlikely), maybe we should boycott buying next gen consoles (more likely), etc. We can do something about it if we, as a society, become more conscious about the situation, even though conscious consumerism sounds overly optimistic.