~frontendfocus | Bookmarks (296)

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.

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.

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.

Tailwind Gradient Generator: Create CSS Gradients for Tailwind Projects — Select to preview any of the existing gradients in the gallery and customize the ‘direction’ of the gradient. You can also preview the gradient on text (as seen above) or just as a regular background.

Loadership: An Interactive Tool to Build and Customize Pure CSS Loading Animations — Click any of the dozen or so prebuilt loaders (which are unique!) and you can customize them to your liking (color, speed, size, etc).

Enhance: Enhance and Upscale Your Images Using AI — Yet another single-purpose image editing tool from Addy Osmani, this one is a simple AI-powered image upscaler/enhancer that you can try out online here.

Introducing command and commandfor — Chrome 135 (and preview versions of Firefox and Safari) add support for two new HTML attributes, command and commandfor. They’re for adding declarative actions to HTML buttons without directly requiring JavaScript.

shiki-stream: Generate "Streaming" Syntax Highlighted Code — Based on the popular Shiki syntax highlighter, this will reveal the selected code line by line (i.e. in a “stream”), which you can play with here.

Frontend Practice: A Practice Ground for Improving Frontend Skills — A collection of real sites each with a spec sheet that you can use to recreate the project to improve your skills.

svg2pdf.js: SVG to PDF Conversion in the Browser — There’s an online playground to give you a feel for what it can do.

New: Secure In-Person Payments for Mobile Apps — Square's new Mobile Payments SDK is PCI-compliant, free to integrate, and has no API usage costs. With support for a diverse range of hardware, our in-person payment solution is reliable whether on the move, at a kiosk, or over the counter. Try it now.

🕵️‍♂️ Buying Browser Extensions for Fun and Profit — An interesting look into the shadowy world of how browser extensions, with hundreds of thousands of users, can be easily bought — potentially by malicious proprietors.

Styling Counters in CSS — A guide to styling counters, going from the most basic ways to style lists directly in HTML to advanced customization techniques that are even capable of making things that aren’t lists look like lists.

Self Gap — Some thinking on how best to control a custom gap between some flex or grid elements. As ever, Ahmad has code examples and solid demos to help explain the approaches considered.

Breadcrumbs are 'Dead' in Web Design — Once a clear staple in web design, the author argues that they’ve now become somewhat obsolete in “today’s non-linear, context-driven web, where dynamic and personalized navigation systems take precedence”.

Web Components vs. Framework Components: What’s the Difference? — A comprehensive comparison between Web Components and framework components, discussing their definitions, strengths, weaknesses, and various performance considerations.

Use Cases for the Document Picture-in-Picture API — A way to open a floating, always-on-top window (‘picture-in-picture’) that can display arbitrary HTML content. Chrome only, though.

But How to Get to That European Cloud? — A thoughtful take on a pressing need for an increase in geographically diverse web infrastructure. Touches on broader political considerations that, naturally, not everyone may see the same way — but, ‘don’t put all your eggs in one basket’ is generally good advice.