kodicraft

Glimmer of darkness

I press buttons until the light matrix shows colors I like. Currently working mostly with Elixir and Rust on various personal projects.

I'm the bitch who complains that the ending of Interstellar involves extremely inefficient transmission of information

http://keyserver.ubuntu.com:11371/pks/lookup?op=get&search=0x69d9eed60b242822
https://github.com/KodiCraft.keys



Osmose
@Osmose

And that is why editing JavaScript is more accessible than editing CSS to unfamiliar developers.

I was thinking about how browser DevTools are a significantly better environment for writing and modifying CSS than a text editor, and how the disconnect between your editor and the browser DevTools hurts that flow a lot1. And it kinda hit me that it's not nearly as unnatural-feeling for JavaScript because it's imperative and stateful in ways that CSS (usually) isn't.

Text is usually read in a specific order and proceeds through a series of events, commands, arguments, etc. depending on the topic. Posts start with a premise and work through the logic from start to finish, stories reveal information in an intended order (even if that order doesn't match the actual timeline of events in the story), and so on. It's a natural fit for imperative programming languages but less suitable to declarative programming languages, which benefit far more from interfaces that reflect an input and the generated output from the declared logic as quickly as possible and emphasizes the dependencies between declarations instead of the order in which they were defined.

Concretely, this is why browser DevTools by default show you the output DOM of a webpage and, when you click an element, immediately show you a list of all the CSS rules that applied to that element, which ones got overruled by other rules, etc. The view of the actual CSS as it was written is buried deeper because it's not really the useful format in which to view the logic.

One mild crossover is JavaScript hot reloading, which is incredibly useful for JavaScript applications but feels kinda declarative in nature. Accordingly, hot reloading requires either clearly defining hot-reload-safe boundaries (i.e. making guarantees about imperative logic that aren't able to be determined automatically) or building your app using declarative UI frameworks like React that enforce those guarantees2.

The only useful action I've come up with thusfar when thinking about this has been to introduce new developers to CSS by having them use the DevTools rather than starting with them writing a CSS file in a text editor. It really helps hammer home just how different a mindset you need to have when writing CSS vs the more-common experience of writing imperative logic.


  1. I'm late to this thought, by the way. VSCode can already bridge this disconnect with Edge and it's not surprising that at least some of the folks behind that are Firefox DevTools alumni.

  2. This is related to why React and other declarative JS frameworks are so weird if you've never worked with them before: they're bending what is typically an imperative programming language to function as if it was declarative and that's kinda weird.


You must log in to comment.