~frontendfocus | Bookmarks (297)

Draggable Carousel: A Draggable Carousel/Slider Component for React, Vue, or Vanila JS — Try it out on this Stackblitz demo.

CSS Editor: An Interactive Visual CSS Editor — Nothing extraordinary here, but a nice way to use sliders and dropdowns to edit CSS on an element live on the page, with both 2D and 3D properties available.

Storybook 9 Beta — The popular UI 'workshop' hits v9, with this beta that introduces visual testing, accessibility testing out of the box, component test widgets and more.

Annotation Mono: A Lovingly Crafted Handwriting-Style Monospace Font — A legible, variable handwritten typeface inspired by monospace bitmap fonts — could be useful not just in your IDE, but may also work in any informal context, such as labels, headings, etc. Repo here.

track-list: A Web Component to Enhance a List of Audio Tracks with Playlist Controls — A neat idea to encapsulate a common UI pattern where a single track plays followed by each subsequent track in the list, with play/pause and next/previous functionality. Some demos here.

Design Tokens Name Generator — For when you need to get started quickly, this tool will create ready-made naming conventions for your design system.

'Don't Make Google Sell Chrome' — There have been rumblings about Google possibly having to sell off Chrome for a little while now — here, DHH (creator of Rails, Basecamp, etc) weighs in, noting that the web could be worse off if it comes to pass: “Google should not get away with rigging the online ad market, but forcing it to sell Chrome will do...

Polishing Your Typography with Line Height Units — Jen explains how the lh and rlh units give us a direct way “to tie any size in our layout to the vertical rhythm of the text” — be that margins, padding, gaps, width, height, etc.

Creating a 3D Split-Flap Display Effect — A split-flap display is a electromechanical display commonly associated with live timetable displays and it makes for a neat effect on the Web too. Jhey breaks down how to replicate it or you can hit up this live demo.

Seeking an Answer: Why Can’t HTML Alone Do Includes? — Plenty of solutions, but no straightforward, performant HTML one. This has been a tricky issue for decades now and gets worked around in numerous ways whether with JavaScript, a build step, IFRAMEs, or more. There is no answer here, but it's a good question.

How to Write Error Messages That Actually Help Users Rather Than Frustrate Them — Solid, straightforward advice on creating error messages that help users recover quickly and continue their path through your products/services.

The <canvas> Element — Highlights the accessibility pitfalls and performance trade-offs of using the <canvas> element, along with noting when it’s actually suitable to turn to it.

▶  🦉 What is the 'Owl Selector' (* + *)? — A quick look at the so-called CSS ‘owl’ selector, including how it works, why you should use it, and the viable alternatives.

How to Take Clerk to Production — How to take a Clerk app to production with custom domains, OAuth credentials, and DNS setup.

Anchor Positioning Just Don't Care About Source Order — Overlapping elements in CSS can often be tricky, but CSS anchor positioning should simplify things. Geoff shares how, noting that it adds another welcome “separation of concerns between content and presentation”.

▶  Hello My Name Is St�phanie: A Talk On "Special Characters", Inclusive Design and User Experience — A roughly 15-minute talk on how encoding and database decisions about formats and characters can result in an awful user experience.

The Hidden Cost of AI Coding — No matter if you’re all in on vibe coding, or find AI development somewhat questionable, this article ponders the joy of the craft. Some food for thought.

Blob Shape with Hover Effect — It’s Chrome only for now, but Temani quickly shares a technique for creating CSS-only single-liner blob shapes using clip-path and shape(). There’s a generator too if you want to make your own.

Responsive Typographic Scale Generator — Output is in standard CSS or Sass/SCSS and you can use rem or px for the font sizes using the clamp() function.

⭐ A Flowing WebGL Gradient, Deconstructed — Even if you don’t want to render a neat plasma-style effect on the Web, this is a wonderfully deep exploration of the math and technology behind doing so using simple GLSL code that could be easily understood by most frontend developers.

So, You Want to Give Up CSS Pre- and Post-Processors... — How native CSS, new features and new tools can help us inch towards ditching pre-processors.

Mastering Carousels with GSAP: From Basics to Advanced Animation — A solid overview of creating a carousel that makes use of scroll snapping, utility functions, 3D effects, draggable interactions, and more.

Introducing Kermit: A Typeface for Kids — Nothing to do with the famous frog — no, this new font aims to empower children by making reading easier, and improving comprehension. Pretty friendly and approachable I’d say.

AG Grid: The Best JavaScript Data Grid In The World — Create high-performance data grids with our open-source library, trusted by 90% of the Fortune 500. Add advanced features like Integrated Charting, Grouping, Pivoting and more with a few lines of code. Supports React, Angular and Vue. Try for free.