~frontendfocus | Issue 665 - The State of CSS 2024 results are out (17)

Emoji-Fallback.js: Provide Support for Emojis on All Browsers — Replaces emoji characters with emoji images on devices that don't have emoji support.

Possible Future CSS: Tree-Counting Functions and Random Values — A look at two possible CSS features (tree counting functions and randomness) from the Level 5 spec, how we can prototype them now, and a look at what their use cases may be — via interactive demos.

How Should <selectedoption> Work? — A new HTML element! We’re getting a way to style and customize <select> elements in certain situations, via <selectedoption>. But there are concerns on sync and state issues, and Jake seeks feedback on the practicalities of the intended behavior.

Build a Daily Workout Tracker with Clerk, Convex, and Expo — "Daily Reps" is a workout tracker app to set daily goals & track progress, resetting daily. Built with React Native & Expo, it uses Clerk for user management & Convex for real-time data, offering a powerful cross-platform fitness tracking solution.

📊  The State of CSS 2024 Survey Results — Sacha Greif notes how 2024 may go down as something of a turning point between classic CSS and ‘new CSS’ — what with the many new features and tooling introduced in recent years now reaching a level of widespread browser support, and more importantly, usage. Lots of interesting data points to dig into here (shoutout...

So, Your CMS Blew Up. Any Decent WordPress Alternatives Out There? — No matter which side of the debate you find yourself, I think it’s fair to say the mess with WordPress has been universally frustrating in some way or another. As such, Ernie — in his typical engaging style — outlines some CMS alternatives that you may at least have on your radar if...

Help Choose the Final Syntax for Masonry in CSS — The WebKit team shares a detailed update on where the CSS Working Group is at with the planned introduction of masonry-style layout support in CSS. A lengthy post that highlights design principles, performance considerations, complexity concerns, and more (plus how you can share your thoughts).

Where Web Components Shine — Dave shares a quick-fire list of the specific pros and cons of using web components today — highlighting strengths, such as low memory usage, style encapsulation, and quick prototyping — along with pointing out challenges, including accessibility concerns.

Prompt, Run, Edit, and Deploy Full-Stack Web Apps with bolt.new — StackBlitz recently released in-browser AI web development agent: bolt.new! Give it a try today.

Smarter than 'Ctrl+F': Linking Directly to Web Page Content — A powerful feature of the modern web platform that allows for precise linking to specific text within a web page without the need to add an anchor.

CSS min() All The Things — Experimentations with the CSS min() function, exploring its flexibility with different units to determine “if it is the be-all, end-all for responsiveness”.

How Microsoft Edge is Replacing React with Web Components — As part of their WebUI 2.0 project, the Edge browser team is on a mission to swap out React UI components with native web platform components, largely for performance reasons.

Hyper-Responsive Web Components — Dives into the nuance of getting an embeddable call-to-action sign up component working in as many places as possible (any position, and viewport, any amount of content).

Khoshnus: A Library to 'Bring Life' to SVG Text — A library for ‘bringing life to static text in an artistic way.’ Essentially it takes SVG text and animates it into existence on your page.

CSS Spring Easing Generator: Make Generating Spring Easings More Intuitive — The tool allows you to customize two main settings: perceptual duration (in milliseconds) and bounce (%). You an also select from three presets and the code is generated as CSS variables for use with CSS animations.

HEX·P3: Quickly Convert HEX Colors to the Display P3 Color Space — The resulting code uses the relatively new CSS color() function with the display-p3, which according to the spec, ‘enables more vibrant greens and reds than the sRGB color gamut’.

AuthKit: The World’s Best Login Box — Powered by WorkOS & Radix — AuthKit is a complete solution for authentication, authorization, and user management. It’s free up to 1 million MAUs and comes standard with RBAC, bot protection, MFA, and more.