~frontendfocus | Bookmarks (255)

The Undeniable Utility of CSS :has — Josh has spent the past few months rebuilding his blog using modern CSS techniques, including the :has pseudo-class. Here he reflects on just how useful it is by way of some real-world use cases and some ‘mindblowing’ experiments.

A Complete Guide to Beginning with JavaScript — A rather epic article packed with background knowledge, context, and third party resources for starting a modern JavaScript learning journey.

Brand New Performance Features in Chrome DevTools — A helpful look into Chrome’s updated Performance Panel and all the different metrics it shows off to help you improve the performance of your site.

[Workshop] Fix Your Front-End: JavaScript Edition — Learn practical tips to make debugging more tolerable. Join our JavaScript team live for a masterclass on Sept 24.

svg.wtf: An SVG Playground to Learn How to Write SVG Code — Includes some useful code-related features like tooltip info on hover, to help understand the different elements, attributes, etc.

Redirect Checker: A URL Redirect Analysis Tool — Includes numerous features to help analyze your redirects, like providing a detailed path analysis, bulk redirect checking, custom user-agent selection, among others.

📱  Web Inspector: An iOS/iPadOS App to Expand Mobile Safari with Extra Development Tools — Similar to a desktop browser’s DevTools, this lets you inspect elements, edit styles, run commands in a console, view network requests, and more.

SVGEdit: A Powerful Browser-Based SVG Editor — A fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser. You can try it live here or host it for yourself.

Lazy Loading Isn't Just Lazy, It's Late: We Can Do Better — “We tend only to fetch more content as the user scrolls it into view or navigates to the next page, which isn’t just lazy: it’s often late and an awful user experience”. This post suggests a more proactive approach.

▶  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 Secret Inside One Million Checkboxes — One Million Checkboxes is/was a site with one million global checkboxes on it where checking (or unchecking) a box changed it for everyone on the site, instantly. This fun post-mortem digs into how the internet (and, specifically, a group of smart teenagers) played with the project to reach ends you'd never expect..

Passkeys for Everyone! Make Your User Login Simpler with FusionAuth — FusionAuth just added passkeys to their free tier, which is a paid feature for almost every other auth provider. Try it out yourself.

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.

Button Stealer: A Chrome Extension That "Steals" a Button from Every Website You Open — A funny way of 'collecting' an inspiration gallery of buttons, which the author has done and you can view here.

Introducing style-observer, A MutationObserver for CSS — Bramus has created a MutationObserver for CSS. It, dubbed style-observer, allows you to attach JavaScript callbacks to changes in computed values of CSS properties.

The Ultimate Guide to Font Performance Optimization — This is quite the rabbit hole indeed, but a useful one to go down if your site is using custom fonts and you’re serving them up directly yourself. Of course, step one is to consider sticking to system/web-safe fonts.. ;-)

Beyond the 10x Engineer — Incredible technical skills can’t save a product that no one wants. That’s why engineers should care about non-technical product skills. To help you figure out which of these skills matter, we wrote about the ones we look for (and use) at PostHog.

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.

The Web Design Museum: The First Decade of Web Design — Exhibits thousands of unique old website designs from the early 90s to mid-00s. A fun way to discover forgotten trends in web design.

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.

Finding Two Lines of CSS That Tanked Performance — Upon launching the Learn Web Components site, Andrico discovered one of its animations caused a sharp drop in performance on Firefox. Here’s what he discovered and how he fixed it.