~frontendfocus | Bookmarks (255)

Fluid Everything Else — An exploration of how we can apply the concept of 'fluid typography' to realize layouts that change with the size of a parent container, without the user noticing any transition.

An Official Logo for CSS — After hundreds of votes, CSS now has its own logo, moving beyond the shield and number combo of the CSS 3 era. We’ve got a main rebeccapurple version (pictured), along with a dark and light version.

New CSS That Can Actually Be Used in 2024 — Yep, the amount of CSS changes and additions in the last two to four years has been staggering, as such this page (published earlier this year) is a good cheatsheet reminder, of sorts, for newer things we can do with CSS.

Penpot Plugins Contest: Build a Plugin and Win Up to $1,000! — Got amazing plugin skills? Penpot, the free open-source tool for design & code collaboration, has launched its plugin system — join the contest (Nov 15-Dec 15), share your plugin, and win.

A Recap of Google's Web AI Summit 2024 — Google recently held a summit specifically about the use of machine learning models directly in the browser, specifically by developers creating new, rich experiences for users. It’s interesting to see how things are progressing here and you can watch some of the talks on YouTube.

Eleven HTML Best Practices for Login and Sign-up Forms — Andrey notes that “even popular sites fail to implement” the best practices highlighted in this recently updated article (such as autocomplete, focus states, validation, etc). There’s a quick checklist towards the end here.

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.

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.

Web Visual Editor: A VS Code Extension to Edit HTML Files Visually — Works similar to the browser devtools, providing a live preview of visual changes with element selection, copy/paste elements, zoom in/out, drag elements, and more. A key difference to the well known Live Preview is that changes in the preview then reflect back in the code.

Orbit: A Framework to Create Radial Interfaces with CSS — Includes various CSS classes and Custom Elements for designing ‘radial’ or circular graphics and designs. The docs includes plenty of examples for this niche framework.

VS Code Theme Generator: An Online Tool to Generate and Customize VS Code Themes — The UI lets you preview the theme as you work and you have the ability to have granular control over the tokens in the syntax highlighting.

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.

A Friendly Introduction to Container Queries — It’s been a couple of years now since the “biggest missing piece in the CSS toolkit” first started landing in browsers, but despite container queries being a highly requested and now well supported feature, Josh opines that we aren’t really using it all that much (however...). Here he goes into why take up may be low, reintroduces...

Exploring the Browser Rendering Process — A technical look at what actually occurs between typing a URL in your browser and the moment a page is displayed. It’s a solid explainer of the browser rendering process (told in an interactive way).

Should Masonry Be Part of CSS Grid? — As the conversation around just how best to add Masonry layout to CSS continues, Ahmad explores the leading options and shares his take. This post looks at both masonry as both a part of CSS Grid and as its own display type. As is typical with Ahmad’s work, there's lots of good code examples and visuals...

The Details and Summary Elements Are Getting An Upgrade — A quick look at proposed changes to make the <details> element more customizable and interoperable between browsers.

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

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

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.

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.