I keep bookmarking Adam’s GUI Challenges<\/a> 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<\/a> is a nice roundup. <\/p>\n\n\n\n\n\n\n\n

For example, a recent one is the split-button component (article<\/a> \/ video<\/a> \/ demo<\/a>). 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<\/em> front-end development is thinking deeper than that<\/a>. In just this one component Adam looks at:<\/p>\n\n\n\n

• 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\u2014but is, most importantly, set up for theming success as well.<\/li>
• 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.<\/li>
• The use of SVG strokes (efficient! flexible!) which unlock CSS design options, like rounding the end caps.<\/li>
• Clicks (active and hover states) should increase<\/strong> contrast.<\/q><\/em><\/li>
• 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<\/kbd> key to close the menu and remove focus is functional.<\/li>
• Reduced motion preferences are honored by not doing as much movement while the menu the opens and closes.<\/li>
• Visually, the only thing that opens and closes the menu is :focus-within<\/code> in CSS. How simple! But aria<\/code> attributes are still updated in JavaScript to properly express that.<\/li><\/ul>\n\n\n\n

  That’s not everything, but that’s a lot<\/em>, right? (The article<\/a> 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. <\/p>\n\n\n\n

  ---

  \n\n\n\n

  If you like the idea of challenges, CodePen challenges you every week<\/a> 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

  I keep bookmarking Adam’s GUI Challenges posts\/videos and, before I even have a chance to review and link them up, […]<\/p>\n","protected":false},"author":3,"featured_media":355619,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"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!","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[870],"class_list":["post-355016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-learning"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/gui-challenges-video-character.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":301269,"url":"https:\/\/css-tricks.com\/a-web-component-with-different-html-for-desktop-and-mobile\/","url_meta":{"origin":355016,"position":0},"title":"A Web Component with Different HTML for Desktop and Mobile","author":"Chris Coyier","date":"January 15, 2020","format":false,"excerpt":"Christian Schaefer has a great big write-up about dealing with web advertisements. The whole thing is interesting, first documenting all the challenges that ads present, and then presenting modern solutions to each of them. One code snippet that caught my eye was a simple way to design a component that\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/browser-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/browser-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/browser-pattern.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/browser-pattern.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/browser-pattern.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":288109,"url":"https:\/\/css-tricks.com\/graphical-user-interfaces-for-git\/","url_meta":{"origin":355016,"position":1},"title":"Graphical User Interfaces for Git","author":"Chris Coyier","date":"July 2, 2019","format":false,"excerpt":"Git is command-line-driven software, but that doesn't mean you have to use the command line to make it work. There are lots of options! Some of the deepest programmer nerds I know prefer to use GUIs for Git (Graphic User Interface, or you know, software you can see things and\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/git-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/git-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/git-pattern.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/git-pattern.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/git-pattern.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":254985,"url":"https:\/\/css-tricks.com\/react-forms-using-refs\/","url_meta":{"origin":355016,"position":2},"title":"React Forms: Using Refs","author":"Loren Stewart","date":"May 23, 2017","format":false,"excerpt":"React provides two standard ways to grab values from elements. The first method is to implement what are called controlled components (see my blog post on the topic) and the second is to use React's ref property. Controlled components are heavy duty. The defining characteristic of a controlled component is\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":278638,"url":"https:\/\/css-tricks.com\/compound-components-in-react-using-the-context-api\/","url_meta":{"origin":355016,"position":3},"title":"Compound Components in React Using the Context API","author":"Kingsley Silas","date":"December 6, 2018","format":false,"excerpt":"Compound components in React allow you to create components with some form of connected state that\u2019s managed amongst themselves. A good example is the Form component in Semantic UI React. To see how we can implement compound components in a real-life React application, we\u2019ll build a compound (multi-part) form for\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/compound-components-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/compound-components-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/compound-components-featured.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/compound-components-featured.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/compound-components-featured.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":280606,"url":"https:\/\/css-tricks.com\/using-react-portals-to-render-children-outside-the-dom-hierarchy\/","url_meta":{"origin":355016,"position":4},"title":"Using React Portals to Render Children Outside the DOM Hierarchy","author":"Kingsley Silas","date":"January 14, 2019","format":false,"excerpt":"Say we need to render a child element into a React application. Easy right? That child is mounted to the nearest DOM element and rendered inside of it as a result. render() { return ( \/\/ Child to render inside of the div ); } But! What if we want\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/weird-swirl.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/weird-swirl.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/weird-swirl.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/weird-swirl.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/weird-swirl.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":293491,"url":"https:\/\/css-tricks.com\/fetching-data-in-react-using-react-async\/","url_meta":{"origin":355016,"position":5},"title":"Fetching Data in React using React Async","author":"Kingsley Silas","date":"July 31, 2019","format":false,"excerpt":"You\u2019re probably used to fetching data in React using axios or fetch. The usual method of handling data fetching is to: Make the API call. Update state using the response if all goes as planned. Or, in cases where errors are encountered, an error message is displayed to the user.\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/react-async.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/react-async.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/react-async.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/react-async.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/react-async.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=355016"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355016\/revisions"}],"predecessor-version":[{"id":355904,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355016\/revisions\/355904"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/355619"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=355016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=355016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=355016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}