~frontendfocus | Bookmarks (247)

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.

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.

What Do Survey Demographics Tell Us? — Miriam looks over the latest State of CSS survey results, and shares her thoughts on the findings and whether we’re asking the right questions.

Clarifying the Relationship Between Popovers and Dialogs — An attempt to clear up any potential confusion you may have here, along with summarizing the key mental model to takeaway.

What’s the Deal with WebKit Font Smoothing? — On whether or not we should add this one line of CSS to our projects.

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

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.

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.

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

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.

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.

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.