about the level of abstraction in web development

[u/TurdOnTurtle3000]

Beginner here, I have been learning to code for a few months now and decided to build a website with css, html and js. While it is quite easy to get started, once you try to get a little bit more low level, it seems really hard. In my example I want images to zoom in or out in a specific way and just don't know how to approach that problem, since most things in css have a pretty high level of abstraction. This is coming from someone who played around a little with graphic-librarys (SFML3) to make silly games, where you have to make most of the things from scratch. I enjoyed that, since I barely had to look up anything once I understood all the low-level stuff, which gave me a loot of freedom (and headaches, admittedly). My question now is: Is there is a way of creating websites on a lower level, is the problem I described common among other devs, or do I just need to shut up and learn the basics?

[u/spcbeck]

HTML, CSS, and JavaScript are about as low level as you can get for web tech, unless you want to learn WASM (don't do this as a beginner). Keep at it with HTML/CSS/JS, build something cool with that, then maybe pick up a framework like Vue (which is friendlier to people who know HTML/CSS/JS), React, Solid, etc.

[u/Jumpy_Quote_5850]

it's not just a beginner thing, the jump from controlling every pixel in a game loop to css's layout model is jarring. you're basically trading manual control for a declarative system that decides a ton for you, which is great until you need something it doesn't want to do

you can get closer to the metal with canvas and webgl if you want that immediate mode feel back, but for most ui work you just end up building a mental library of weird css tricks and accepting the headaches come from a different place

[u/TurdOnTurtle3000 → u/Jumpy_Quote_5850]

thanks for the suggestion

[u/Amazing-Switch-7163 → u/Jumpy_Quote_5850]

Yeah, you basically need to remember all the CSS tricks for doing things, since it is not really intuitive or discoverable.

[u/ofasooo]

Nobody's actually answered the zoom bit so I'll take that one.

For an image scaling in a specific way you want transform, not the layout properties you've probably been fighting. transform: scale() plus a transform-origin, and then a transition or keyframes if you care about the curve, which it sounds like you do. The reason it feels different from the rest of CSS is that it skips layout entirely and runs on the compositor. So it's the one corner where you do get frame level control.

And if it's the curve specifically that's annoying you, cubic-bezier is where the manual control hides. Four numbers and you own the whole easing. That's most of what people are reaching for when they go looking for something lower level.

On canvas, since it came up already. It genuinely gives you the immediate mode feel back and I do use it, but the price is higher than it sounds. Everything the browser was quietly doing becomes yours. It's blurry on any retina screen until you scale the backing store by devicePixelRatio, which catches everybody once. Text is your problem now. And a screen reader just sees one empty box where your whole thing is.

So I'd keep it for the part that actually needs a loop and leave the rest as DOM. The mixing is where I've lost the most hours anyway, more than either side on its own.

[u/TurdOnTurtle3000 → u/ofasooo]

Maybe I'll give it a try, thanks for the explanation!

[u/BobJutsu]

I’ve never thought of CSS as “abstracted”. I mean, libraries (your own, or commercial) can abstract away a lot behind classes. But css itself is not.

[u/forever-butlerian → u/BobJutsu]

CSS is pretty abstract since it's operating against the DOM and not doing pixel-by-pixel canvas rastering.

[u/calimio6]

Can you at least describe what you are trying to accomplish? Because the web is quite powerful these days, even for more advanced stuff you have webgl and related libs like threejs for easier manipulation.

[u/horizon_games]

Just wait for first class HTML elements in <canvas> and do everything like it's 1990s Flash

https://developer.chrome.com/blog/html-in-canvas-origin-trial

[u/abeuscher]

Use those tools because that is how websites get built. Look up CSS transforms and CSS animation. AI is a great learning tool in the sense that it can break down any effects you can find on another website and show you a working example. Write your own code so you learn, but you can use an LLM to decipher the missing piece you are looking for here on your own and faster.

It's not hard to do. It gets really hard really fast if you try and sidestep the initial learning curve; all the tools that attempt to make the process easier inevitably make it harder to understand and harder to execute well.

[u/SchartHaakon]

I mean there are ways to achieve that level of control that you are looking for without most of the abstractions of html and css by just using a canvas element and manually painting it through javascript

[u/forever-butlerian]

I recommend proposed solution three, which is to shut up and learn the basics. The fastest way to learn something is deliberate practice. Practice requires that you start with the basics. Your initial sense was correct.

[u/Legitimate-Let-7510]

HTML/CSS/JS are already pretty close to the metal for normal web development. Resist dropping into WASM or canvas just because CSS feels limiting, learn why the browser is making the decisions it is first cause a lot of the frustration starts making sense once flexbox, grid, positioning, and the rendering model click.

[u/Flacid_Fajita]

Not really. The browser a website runs in is intentionally very abstract. By design the code that powers a website runs in isolation from each of your other tabs, and from the rest of the computer itself.

You can write your code and then compile it into web assembly, which is perfectly viable, and you can also build static sites and server render sites where the code you right executes on the backend, or only runs once when you generate the site, but these aren’t always practical, and they don’t eliminate the need for HTML or CSS, they expose them via another language.

In general developing for the browser is a fragmented, sometimes frustrating experience. Web development has been around for a long time, some of the design decisions hold up poorly, but they’ve become standards, and it’s hard to justify replacing them.

[u/Lord_Xenu → u/Flacid_Fajita]

This is inaccurate. Tabs from the same origin can very much talk to each other, in multiple ways. 

[u/horizon_games → u/Flacid_Fajita]

Tab communication if you wanted to learn some of the neat new standards https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

[u/who_am_i_to_say_so]

You don’t need to get much lower level if you just find the right library. The library will be the abstraction.

[u/Sea-Ad-9942]

Codepen is your friend. No need to reinvent the wheel.