Read it easy released a new feature Class folding.
Class folding can fold the class attribute in HTML. This function solves the problem that CSS frameworks like Tailwind CSS make a mess in the class attribute. And it can make it easy to understand the HTML tree structure or the relationship between nested elements.
This article introduces how I define a new feature of my Electron app.
Comparison with Inline Fold, Tailwind Fold, and HTML Attribute Folder #
Inline Fold and Tailwind Fold are Visual Studio Code extensions and these extensions can also fold the class attribute in HTML. HTML Attribute Folder as a plugin for JetBrains IDEs can do as well.
Class folding will be a default function in Read it easy.
When Inline Fold or Tailwind Fold is enabled, all the class attributes in HTML are folded. You can unfold the values of a class attribute if you put the cursor on them.
Class folding can fold or unfold each class attribute. Fontend-engineers-friendly, isn't it?
Define UI/UX for class folding #
How does Read it easy let users know that all the class attributes are foldable?
If a downside triangle arrow icon ∨ is always visible, users can recognize its function available. But it's too noisy for all the class attributes to have the icons.
As a measure, a button is visible only when hovering over 'class' or the values of 'class'.
Users may not recognize the function of class folding at first. After the icons appear a few times, they will try and understand it.
It's good enough. Don't explain too much in advance.
Folding buttons of VS Code are also visible when hovering over the gutter. So, the part of the technical spec of class folding can follow Yakob's law, but the icon doesn't.
The downside arrow icon ∨ needs an additional region in HTML. It can follow Yakob's law but also increases the noise when reading the code. It's a trade-off.
Class folding applies the icon to the button surrounding 'class' with red.
It is difficult to define the UI/UX specs...