Webmasters Gallery

I keep bookmarking Adam’s GUI Challenges posts/videos and, before I even have a chance to review and link them up, another one is already published! Fortunately, the homepage for them on web.dev is a nice roundup.

For example, a recent one is the split-button component (article / video / demo). It’s one thing to have a design spec, code it up so it works and looks right, and call it a day. But, dare I say that real front-end development is thinking deeper than that. In just this one component Adam looks at:

• How the colors are set up and applied. The colors have a subtlety that makes them feel nice together. For example, the darkest colors are very dark versions of the base colors, but not black. It uses Custom Properties to set up a sort of menu of color combinations—but is, most importantly, set up for theming success as well.
• The menu uses shadows to impart an appropriate amount of depth. Because multiple themes are supported, the shadows don’t do anything embarrassing like, reverse themselves, i.e. light shadows on dark backgrounds that look silly, or dark-on-dark shadows.
• The use of SVG strokes (efficient! flexible!) which unlock CSS design options, like rounding the end caps.
• Clicks (active and hover states) should increase contrast.
• Everything is tested for keyboard usage. The menus open when tabbed to, and arrow keys move the focus within the menu which is accentuated by visual changes. A screen reader (VoiceOver, in this case) was also used to test things, for example using the ESC key to close the menu and remove focus is functional.
• Reduced motion preferences are honored by not doing as much movement while the menu the opens and closes.
• Visually, the only thing that opens and closes the menu is :focus-within in CSS. How simple! But aria attributes are still updated in JavaScript to properly express that.

That’s not everything, but that’s a lot, right? (The article has way more detail, including tools for inspecting what’s going on as it’s being built and small helper libraries that were used.) That’s what real front-end development is. Just “a button with a menu” has a ton of surface area to get right and dangerous implications for getting wrong.

If you like the idea of challenges, CodePen challenges you every week to build something along a prompt with ideas and resources. It’s fun because there are a bunch of people doing it with you, allowing you to see how others approached the same idea differently.

Direct Link to Article — Permalink

The post GUI Challenges appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.