~frontendfocus | Bookmarks (255)

11ty-Serene: A Minimal Landing Page Theme for Eleventy — Styled with Tailwind and includes scroll-reveal effects. (Eleventy / 11ty is a popular Node.js-powered static site generator.)

How to Animate to height: auto (and Other Intrinsic Sizing Keywords) — An often requested CSS feature is the ability to animate to height: auto and CSS’s interpolate-size property and the calc-size() function provide a way to do this, though it’s limited to Chrome 129+ for now.

Streamline Your Product Delivery with monday dev — From ideation to launch, monday dev makes product delivery faster and simpler, all in one place.

Logical Properties in Size Queries — “We may need size-based media queries for some time yet, and being able to use logical properties with them would certainly be useful”.

😢 The Continuing Tragedy of Emoji on the Web — Nolan laments “how half-heartedly browsers and operating systems have worked to keep their emoji up to date”.

Two CSS Properties for Trimming Text Box Whitespace — Specifically, text-box-trim and text-box-edge, two fine-grain properties to trim specific amounts of whitespace around text. Support is limited, and only behind a feature flag for now.

Let’s Bring Back Browsing — “To “surf the web” implied fun and adventure and to “browse” implied serendipity. And we seem to have lost that. Let’s go back”.

Run GitHub Actions Up to 2x Faster at Half the Cost — Blacksmith runs GitHub Actions up to 2x faster at half the cost. Trusted by 100+ companies like Ashby and Slope.

@bramus/caniuse-cli: A CLI Tool for “Can I Use” — Bramus has built an (offline) command line tool for the always useful Can I Use and MDN’s browser-compat-data. The npm package is here. Once installed, use caniuse at the command line to query. Handy!

AIEditor: A Next-Generation Rich Text Editor with AI Features — Based on Web Components so it can be integrated with any framework, has real-time collab, Markdown-friendly, and includes AI capabilities like spelling/grammar checks, one-click translation, and more. (LGPL licensed with a 'pro' option.)

WebKit Features in Safari 18.0 — Safari 18 arrives alongside iOS 18 and macOS Sequoia, along with 53 new web platform features. This new version of Apple’s browser has some interesting features, such as the ability to hide ‘distracting’ items from a web page, new iPhone Mirroring and remote inspection options, and it joins Chrome in supporting View Transitions and Style Queries when testing...

Optimizing for High Latency Environments — If you’ve a particular interest or responsibility in diving deep into performance metrics, then this detailed post from Harry on round-trip-time (RTT) should prove invaluable.

'In 2024, Just 0.5% of the Global Top 200 Websites Use Valid HTML' — Jens digs into some of the rather woeful findings from the latest HTML conformance data and urges us to ship valid HTML.

Astro 5.0 Beta Release — The first beta release of Astro 5.0, the popular web framework is now available. This new release includes the now stable Astro Content Layer, along with stable server islands, a new way to mix static and personalized content.

▶  The “Other” C in CSS — A practical, technical hour-long talk from this year's CSS Day conference about accessibility, and how CSS affects the semantic accessibility of our HTML.

The Frontend Masters Knowledge Quest Sale Is Going on All Week! — The Frontend Masters Knowledge Quest sale is now on! There's four new learning paths (including JS performance and code architecture) with more epic courses on the way throughout 2024 and beyond.

CSS Triggers — If you want to write more performant CSS, then understanding how things are rendered (layout, paint, and composite) across the three main browser engines is always going to be handy knowledge. This site brings together findings across a series of CSS properties.

Sticky Headers and Full-Height Elements: A Tricky Combination — Philip warns that sticky elements often don’t play nicely if they have to coordinate with other elements to make up a combined height (such as 100vh). This post explores why this happens and offers up a solution.

Anchor Positioning Quirks — Dives into the various potential ‘head-scratchers’ that you may come up against when working with anchor positioning, breaking them down so you’ll hopefully have an easier time when you come to use them.

A Release Note for the Web Platform — Details of a community-driven effort to create an index of all features across the entire web platform, which will track their availability, and share the latest information via release notes.

The Web's Clipboard, and How It Stores Data of Different Types — An interesting exploration of how things currently work with copy and pasting on the web, how different data types are treated, and what the Web Custom Formats proposal is putting forward.

Time Travelling CSS with :target — A fun look at how you can achieve a kind of ‘primitive version of client-side routing’ solely through the behavior of :target. A fun one.

🇬🇧  GOV.UK Vue: Build Vue Apps, the British Way — The UK government is well known for providing its citizens with an effective, well designed Web site for performing various civic tasks. Now you can get all of their clean components in Vue 3 form.

CSS Display Contents — Ahmad takes a a look at how best to use 'display: contents' in order to build more fluid layouts. As ever with Ahmad’s work, there are plenty of code examples and use cases to help our understanding.