~frontendfocus | Bookmarks (15)

The F-Shape Pattern and How Users Read — When users consume your content they will be scrolling, scanning, and skipping around your page. Here’s what you need to know about typical reading behavior and design strategies you can consider to prevent potentially unwanted scanning patterns.

The Things Users Would Appreciate In Mobile Apps — Pointers on things like forms, search, navigation, roomy elements, etc.

Infinite-Scrolling Logos in Flat HTML and Pure CSS — Remember the long-deprecated HTML <marquee> element? If you need a horizontal auto-scrolling solution nowadays, you’ll no doubt turn to CSS. This post demonstrates one technique that uses as little HTML as possible.

A Web Designer’s Accessibility Advocacy Toolkit — A collection of strategies and selling points to help you encourage and advocate for accessibility in your work, including useful scripts you can use as starting points.

Setting and Persisting Color Scheme Preferences with CSS and a “Touch” of JavaScript — Done via a combo of prefers-color-scheme, :has(), and JavaScript localStorage.

A Practical Guide To Designing for Colorblind People — Some practical accessibility guidelines and resources to ensure more inclusive design for those with color vision deficiency.

Modern CSS Tooltips and Speech Bubbles — Everyone knows what tooltips are, but despite their ubiquity, there’s no single, universal way to create them. The author of this post presents some modern techniques to create tooltips with the smallest amount of markup while retaining the most flexibility.

Reporting Core Web Vitals with the Performance API — The Performance API provides an interface to ways to measure and evaluate Web performance metrics from JavaScript. Geoff demonstrates how to use its features to do your own performance reporting.

Mobile Accessibility Barriers for Assistive Technology Users — A collection of lessons learned from assistive technology users, highlighting the challenges and barriers they encounter on mobile devices.

Things Frequently Heard in My Beginning Frontend Web Development Class — What could we learn from entry-level students in frontend web development? Geoff opines that it's newcomers to the space who ask the most intriguing questions and who make “connections that those of us who have spent years on the front end may have never considered”.

CSS Blurry Shimmer Effect — Yair shares a step-by-step explanation of how this curious blurry shadow effect comes together, using a combo of masks, gradients, and the backdrop-filter property. CodePen demo.

The Complex and Awesome border-image Property — If you’ve never reached for the powerful border-image property, Temani demonstrates some different approaches for using it to create clever decorative accents and shapes.

Top Frontend Tools of 2023 — An excellent collection of popular, useful frontend tools for both CSS and JavaScript developers. You'll no doubt find something here to help speed up your development workflow.

New CSS Viewport Units Don't Solve the Classic Scrollbar Problem — On the problem with 100vw, how browsers handle scrollbars, and what future solutions we may have to solve the issue.

07: The Top Front-End Tools of 2022 — It might feel a bit dated to share a 2022 round-up in 2024, but this collection of handy frontend tools remains relevant nonetheless with plenty of tools to help speed up your workflow.