~frontendfocus | Bookmarks (255)

The Most Effective Ways to Improve Core Web Vitals — Everyone wants their site to be as performant as possible, especially when Google factors such things into its rankings, but how? Luckily, Google presents a variety of practical techniques to improve those INP, LCP, and CLS metrics here.

'My Modern CSS Reset' — Whether it’s Eric Meyer’s classic take on the reset, or one of countless others, there’s always plenty of debate on the best approach to starting a project — Jake throws his hat into the ring with “a slightly more opinionated stance” that applies some light default styling too.

Apple Implements Six of OWA's DMA Compliance Requests — Reports that Apple has now fixed several issues in relation to letting browsers and web apps compete on iOS (including allowing vendors to test their own browsers outside the EU), but notes that a massive list of issues remain to be fixed in order for Apple to be DMA compliant.

Come to the light-dark() Side — A look at how modern CSS can now make handling offering up both dark and light modes simpler.

State of Frontend 2024. Dev & Business Insights You Can’t Miss! — Explore insights: 6,288 developers, 139 countries, 23 experts. New sections on AI, accessibility, and more!

HTML Form Validation Is Heavily Underused — An exploration of the “powerful validation mechanisms” of HTML forms, opining that they’re underused, and proposing why that lack of utilization may be.

Tooltip Best Practices — A straightforward summary of the various best practices, including accessibility considerations, when creating tooltips.

A <baseline-status> Web Component — A new widget to easily display web feature baseline information on your site. Just drop baseline-status into your HTML and you’ll have browser compatibility data on show.

daisyUI: A Library of Tailwind CSS Components in Multiple Themes — Includes dozens of ready-made components that you can try out using about 20 different themes – all of which are testable live in the docs.

BCD Watch: Keeping an Eye on Changes to MDN’s Browser Compatibility Data — A useful resource that automatically collects and indexes updates to browser compatibility data, specifically the data used by MDN and sourced from their GitHub repo.

Atomic CSS Devtools: A Browser Extension for Debugging Atomic CSS — Available for Chrome and Firefox, this adds a DevTools panel that presents styles in a ‘non-atomic’ format to make it easier to debug and troubleshoot the CSS.

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’.

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.

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

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...

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.

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.