~frontendfocus | Bookmarks (267)

Mastering Interaction to Next Paint (INP) — A look at what this Core Web Vitals metric is measuring, how to diagnose it, and, most importantly, how to fix it so your site interactions nice and responsive.

i-html: A Drop-In Web Component That Allows for Dynamically Importing HTML Inline — Described as being ‘similar to an iframe’, except that the HTML is ‘adopted’ into the page. The benefits and use cases are explained in detail here.

skellyCSS: A Lightweight CSS Framework to Quickly Implement Skeletons Into Your Projects — For showing gray placeholder content often seen during page load. There’s also a web components library based on the framework.

▶  How is This Website So Fast!? — You may have seen the McMaster Carr site shared in developer circles before — it’s an interesting, somewhat retro-looking industrial supplies ecommerce site that's blazing fast, thanks to a mix of techniques. Wes runs through them here — you’re bound to pick up some performance food for thought.

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.

Making Content-Aware Components using CSS :has(), Grid, and Quantity Queries — Eric looks at the power of combining the CSS :has() pseudo-class with classic techniques like quantity queries and a mobile-first mindset as a way to create resilient, self-contained, content-aware components “that can adapt to any language you throw at it”.

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.

Learn Best Practices for Reliable Frontend Testing — Surface broken functionality before customers do. In this guide, learn how to create and maintain end-to-end tests, get more visibility with private locations, incorporate synthetic tests into your CI/CD pipeline, and test internal applications.

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

WebKit Features in Safari 18.1 — Version 18.1 of Apple’s Safari browser is now available across iOS, macOS, etc, adding in two new ‘Apple Intelligence’ features.

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!

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

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.

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

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

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.