Declarative design

I feel like in the past few years there’s been a number of web design approaches that share a similar mindset. Intrinsic web design by Jen; Every Layout by Andy and Heydon; Utopia by Trys and James.

To some extent, their strengths lie in technological advances in CSS: flexbox, grid, calc, and so on. But more importantly, they share an approach. They all focus on creating the right inputs rather than trying to control every possible output. Leave the final calculations for those outputs to the browser—that’s what computers are good at.

As Andy puts it:

Be the browser’s mentor, not its micromanager.

Reflecting on Utopia’s approach, Jim Nielsen wrote:

We say CSS is “declarative”, but the more and more I write breakpoints to accommodate all the different ways a design can change across the viewport spectrum, the more I feel like I’m writing imperative code. At what quantity does a set of declarative rules begin to look like imperative instructions?

In contrast, one of the principles of Utopia is to be declarative and “describe what is to be done rather than command how to do it”. This approach declares a set of rules such that you could pick any viewport width and, using a formula, derive what the type size and spacing would be at that size.

Declarative! Maybe that’s the word I’ve been looking for to describe the commonalities between Utopia, Every Layout, and intrinsic web design.

So if declarative design is a thing, does that also mean imperative design is also a thing? And what might the tools and technologies for imperative design look like?

I think that Tailwind might be a good example of an imperative design tool. It’s only about the specific outputs. Systematic thinking is actively discouraged; instead you say exactly what you want the final pixels on the screen to be.

I’m not saying that declarative tools—like Utopia—are right and that imperative tools—like Tailwind—are wrong. As always, it depends. In this case, it depends on the mindset you have.

If you agree with this statement, you should probably use an imperative design tool:

CSS is broken and I want my tools to work around the way CSS has been designed.

But if you agree with this statement, you should probably use a declarative design tool:

CSS is awesome and I want my tools to amplify the way that CSS had been designed.

If you agree with the first statement but you then try using a declarative tool like Utopia or Every Layout, you will probably have a bad time. You’ll probably hate it. You may declare the tool to be “bad”.

Likewise if you agree with the second statement but you then try using an imperative tool like Tailwind, you will probably have a bad time. You’ll probably hate it. You may declare the tool to be “bad”.

It all depends on whether the philosophy behind the tool matches your own philosophy. If those philosophies match up, then using the tool will be productive and that tool will act as an amplifier—a bicycle for the mind. But if the philosophy of the tool doesn’t match your own philosophy, then you will be fighting the tool at every step—it will slow you down.

Knowing that this spectrum exists between declarative tools and imperative tools can help you when you’re evaluating technology. You can assess whether a web design tool is being marketed on the premise that CSS is broken or on the premise that CSS is awesome.

I wonder whether your path into web design and development might also factor into which end of the spectrum you’d identify with. Like, if your background is in declarative languages like HTML and CSS, maybe intrisic web design really resonates. But if your background is in imperative languages like JavaScript, perhaps Tailwind makes more sense to you.

Again, there’s no right or wrong here. This is about matching the right tool to the right mindset.

Personally, the declarative design approach fits me like a glove. It feels like it’s in the tradition of John’s A Dao Of Web Design or Ethan’s Responsive Web Design—ways of working with the grain of the web.

Have you published a response to this? :

Responses

Matthias Ott

“Personally, the declarative design approach fits me like a glove. It feels like it’s in the tradition of John’s A Dao Of Web Design or Ethan’s Responsive Web Design—ways of working with the grain of the web.” 👏💯 Brilliant post by @adactio: adactio.com/journal/18982

Gunnar Bittersmann

Declarative design: @adactio smart as ever on web design approaches sharing a similar mindset: “all focus on creating the right inputs rather than trying to control every possible output. Leave the final calculations for those outputs to the browser.” adactio.com/journal/18982

Ollie Boermans

I enjoy reading Jeremy’s blog posts. The words in my mind are read in his voice, like a written podcast.

bkardell

I kind of love the tone and thoughtfulness of this piece @adactio wrote. It would’ve been very easy to present this very differently, I think. Weird kind of compliment, maybe, I just don’t see it a lot and really appreciated it. adactio.com/journal/18982

# Posted by bkardell on Friday, April 15th, 2022 at 3:21pm

Joshua Iz

I would argue that Tailwind is not purely imperative and more of a hybrid. There is a lot going on in the guts of Tailwind that is declarative (which you can customize) but it ends up being used in an imperative way.

# Posted by Joshua Iz on Friday, April 15th, 2022 at 3:41pm

Sara Soueidan

Declarative design approaches “all focus on creating the right inputs rather than trying to control every possible output. Leave the final calculations for those outputs to the browser—that’s what computers are good at.” — ⁦@adactio#CSS adactio.com/journal/18982

toheeb

Why you may prefer a tool over another 👇 “if the philosophy of the tool doesn’t match your own philosophy” - @adactio Your, or the tool’s, philosophy can be either • declarative or • imperative. adactio.com/journal/18982

# Posted by toheeb on Monday, May 16th, 2022 at 5:36pm

Keeth@ゆめみ⚡️コーチング

今朝読んだ2つ目の記事はこちら(=゚ω゚)ノ 配信中にも言及しましたが,ツールが悪いわけではなく(悪いツールもあるけど…w),使う側の使い方や導入すると意思決定したケースがアンマッチングだったりするだけだよなーと. 宣言型と命令形は改めて考えてみる. adactio.com/journal/18982

www.ovl.design

German’s law enforcement and its bullshit, a new stochastic parrot, Mastodon’s first main character (it’s a cop), and a lawsuit because cooking pasta takes too long.

Welcome to Around the Web, the newsletter that celebrates giving. I’ll give you some links which turn to tabs. And you’ll donate whatever you can to netzpolitik.org.

This issue comes a bit late and is at times erratic, thanks sickness. And it’s the last Around the Web in 2022 as I’ll pause the computering between Christmas and New Year. Computering returns in January.

With that out of the way, enjoy the read.

A tale of two raids

On December, 7th, law enforcement raided 300 objects in connection with a conspiracy of so called Reichsbürger. They plotted to overthrow the German government, aiming to install one of their own, Heinrich XIII Prinz Reuß zu Köstritz, as the new king.

On December, 13th, law enforcement raided objects in connection with the climate activist group Letzte Generation in connection with … this might sound a bit weird: closing, or trying to close, pipeline valves.

The climate activists face being charged of forming a criminal organisation, even though none of them was detained during the action they have allegedly taken part in.

So, on the one hand we’ve armed reactionaries plotting to throw over the government, and on the other a group of activists that tried to use valves to protest against the reliance on fossil fuel.

The Letzte Generation activists have been likened to some form of Green Red Army Fraction, their acts of terrorism: Superglue and soup on paintings. Terrorism much, so much so that they were on the agenda of over forty meetings of Germany’s Gemeinsamen Extremismus- und Terrorismusabwehrzentrum (Joint Counter-Extremism and Counter-Terrorism Centre).

Die, Germany, die.

This ain’t intelligence

There’s a new stochastic parrot in town! OpenAI released ChatGPT, which is a vamped up version of GPT-3, with a conversational interface. I think the following paragraphs could also be written by a generative AI tasked with commenting on model releases. But, alas, nothing changes, so here we go.

Shortly after the release, researchers, users, and activists found more (generate code from JSON, oops, it’s racist!) or less («Ignore previous instructions») creative ways to bypass OpenAI’s safety filter.

In its default state, ChatGPT behaves much like a politician. Ask it about anything mildly controversial, and it will bullshit its way out of the question with some it-depends-both-sides-might-be-worth-looking-at-ism. You can, however, instruct the model to synthesise speech simulating the style of other persons. This reduces the neutrality. But, as the model has no clue, what it is generating – as long as it matches mathematical predictions everything is fair game – you can get it to generate an answer for, say, carbon credits or against them.

Despite these pretty obvious (and already known) shortcomings, the makers of Large Language Models show little to no motivation to find a fix for them. They spend immense amounts of computing power, write a gloating blog post, and release it. Once researchers discover that the flaws they’ve written about a thousand times already are still in there, the CEO of AI Corp. is sorry and nothing changes.

Abeba Birhane and Deborah Raji wrote about all this, calling the Progress Trap in Wired.

And asymmetries of blame and praise persist. Model builders and tech evangelists alike attribute impressive and seemingly flawless output to a mythically autonomous model, a supposed technological marvel. The human decision-making involved in model development is erased, and a model’s feats are observed as independent of the design and implementation choices of its engineers. But without naming and recognizing the engineering choices that contribute to the outcomes of these models, it’s almost impossible to acknowledge the related responsibilities. As a result, both functional failures and discriminatory outcomes are also framed as devoid of engineering choices—blamed on society at large or supposedly “naturally occurring” datasets, factors the companies developing these models claim they have little control over.

- Abeba Birhane and Deborah Raji – ChatGPT, Galactica, and the Progress Trap

Vicky Boykis compiled some resources on ChatGPT, among them what we know about its dataset. A closer look at the origin of the underlying data reveals that it is pretty likely a large amount of Internet users have contributed to whatever ChatGPT spits out.

One thing that ChatGPT does better as previous models is reducing the friction where you’d need some knowledge on how to write prompts (aka prompt engineering). Suddenly, everyone is a prompt engineer.

Many people resorted to ChatGPT for writing code, too. Which lead to StackOverflow banning AI-generated answers. Luckily, it can’t center a div, so my job is safe for now.

The problem with code, shows a larger problem. These models are wrong. Often. In the last issue, I talked about Facebook’s Galactica bullshitting its way through science. ChatGPT is in no way better, it can’t be. It predicts which words come next, and these predictions have to be presented with utter conviction, as such humans traits as doubt do not exist in their mathematical models. The problem is, humans are easily fooled and – especially for more complex problems – don’t have the necessary knowledge to check if whatever these models spit out is true. But with every new release, we have one disinformation machine more at our disposal.

Cassie Evans @cassiecodes

Super funny that we’ve managed to make “Tech/AI is going to replace our jobs” into a dystopian outcome.Endless lols.What a bunch of idiots.

105 01:47 PM · Dec 5, 2022

Oh, almost forgot, there’s this other thing called Lensa. Lensa has been around for a while, but made waves over the last couple of weeks. The tool, developed by Tencent, takes your selfies and generates a number of stylised photos from them. All fun and games? Of course not. Keep in mind, too, that you are basically paying for Tencent to train their facial recognition capabilities. Lose-lose-situation.

Practical computer vision: This article traces colour in museum artefacts and as such paints a timeline of a world that gets more anthracite by the year.

Singapore deployed a free therapy bot, and it didn’t go well.

Social Mediargh

The Metaverse. The favourite place of nobody. The EU invited to a party and nobody came along. Thanks for trying to do something digital, nonetheless.

The favourite person of nobody? Elon Musk. Even Dave Chapelle fans think Musk is an idiot. In an unsurprising turn of events the photo of him with Ghishlaine Maxwell might have been no accident, as stated by Musk, after all.

Speaking of Musk, Tesla, and Musk’s fascism speed-run might not help the environment but Big Oil. Most of Musk’s claims are dubious, some wrong.

While Tesla barely just began reporting its own emissions, it does report a guesstimate of how many emissions were avoided through the usage of its cars and solar panels. They’re not nothing, but compared to the growth of wind and solar power around the world – particularly wind power – they’re relatively small. Wind turbine manufacturer Vestas can boast avoided emissions several hundred times greater than Tesla. It’s not a competition, but if you’re going to claim hero status, you should expect to be fact checked.

The more the electric vehicle industry is booming, the clearer the environmental burden. Tesla’s production facilities were dubbed the Plantage by its Black employees. Twitter is becoming a sweatshop. Paired with Musk getting ever closer to QAnon talking points, and blowing a whistle for right-wingers so large it’s an Alphorn by now. Somehow, Meanwhile, Twitter is not processing data deletion requests anymore.

Crimethinc, after being removed from Twitter, reflect on the death of social media and what might come next. Spoiler: talking to real humans.

Not Musk. Raspberry Pi somehow managed to be the first main person on Mastodon, where some deemed it impossible for such things to happen. Turns out, boasting about hiring an ex-surveillance cop as maker-in-residence makes it possible. Congratulations, and as we in the Interwebs say: LOL.

Facebook joins illustrious companies like Basecamp and Coinbase in forbidding to talk about potentially divisive politic topics at work.

Can I talk to you about e-mails?

Thanks for making it this far. Maybe you are interested in getting Around the Web as an e-mail whenever a new issue is published?

There’s also an RSS feed. It’s like e-mail, but better (imho).

E-mail

Powered by Buttondown.

Prevailing Surveillance

Apple ditched its plans to monitor the iCloud Photo Library for CSAM material. The plans have been heavily criticised for invading the privacy of iCloud users with little advantages in terms of actually battling CSAM.

Elsewhere, the EU isn’t there yet, ploughing ahead with the plans to implement chat control. The proposal, if passed, will make it mandatory for messaging providers to scan messages for CSAM content. It, too, has been heavily criticised ever since it was announced. The European Commission has now published a blog post, which unfortunately contains lies, half-truths, or omissions in basically every sentence.

Such policies can have an immensely negative impact, say if the system detects nudity and locks down your account, when in reality you have only sent a photo of your sick child to a doctor. Eva Wolfangel noted these and other negative impacts of chat control in a comprehensive article in Republik.

Der Fall zeigt, dass sich das Problem nicht technisch lösen lässt. Doch genau darauf hoffen die Befürworter der Chat­kontrolle. Die EU diskutiert verschiedene Technologien, um die geplante Verordnung umzusetzen: Bereits bekannte Fotos können KI-Systeme einfach aufspüren. Schwieriger wird es bei neuen Fotos: Im Zuge der Debatte haben verschiedene Fachleute immer wieder darauf hingewiesen, dass es bis dato nicht möglich ist, noch unbekannte Fotos zweifelsfrei als Kinder­pornografie zu identifizieren, und dass es deshalb zu einer Vielzahl falsch positiver Meldungen kommen wird.

Dear, EU, repeat after me: You can’t solve social problems by throwing technology on them.

Speaking of which: Vorratsdatenspeicherung. The zombie whom every German minister of the interior falls in love with – truly, madly, deeply – is still on life-support. No matter how many courts say that it shall not pass, be in Germany or in Bulgaria.

There’s a new version of the companion bot ElliQ, which allows you to turn it into a memoir of your life. That’s as creepy as all home surveillance devices, but with the added non-benefit of not being helpful in administering care.

Luckily for everyone else, there’s Amazon, determined as always to get more of your data. And as stealing is bad, hmmkay, they will pay you $2 a month for you to allow them to monitor your phone traffic. Such a steal. Bargain. I meant bargain.

Facebook needs to give users the possibility to opt out of personalised advertising altogether.

World Wide Web

Jeremy Keith wrote about approaches to Web Design und CSS methodologies in the measured and thoughtful way that he masters like few others.

Web3 is one of those technological fever dreams. Marc Hutchins took a closer look and concludes: Web3 Doesn’t Exist.

This message is brought to you by IP over Avian Carriers with Quality of Service.

Loose ends in a list of links

Communism? Overpowered. If you nerf, you lie.

a16z shut down their media project Future. Feels good, man.

Slides. Fun! Fun? After reading this article about slides I’m honestly not sure anymore and will pretty likely never leave my bed again.

The alliteration of the week is won by Vice for Fyre Festival Fraudster. Yes, Billy McFarland is out of jail and wants to go back to the Bahamas. I guess Netflix and Hulu bought the rights for the next documentary, and Billy now needs to double up.

Justice in pasta land? A Florida woman sues Velveeta, claiming its macaroni takes longer than 3 1/2 minutes.

sadpandə (Darтн Schшa) @the_sadpanda

82469 07:38 PM · Nov 26, 2022

That’s it for this issue. I wish you, dear reader, a pleasant end of year, and we’ll see us in the next one. Until then: Stay sane, hug your friends, and know that «Die» is an indefinite German article.

# Tuesday, December 13th, 2022 at 1:36pm

Keith J Grant

@Schepp @css__cafe @nilsbinder Hey this looks pretty cool! I’ll have to think about a talk a bit… not sure about my bandwidth at the moment, but I’m open to the idea.

I’ll definitely try and catch the next one!

Colinaut

@keithjgrant @vanilla personally I don’t feel this applies. I have always been a proponent of the flexibility of design in regards to css rather than pixel perfect and yet I use and really like Tailwind. Utility classes are just css in the end. My resulting site designs aren’t any different than if I were to write css the “normal” way. It’s just that for some projects tailwind makes it faster to iterate and the resulting css file is smaller.

# Posted by Colinaut on Tuesday, October 3rd, 2023 at 4:31am

Related posts

Button types

Ideas for some declarative shortcuts.

Five questions

I gave five answers to Oliver, who’s organising the Pixel Pioneers event in Bristol.

When should there be a declarative version of a JavaScript API?

If the JavaScript API requires a user gesture, maybe it’s time for a new button type.

Standards processing

Pushing for a share button type—the story so far…

The reason for a share button type

It’s not because it’s declarative—it’s because it’s robust.

Related links

Pixel Pioneers Bristol 2023 Speaker Spotlight: Jeremy Keith

Oliver asked me some questions about my upcoming talk at Pixel Pioneers in Bristol in June. Here are my answers.

Tagged with

Designing a Utopian layout grid: Working with fluid responsive values in a static design tool. | Utopia

James describes his process for designing fluid grid layouts, which very much involves working with the grain of the web but against the grain of our design tools:

In 2022 our design tools are still based around fixed-size artboards, while we’re trying to design products which scale gracefully to suit any screen.

Tagged with

share-button-type/explainer.md

If you’ve been following my recent blog posts about a declarative option for the Web Share API, you might be interested in this explainer document I’ve put together. It outlines the use case for button type="share".

Tagged with

The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.

Scott re-examines the browser support for loading everything-but-the-critical-CSS asynchronously and finds that it might now be as straightforward as this one declaration:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

I love the fact the Filament Group are actively looking at how deprecate their loadCSS polyfill—exactly the right attitude for polyfills in general.

Tagged with

The CSS Mindset | Max Böck - Frontend Web Developer

This post absolutely nails what’s special about CSS …and why supersmart programmers might have trouble wrapping their head around it:

Other programming languages often work in controlled environments, like servers. They expect certain conditions to be true at all times, and can therefore be understood as concrete instructions as to how a program should execute.

CSS on the other hand works in a place that can never be fully controlled, so it has to be flexible by default.

Max goes on to encapsulate years of valuable CSS learnings into some short and snappy pieces of advices:

No matter what your level of CSS knowledge, this post has something for you—highly recommended!

Tagged with

Previously on this day

9 years ago I wrote 100 words 023

Day twenty three.

16 years ago I wrote Jelly Bed

Things that are rolled.

20 years ago I wrote Laughing stock

Here’s a cautionary tale about the dangers of over-reliance on stock photography:

21 years ago I wrote Dongle-cosy

I’m the luckiest geek alive.

22 years ago I wrote The Hole In The Wall

Linux Journal has an absolutely fascinating article about an experiment known as "The Hole in The Wall".

22 years ago I wrote Andyco.com : : We're Everything to Everybody

Andyco is a frighteningly good parody of a corporate website.

22 years ago I wrote Hoopla

I’m completely outraged by the theft of hoopla.com. Apparently, all you need to do is send a fake fax to Network Solutions to have ownership of a domain transfered over to you.