--- title: "Another way to split your select elements" publication: "Frontend Focus" issue: 617 published_at: "2023-11-08" canonical_url: "https://frontendfoc.us/issues/617" --- Plus how web vitals save us all a ton of time. | Together with [![Sentry logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_350,h_100/e_make_transparent/co_white,e_outline:7/xdmchdxkka938lxfr86f.png)](https://sentry.io/events/launch-week/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=general-fy24q3-launchweek&utm_content=newsletter-launchweek-register) 🚀 Frontend **Focus** #​617 — November 8, 2023 | [Read on the web](https://frontendfoc.us/issues/617) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1699444003/ldghnvlmcsdqphzmpeb3.png)](https://blog.chromium.org/2023/11/how-core-web-vitals-saved-users-10000.html) [How Core Web Vitals Saved Users 10,000 Years of Waiting for Web Pages to Load](https://blog.chromium.org/2023/11/how-core-web-vitals-saved-users-10000.html) — Highlights the performance achievements brought about by web vitals metrics, particularly the “exponential impact” of the combined small savings that we’ve all made since their introduction. Osmani, Sullivan and Ueno (Google Chrome) [Splitting within Selects](https://adrianroselli.com/2023/10/splitting-within-selects.html) — We featured the [ability to add an horizontal rule to a select element](https://developer.chrome.com/en/blog/hr-in-select/) a few [issues back](https://frontendfoc.us/issues/615). Here Adrian reminds us about the `` element, and how the two methods differ. Adrian Roselli [![\](https://copm.s3.amazonaws.com/e12f2aa6.png)](https://sentry.io/events/launch-week/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=general-fy24q3-launchweek&utm_content=newsletter-launchweek-register) [📞 Calling Frontend Devs! Sentry Launch Week is Coming](https://sentry.io/events/launch-week/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=general-fy24q3-launchweek&utm_content=newsletter-launchweek-register) — Tune in daily on YouTube for new product announcements and technical demos; then join Discord to get the inside scoop from the engineers that build Sentry. RSVP for Nov 13-Nov 17, at 9 am PT to get reminders/recaps and a chance to win exclusive swag. Sentry sponsor [Addressing Accessibility Concerns With Using Fluid Type](https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/) — The `clamp()` function, when paired with viewport units, offers one approach to having scaling, fluid font sizing, but it’s not without some accessibility concerns. Max Barvian takes a look at the issue and offers ideas on how to help address it. Maxwell Barvian [Minimalist Affordances: Making the Right Tradeoffs](https://lea.verou.me/blog/2023/minimalist-affordances/) — When aesthetics trump usability and form overrules function, it’s important to know what you’re doing and the potential downsides to your choices. Lea looks at the evolution of UI affordances, minimalism, and where confusion can creep in. Lea Verou ⚡️ Quick Links - 🦊 [Firefox for Android will support extensions](https://blog.mozilla.org/addons/2023/11/01/is-your-extension-ready-for-firefox-for-android/) soon. - 🗜️ The Compression Streams API is now [supported on all browsers](https://web.dev/blog/compressionstreams). - 🇪🇺 Apple tried to [convince the EU](https://www.theregister.com/2023/11/02/apple_safari_browser/) that Safari is really three different, separate browsers. - 🎨 How good is your hex code knowledge? [This site](https://hexcodle.com) offers up a daily Wordle-style color-guessing game. - 🏎️ Google has a new course focusing on [learning web performance](https://web.dev/blog/introducing-learn-performance?hl=en). - 🔤 A neat demo of how you can [animate variable fonts with CSS](https://codepen.io/JohnPhamous/pen/MWLeJVd). - 🎙️ [WordPress 6.4](https://wordpress.org/download/releases/6-4/) is out. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/cpjvmwikakhrfszrmh0c.jpg)](https://developer.chrome.com/blog/css-prefers-reduced-transparency/) [CSS `prefers-reduced-transparency` in Chrome](https://developer.chrome.com/blog/css-prefers-reduced-transparency/) — An explainer on how best to optimize and adjust your experience for users who prefer (or may even _require_) an opaque UI. Adam Argyle [AI as a UX Assistant?](https://www.nngroup.com/articles/ai-roles-ux/) — An overview of how those working in UX are using AI in their jobs, based on survey data from over 800 respondents. 92% of respondents said they are using at least one AI tool, helping with tasks such as editing, research, and ideation. Liu, Zhang, Budiu (Nielsen Norman Group) [AI Is Empowering More Web Developers. Be One of Them!](https://scrimba.com/allcourses?topic=ai&utm_source=frontendfocus&utm_medium=emailsponsor&utm_campaign=AIcourses&utm_id=FF1108) — Level up your career with these free AI focused courses covering prompt engineering, Dall-E, Chat-GPT & LangChain.js. Scrimba sponsor [Why to Use `px` Units for margin, padding, and Other Spacing Techniques](https://ashleemboyer.com/blog/why-you-should-use-px-units-for-margin-padding-and-other-spacing-techniques) — Ashlee suggests that when users increase their text size, they’re not trying to make the space _around_ text bigger. Ashlee M Boyer [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1699443623/cupotjdkthpdg4lmnhq1.png)](https://www.youtube.com/watch?v=DXX4hkV7XOI) ▶[Why We Need a "Green" Perf Metric](https://www.youtube.com/watch?v=DXX4hkV7XOI) — In a 12-minute presentation Brian outlines the impact the web has on our environment, how web performance can help with sustainability, and what can enable us to better tackle the problem of making the web greener. [Related slides and key takeaways here](https://screenspan.net/talks/green-perf-metric/). Brian Louis Ramirez [Testing with Intent: A Path to Embedded Accessibility](https://blog.scottlogic.com/2023/11/06/testing-with-intent-a-path-to-embedded-accessibility.html) — Proposes testing from the perspective of a user intending to do something specific and how this method can have a positive impact on both your overall testing technique and accessibility. Sam Gladstone [Better Dynamic Themes in Tailwind with OKLCH Color Magic](https://evilmartians.com/chronicles/better-dynamic-themes-in-tailwind-with-oklch-color-magic) — How to make Tailwind CSS play nice with CSS variables, OKLCH colors, and dynamic themes. Dan Kozlov [What Exactly is "Modern" CSS?](https://geoffgraham.me/what-exactly-is-modern-css/) — “_When the web itself is somewhat transient, it’s tough not to think about permanence and longevity._” Geoff Graham [View Transitions & Stacking Context: Why Does My CSS View Transition Ignore `z-index`?](https://www.nicchan.me/blog/view-transitions-and-stacking-context/) Nic Chan [A Designer’s Guide to Documenting Accessibility & User Interactions](https://stephaniewalter.design/blog/a-designers-guide-to-documenting-accessibility-user-interactions/) Stéphanie Walter 📊 [A Bubble Sort Visualization in Pure CSS](https://dev.to/grahamthedev/bubble-sortin-pure-css-no-js-3bb1) Graham the Dev [Don't Disable Buttons](https://gomakethings.com/dont-disable-buttons/) Chris Ferdinandi 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1699439190/yrnuxi47td7fuiozmu7b.png)](https://www.buttons.cool/) [Buttons.cool: A Big Collection of Web Buttons](https://www.buttons.cool/) — A growing and curated collection of over a hundred nice looking, free HTML and CSS button code examples from CodePen. Lucas Bonomi [React Components for the _Google Maps_ JavaScript API](https://cloud.google.com/blog/products/maps-platform/introducing-react-components-for-the-maps-javascript-api/) — [react-google-maps](https://visgl.github.io/react-google-maps/) is the ‘first Google-sponsored library’ for integrating Google Maps JavaScript API components in a React app. Mike Pegg (Google Cloud) [Maximize Tech Team Success with a Free AI-Powered Payroll](https://try.revelo.com/revelo-payroll?utm_source=newsletter&utm_medium=sponsorship&utm_campaign=cooperfrontendpayroll) — 🌍 Elevate your global team management. Run unlimited cycles for free and pay in minutes, all in one system. Revelo Payroll sponsor [DFlex: A Drag-and-Drop Library for All JS Frameworks](https://www.dflex.dev/) — A vanilla JavaScript solution with a focus on good performance and easy implementation. Try some demos [here](https://www.dflex.dev/demo/lists/symmetric/). DFlex [capture-website 4.0: Capture Screenshots of Websites](https://github.com/sindresorhus/capture-website) — A high-level Puppeteer wrapper to make it easy to capture screenshots of websites from Node or the command-line. Sindre Sorhus [Shots: A Full-Featured Device Mockup Tool](https://shots.so/) — Has just about everything you’ll need to create mockups for product and app shots. Upload your image then customize the background, device size, frame, border, and more. _No Safari support_. Shots 😍 **Revisiting a pretty demo..** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/y18uakgtovizhw2ehvmz.jpg)](https://paveldogreat.github.io/WebGL-Fluid-Simulation/) [A WebGL Fluid Simulation](https://paveldogreat.github.io/WebGL-Fluid-Simulation/) — We first linked to this beautiful demo back in 2019, but it still feels fresh and, perhaps, will now run a lot faster on your machine than it did back then! Pavel Dobryakov 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/617/*|UID|*?ipx=t)