Frontend Focus

#​497 — June 30, 2021 | Read on the web

Detecting Hover-Capable Devices — A good look, complete with code examples, at how some new media queries (part of the CSS Level 5 Media Queries spec) can help us target based on input device.

Michelle Barker

Meet :has, A Native CSS Parent Selector (And More) — A detailed look at the early spec of the :has selector, and how it should improve the CSS workflow once it’s released.

Adrian Bece

The CSV Importer You’ll Love to Build — Flatfile integrates with your app, in minutes, to auto-validate and transform messy spreadsheet data. The slick import wizard guides users through an intuitive import flow and enables your users to import their own spreadsheet data, with confidence.

Flatfile Portal sponsor

Using Performant Next-Gen Images in CSS with image-set — How you can use the image-set() function to adopt the latest image formats in CSS while still catering for older browsers.

Ollie Williams

Web History: Community — We’ve been sharing Jay’s regular write-ups on the history of the web, and the latest, looking at all things community (think bulletin boards, GeoCities, NeoPets, etc) is out now. An always excellent chronicle, the series is well worth catching up on.

Jay Hoffmann

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Media Queries in Times of @container — With container queries now on the horizon - will we need media queries at all? The author explores use cases where @container probably won’t fit.

Max Böck

Overlay Fact Sheet — A lot of notable signatories from the frontend world on this open letter/information sheet aimed at educating on web-accessibility overlays.

Karl Groves

Chrome Extensions: Clarifying Extension Policies for A Safer, More Consistent Web Store — An update from the Chrome team on refreshed security requirements and clarifications on policy to keep the quality of extensions high, and the experience for developers consistent.

Rebecca Soares and Benjamin Ackerman (Google)

CSS Frameworks in Vogue, But Don't Forget Style Fundamentals — Yes, CSS frameworks are here to stay, but Richard reminds us not to become overly-reliant on frameworks and to learn the fundamentals below the abstractions.

Richard MacManus

Accessible Design: How Much Motion Is Too Much Motion? — A process breakdown of how to create Accessibility compliant interaction design within a framework.

Heather Waroff

Google No Longer Requires Publishers to Use The AMP Format. Bad News: What Replaces It Might Be Worse

Scott Gilbertson opinion

Remove Guesswork from Website Bugs with Screenshots and Technical Info

Bugherd sponsor

Tips & Tricks for Testing Accessibility with Assistive Technologies
Karl Groves

Cypress or How I Learned to Stop Worrying and Love E2E
Emma Fabre

The Master Guide to Smooth, Realistic Shadows in CSS
Devang Saklani

Using CSS with ARIA to Enforce Accessibility
Adrian Roselli


Senior Front End Engineer — Austin startup protecting consumers from unwanted telemarketing. Hard problems, large scale, world-class team. JavaScript, Vue.js.

Front-End Developer - Utrust (Remote, GMT -2/+4) — We are changing the world with crypto. Join our team, working with technologies such as React, Redux, GraphQL and TypeScript.

Senior Frontend Developer (Vue, Nuxt) - Remote — We’re seeking an engineer to join our team at Upwork. You’ll be building apps (using Vue & Nuxt) that are used by millions of our users daily.

🧑‍💻 Got a job listing to share? Here's how.

🔧 Code, Tools and Resources

Indiepen: A Privacy-Friendly Way to Embed HTML, CSS and JS Examples — A privacy-friendly solution to embed HTML, CSS and JS code examples on your site, blog, etc. with no cookies or tracking. Does require some fiddling in hosting your code though.

Henrik and André

Free Chat & Activity Feed APIs for Qualifying Teams — Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project.

Stream sponsor

RTL:WTF: Experiment with Right-to-Left Directionality Online — This site lets you read the web like right-to-left readers do so you can help solve the challenges such readers face while educating you a little about internationalization and accessibility.

Moriel Schottlender

iPod.js: A Working Web-Based JavaScript-Powered 'iPod' — This isn't just a fun UI experiment.. as it can actually connect to either Apple Music or Spotify to play tracks from your library too. Source here.

Tanner Villarete

Resemble.js: Image Analysis and Comparison Library — A Canvas-based approach for performing basic color/brightness analysis of images or to test how two images ‘resemble’ each other. Here’s a live demo.

Resemble Convert Date and Time to ISO 8601, RFC, Unix Timestamp, Week Number, Any Time Zone, and More
Alex Gamburg

Berry: A Free Admin Template Built with React and Material UI

Temp API: Test Your Frontend Apps with Temporary REST APIs
Arjun Ganesan