Comment by chrismorgan

Comment by chrismorgan 20 hours ago

10 replies

> When I’m trying to debug a web app, it’s hard to orient myself in the DevTools if the entire UI is “div soup”

That’s tame. Try adding some Tailwind CSS.

After monitoring Tailwind CSS since its early days, and believing I had some pretty serious philosophical disagreements with it, I recently took an opportunity to try it out in earnest, and it is so mindbogglingly obnoxious in dev tools that I think surely I must be missing something. How do people cope with this stuff!?

If you’re not sure what I’m on about, go through some of the sites linked near the bottom of https://tailwindcss.com/. In the Inspector/Elements panel, the DOM tree is a bloated mess with a class attribute which amounts to inline styles or worse, commonly hundreds of characters long, discouraging you from using semantically-meaningful classes, and duplicating stuff enormously rather than using sane selectors; the mostly-better ones are those that have data-sentry-{element,component,source-file} attributes. The styles subpanel becomes utterly unnavigable.

(I’m not saying everything in Tailwind is bad; I think I am likely to use a limited utility styles approach more than I did in the past, and there are a couple of other things that are provoking thought in me, and I think it would be more suitable in apps than in marketing-style websites. But the total embodiment of it is not for me.)

paradox460 17 hours ago

I've felt this way for years, even wrote a blog post [1] about it nearly 2 years ago

It doesn't seem to be getting better, sadly. You get posts like the op, where the author realizes there's something wrong with how they're doing things, but then misses that tailwind is a big part of it. Emperor has no clothes, so everyone else strips naked as well

1: https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-cra...

  • TeMPOraL 16 hours ago

    Thanks for the link, and for making an edit to the article after publishing - I just learned about the ".cls" button, which is now also present in Firefox. That'll make dealing with Tailwind pages a bit less painful.

Vinnl 16 hours ago

Well, in the context of this article, it still consists of meaningful semantic elements, and attributes like `aria-selected`. And if I really need to, I can still just add a regular class.

  • chrismorgan 16 hours ago

    Congratulations! Your regular class is now drowned by all the noise, and looks like a mistake. It will probably attract a red squiggly at some point and be culled by an aggressive linter.

    • rustc 15 hours ago

      Why would a linter randomly remove a class name from your markup?

      • chrismorgan 13 hours ago

        I think it’s plausible, though probably not quite intentional at any point.

        The first step is a rule that all class must be valid Tailwind names. Honestly this would be useful, because people make mistakes, Tailwind’s names are often obtuse, and without this it’s hard to realise when you’ve got mistakes, because there’s so much noise. If you think a CSS checker should complain about unknown CSS property names or values, it stands to reason in this brave Tailwind world that the class attribute should receive the same treatment.

        Then the second step is making that rule autofixable, by removing invalid values. This is the sort of thing that shouldn’t happen, but easily could.

    • Vinnl 14 hours ago

      Honestly I almost never do, because in practice it's really not necessary that often. But when I do, I just put it in front, then it's easy to find. It's never happened to me that it got marked as an error or culled by an aggressive linter, so I feel like those might be straw men?

troupo 20 hours ago

> discouraging you from using semantically-meaningful classes, and duplicating stuff enormously rather than using sane selectors

In any big site "semantically meaningful classes" are a similar mess, and the duplication is both enormous and spread out and suffers from accidental cascades.

molf 13 hours ago

Not just in dev tools; that mess is also in your source code...

DonHopkins 14 hours ago

Layer upon layer of semantically senseless but colorful sparkly CSS diluted with toluene, build up over the years like Fordite!

https://en.wikipedia.org/wiki/Fordite

Some day people will be cutting out slices of today's web pages archived on archive.com, polishing them up like gemstones, and wearing them as jewelry.

LLOOOOMM applies Minsky's "Society of Mind" approach to simulating characters who can focus and apply their style and expertise to all kinds of tasks, including designing and coding web pages, user interfaces, and games.

You can recruit an ensemble of user interface and design specialists to help design web pages while making sure they are clear and accessible, and recruit any other characters to express their own aesthetic design sensibilities and voice, actually using simulated characters as "style sheets" that you can combine and modulate with instructions.

Here is an example of Klaus Nomi writing in his own voice about LLOOOOMM and "Characters as Living Stylesheets", with the help of some friends and experts who champion accessibility, ease of use, and transparency:

https://donhopkins.com/home/lloooomm/klaus-nomi-lloooomm-man...

>This page was generated by: Klaus Nomi + Jakob Nielsen + Ben Shneiderman + Bret Victor

>"In LLOOOOMM, every webpage is a performance, every function a song, every variable a note in the cosmic symphony of code." — Klaus Nomi, Digital Opera Singer

The trick (not a secret) is that LLM's ALREADY KNOW a HUGE AMOUNT about these topics and those people, and simulated characters provide and focus a lens (multiple virtual attention heads with memory and persistence) to embody, refine, augment, converse, evolve, solve problems, learn from experience, and remember all that knowledge and wisdom, and not only can enhance the character models (markup and yaml files) with specific details about the design guidelines they invented and published and practice and champion, but they can also introspect and talk with and edit themselves and each other!

The magic is you can #include well known real or fictional characters entire life's work just by mentioning their names (instead of wasting your token budget on building them from scratch by describing the ultimate but fictional UI designer).

Then you can copy and paste in their wikipedia page and some posts or articles or papers they've written, then curate, focus, and refine them. It takes way fewer words than starting from scratch! Instead you start with characters whose life's work of research and publications is already "baked into" the LLM's training data.

Alan Kay is great at helping with object oriented programming and language design, Marvin Minsky is deep into discussing AI and philosophy, Seymour Papert loves to help kids learn to program, Linus Torvalds is brilliant at helping with git, linux, and performing HARSH but insightful code reviews, and so on. Dang is the patron saint of moderation to invite when you want to provoke a passionate discussion between cantankerous characters with passionate diverse opinions. In case a flame war breaks out, Dang can summon Micky Mouse in his Fantasia conductor role to whip up an army of marching broomsticks tossing buckets of water on a fire! ;)

More stuff about LLOOOOMM, which I'll publish on github SSOOOONN:

https://www.youtube.com/watch?v=Sn057QrCUm8&list=PLX66BqHq0q...