Postmodern Front-End
or just use CSS lolMade with love and pure HTML+CSS by Artyom Bologov (slides@aartaka.me)
Identity
Artyom
- Is lazy.
- Bipolar.
- Interested in Turing tarpits and using tech in unintended ways.
- Is an HTML/CSS extremist.
- Doesn't understand what modern, postmodern, metamodern, and hypermodern are.
Postmodern?
Postmodern 2?
Any definition will do, so here's the one I liked:
If there is a common denominator to all these postmodernisms, it is that of a crisis in representation: a deeply felt loss of faith in our ability to represent the real, in the widest sense. No matter whether they are aesthestic [sic], epistemological, moral, or political in nature, the representations that we used to rely on can no longer be taken for granted.
Postmodern Front-End?
- We no longer can rely on modern tech (like React) because it's stagnating (see Niquola's htmx seminar.)
- We need to find some other way to do interfaces.
- So why not get radically simple/primitive while we're at it?
- Like getting back to the basics. Vanilla Web Platform stack—HTML, CSS, and maybe some JS.
Post-presentation notes
Only after this talk was I introduced to Postmodern CSS. Not sure if we're talking the same thing with them. But the name clash is worth noting.
Snapping Fragments / Carousel
You already see one!
But, in case you need more,
MDN has more!
html {
scroll-snap-type: y mandatory;
}
section, footer {
min-height: 100vh;
padding: 1em;
background-color: var(--bg);
scroll-snap-align: start;
}
Autocomplete
Post-presentation notes
Notice that calling this "autocomplete" is not necessarily right. Autocomplete is a lot—smart just-in-time suggestions, dynamic content reloading, etc. This is a rather simplistic approach (that works nonetheless!)
Tabs
Est voluptates harum excepturi qui at. Dignissimos repellendus et ad sit veniam saepe sit libero. Ullam qui laboriosam consequatur similique facilis deleniti. Itaque iste est blanditiis laborum.
Velit esse molestiae eveniet ipsa alias tenetur corporis. Quo quia dignissimos et quisquam fugiat maxime voluptate. Aut nemo iste blanditiis amet saepe. Voluptas molestias enim ab veniam eligendi. Aperiam id qui sint nemo.
Accusamus minus rerum perspiciatis sit aut qui autem. Fugiat corporis aliquid cum. Et in distinctio nesciunt autem ut debitis impedit quo. Quibusdam incidunt praesentium itaque id est consequatur quibusdam dolor. Aspernatur ea qui aut quam ea quis qui voluptas. Harum enim natus et quia.
Temporibus quo nulla iusto. Fugiat autem nam at. Molestiae qui est ab voluptatibus modi voluptates dolor. Praesentium cumque est ut est aut blanditiis quo qui. Inventore eos voluptatem numquam perspiciatis modi.
Libero aperiam error beatae. Ad suscipit voluptas quasi amet quisquam. Praesentium animi repellendus tempora provident omnis sed totam sed. Et quis possimus doloremque mollitia.
Post-presentation notes
This, as one of the people in the audience mentioned, is not an accessible tabs widget. And it's not the snappiest way to implement it either—radio button tabs might work better for your case. Still, I'm including it for completeness. And for you to check out the sources and get horrified at CSS selectors I'm using.
Resizing
| Clear In the clear domain there are tight constraints, no degrees of freedom, and best practice can be used to sense, categorize and respond | Complicated In the complicated domain there are governing constraints, problems are tightly coupled, and appropriate good practice should be used to sense, analyze and respond |
| Complex In the complex domain there are enabling constraints, problems are loosely coupled, and one should use emergent practice to probe, sense and respond | Chaotic In the chaotic domain there is a lack of constraints, the problems are de-coupled, and one creates novel practice by acting, sensing and responding |
Variables/custom properties
/* Dark theme. */
@media (prefers-color-scheme: dark) {
:root {
--bg: var(--dark, black);
--fg: var(--light, papayawhip);
--accent: var(--dark-accent, lightcoral);
--on-accent: var(--bg);
--gray: var(--gray, lightgray);
}
* {
font-palette: dark;
}
}
Post-presentation notes
I used this (and the next) slide to mock SCSS. But it was rightly noted that SCSS does more than just vars and nesting. There is even some control flow there! Still, these advanced features are rarely useful for the interfaces I'm working on. So I have all the right to mock it for myself.
Nested rules
pre#nested {
code {
background-color: var(--accent);
color: var(--on-accent);
}
&:hover {
background-color: var(--accent);
color: var(--on-accent);
}
}
Note that it only gained major browser support in 2023, so it's relatively unreliable.
Custom Elements (JS Warning!)
This is a sorted list. It starts out as 3-2-1 unsorted sequence, but gets sorted in a short while. Notice that the timeout is mostly so that you notice the whole sorting thing. The element itself renders in ~2 milliseconds
Post-presentation notes
There are reasons for why Custom Elements didn't take off. I'm still waiting for links about that. I'll include these links here when I get them.
Cons of Postmodern Front-end
- Requires modern (фить-ха!) browsers (2019+)
- Styles of HTML elements vary between browsers.
- Not many people know the APIs.
- It is conceptually dependent on Modern Front-end.
Metamodern? Hypermodern?
Metamodernism reflects an oscillation between, or synthesis of, different "cultural logics" such as modern idealism and postmodern skepticism, modern sincerity and postmodern irony, and other seemingly opposed concepts.
Hypermodernity (supermodernity) is a type, mode, or stage of society that reflects an inversion of modernity. Hypermodernism stipulates a world in which the object has been replaced by its own attributes.
Metamodern, actually!
Now, throwing away all the things previous Web Design generations generated is not fun. Luckily, Postmodern Front-end is compatible with most of the previous generation tech! You can even use these new CSS goodies from inside React! (I didn't tell you that.)
That's what Metamodern Front-end means: we don't have to forget the past. And we don't. Let's just pick whatever works.
But not React, please.