~frontendfocus | Issue 685 - Bringing custom styling to 'select' elements (19)

StringTune: The JavaScript Library Born from a Design Agency’s Workflow — A look at how to make use of this flexible JavaScript library for animations, smooth scrolling, and interactive effects. npm package.

The <select> Element Can Now Be Customized with CSS — There’s now an accessible, standardized way to create styleable <select> elements — thanks to appearance: base-select. Adam shares how this has been “many years in the making” and after “many hours of engineering and collaborative specification work” we now have a rich component that won’t break in older browsers. Here’s a closer look at how...

How to Think About Baseline and Polyfills — Despite polyfills not being included as part of the Baseline project, Baseline can still help bring some nuance to the decision making around whether or not to use them.

Support Logical Shorthands in CSS — The CSS Working Group recently resolved to add a size shorthand for setting both the width and height of an element. Many people asked about using it to set the ‘logical’ inline-size and block-size properties instead. But ‘logical shorthands’ have been stalled in the working group for years (since 2017!). Miriam asks if we get them unstuck?

Minding the Gaps: A New Way to Draw Separators in CSS — Explains CSS gap decorations, a new proposal being worked on (and seeking feedback) for adding and extending fine-tune control over gap decorations.

Revisiting CSS border-image — A deep dive into the powerful border-image property and how it can be used in various creative ways: “By slicing, repeating, and outsetting images, you can create intricate borders, decorative elements, and even dynamic overlays with minimal code”.

Meet @clerk/agent-toolkit — New experimental Clerk package for AI agent workflows. Manage users and orgs with Vercel AI SDK & LangChain support.

The Bare Minimum You Need to Enable View Transitions on Your Site — View transitions are a solid way to make your site feel more dynamic and engaging when folks are navigating between pages. Here’s the basics for getting started.

Layered Text Headers — Applying a stroke effect to text across all browsers is possible, but as Chris points out it makes use of a center-aligned look which “looks like 💩” (his words). However, the paint-order property may be worth a look as part of a solution for achieving a similar look.

Previewing Content Changes in Your Work with document.designMode — A look at several use cases for document.designMode and how it can be used to preview content changes, do basic content editing, and improve team collaboration.

Best Practices for Cognitive Accessibility in Web Design — Lots of good practical advice here, covering ways to improve your website’s cognitive accessibility.

An MCP Server for Playwright and Browser Automation — MCP (Model Context Protocol) servers enable certain LLM-based agents (such as Claude, Claude Code, and Cursor) to perform actions on a system outside of their usual sandbox. This new project from Microsoft enables such LLMs to interact with Web pages in a structured way (much as Playwright lets you do from Python or JavaScript code).

CASCII: A Web-Based ASCII and Unicode Diagram Builder — Imagine something like MS Paint but for text-based drawing. You can switch between ASCII and Unicode modes and enable a background grid for alignment. Export directly to clipboard or in Base64.

Konva: A JavaScript 2D Canvas Library — The native API for Canvas elements is pretty good, but Konva is a popular abstraction that sits on top and provides a more structured way to work with shapes, styling, events, animations, and more (lots of demos with code). It also has extra integration libraries for Vue, Svelte and React.

Reveal.js 5.2: The HTML Presentation Framework — Brings elegant presentations to anyone with a Web browser. v5.2 adds the ability to trigger ‘lightboxes’ where viewers can see images and videos in a way where they stand out more.

Parvus 3.0: Accessible Lightbox with No Dependencies — I love how it says not to use overlays on web pages but if you have to, use this! There’s a CodePen example.

Fancy Components: A Growing Library of Ready-to-Use Animated React Components — Includes a whole slew of components for doing various text animations, along with others for backgrounds, physics-related animations, SVG filters, and more. Try them out here.

Run GitHub Actions Up to 2x Faster at Half the Cost — Blacksmith runs GitHub Actions up to 2x faster at half the cost. Trusted by 250+ companies like Ashby and Clerk.