CSS Demo Critiques

CSS Grid Generator

Demo link: https://cssgrid-generator.netlify.app/

This demo is pleasant to look at. The buttons and text in the right-side panel are sensibly grouped and nicely aligned with each other and with the main demo box. The repetition of the turquoise color is unifying.

The demo is reasonably learnable. The mouse changes to all-scroll when hovered over the main demo box, indicating a click-and-drag affordance and encouraging the user to try it. The simplicity of the layout and the styling on the buttons labeled "Please may I have some code" and "What does this project do" make it obvious where to look for information.

A few usability issues: the demo is not very efficient as a teaching tool. After using it for a bit, I didn't have a confident mental model for how the grid-area property and four, slash-separated number values work. The relationship between the CSS and the div positions still seems nonobvious to me. Moreover, the very act of looking at the source code that generates the grid obscures my view of the grid itself, so I have to open and close the popup to try to guess the relationship.

Some suggestions: make the demo and the corresponding CSS simultaneously visible, and have the CSS update each time the user draws a new box so that the feedback is fast. I would also appreciate if the demo didn't call me a goofball.

I suppose that's one way to tell me that fr is a CSS unit.

Gradient Generator

Demo link: https://www.joshwcomeau.com/gradient-generator/

This demo is very usable. The controls are intuitive — the angle adjustor is circular, the precision adjustor is a slider, and the color adjustor provides both a color picker and a hex input box. Operations like adding or deleting a color (common case) or choosing a preset easing curve (aiding with a potentially new tool, the Bezier curve) are simple and clearly labeled. The feedback is immediate, both in the demo and in the corresponding code.

I was going to say that the demo does not do a good job of teaching. For example, changing the color mode only amounts to some numerical value changes in the CSS while it continues to use hsl. This confused me a bit, and it doesn't tell me much about the different color modes or teach me how I would make the change in my own code.

However, I noticed a link to blog post explaining the relevant concepts, like the differences between the various color modes, the fact that CSS uses RBG interpolation, and the JavaScript workaround used to imitate the other color modes, which answered all my questions. I think separate blog post is a good way of saving space to maximize the demo's usability while preserving the details for people who are interested.