~frontendfocus | Bookmarks (267)

Departure Mono: Monospace Pixel Font with a Lo-Fi Technical Vibe — It’s open source and takes inspiration from “the constraints of early command-line and graphical user interfaces”, along with late 90s and early 2000s pixel fonts. Cool website!

CSS Almanac — The almanac over at CSS Tricks has been spruced up. It’s a great resource packed with references for various CSS selectors and properties.

Improving Rendering Performance with CSS content-visibility — When a page has 20,000 custom emoji on it, things may well get a touch slow. Nolan set out to fix things.

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

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.

The State of ES5 on the Web — Early JavaScript build tools often focused on allowing modern features to be used on the Web at the time by compiling down to ES5 code that could run anywhere. Time has moved on, but have the tools or popular libraries? Philip investigates, and shares some recommendations.

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

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

The First HTML LSP That Reports Syntax Errors — A new Language Server for HTML that catches various syntax errors (either in popular editors such as VSCode or as a CLI tool). It claims to deliver immediate feedback on HTML errors, and common typos.

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!

DECK.GL: GPU-Powered Large-Scale Data Visualization Framework — Particularly well suited to geospatial data visualization use cases that go beyond typical 2D views. There are plenty of examples to show you what it can do. Can be used through both vanilla JS and React interfaces.

Free Public APIs: A Collection of Free Public APIs for Developers — Categorized and searchable, these are tested daily via bots so if any API is taken down or moved behind a paywall, it gets removed from the site.

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

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

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.

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.

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.

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