~frontendfocus | Bookmarks (267)

Supporting AVIF in Google Search — Image format AVIF is now a supported file type in Google Search and Google Images, as well as any place that uses images in Google Search.

Apple 'Appears to Mislead' UK Regulator Over Deceptive Default Browser User Interface — Looks like Apple is claiming that a previously implemented pattern for picking default browsers in iOS, in fact, never even existed. 😵‍💫

▶  Caching Demystified: Inspect, Clear, and Disable Caches — Dives into the different types of browser cache and how to inspect and manage them in Chrome DevTools.

▶  Scroll-Enhanced Experiences — A 52-minute journey through the art of 'scrollytelling' with CSS, guiding you through the process of creating dynamic experiences that leverage a user’s scroll behavior. Covers controlling pace/rhythm of a page with the CSS Scroll Timeline API.

'Why I Don’t Block AI Scrapers' — “let thieves do thief things until our justice system(s) do justice system things”.

Reasonable Colors: An Open-Source Color System for Building Beautiful, Accessible Color Palettes — Just drop in the base stylesheet, then use the provided CSS variables that provide built-in “shades” for each color.

The Dev Tools Performance Monitor Panel — In Chrome, if you open 'Dev Tools > More Tools > Performance Monitor' you’ll see some helpful high-level charts and graphs of the realtime performance data of your UI.

Avatars: A Collection of Diverse Free Avatar Images — Downloadable in PNG format, but also accessible directly via a public CDN and there’s a Figma plugin available.

Tailwind Grid Builder: Learn and Build CSS Grids with Tailwind — A simple tool to generate the HTML with Tailwind classes for a custom grid. Just select number of items, rows, columns, and number of breakpoints as needed. Useful also for learning the Tailwind class names.

Web Vitals: Chrome Extension for Instant Feedback on Loading, Interactivity and Layout Shift Metrics — Includes support for all of the Core Web Vitals.

Replace Twitter (X) Embeds with Semantic HTML — A Python script for converting a public Tweet into embedded, semantic HTML.

The State of CSS 2024 Survey — The increased pace of evolution in the CSS space seems to show no signs of slowing, as such we can now do so much more than we could just a few short years ago (be that advanced math, scroll-triggered animations, etc). As such, this recently launched survey — which covers things like layout, color, typography, accessibility, and more...

Fuite 5.0: A Tool for Finding Memory Leaks in Web Apps — A CLI tool that you can point at a URL to analyze for memory leaks. Here’s how it works. There’s also a video tutorial.

Milkdown: Plugin-Driven WYSIWYG Markdown Editor Framework — A lightweight WYSIWYG Markdown editor based around a plugin system that enables a significant level of customization. It’s neat to see the docs are rendered by the editor itself. GitHub repo.

The Monospace Web — A well formed, minimalist CSS design exploration, featuring lists, tables, charts, ASCII drawings, etc.

Front-End System Design — Learn to create scalable, efficient user interfaces in this extensive video course by Evgennii Ray. Explore the box model, browser rendering, DOM manipulation, state management, performance and much more.

Can You Convert a Video to Pure CSS? — Can or should..? A highly detailed exploration of using scroll-based animations as a way to play video as just CSS. David has also made a neat browser-based tool for converting any video into a pure CSS keyframe animation ready to be dropped into your site.

Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations — It’s still a touch early to truly adopt these two features (only Chrome and Edge have full support today), but it can’t hurt to explore both Anchor positioning and scroll-driven animations to get an overview of just what could be done in the near future – it's a nifty effect!

🙈 Spoiler Alert: It Needs to Be Accessible — Here’s what Scott would expect from a would-be spoiler component, “if someone were to build one, or if one were to ever be standardized”.

Basic Keyboard Shortcut Support for Focused Links — Turns out there’s a lot of different actions you can perform via the keyboard when an anchor element is focused.

Double Your Specificity with This One Weird Trick — A bit of a hack, sure, but by doubling up the relevant selector(s) you can boost your specificity without resorting to overrides or using !important.

Five WASM Use Cases for Frontend Development — WebAssembly is gaining ground in frontend development, so how should you consider applying it?