~frontendfocus | Issue 644 - Is anyone using container queries? (16)

Master CSS Grid & Layout Techniques — Grid is the most important tool in a web developer's toolkit for laying out pages — and with this extensive video course you'll learn to achieve complex layouts with minimal code. There's plenty of CodePen exercises too to help best understand the techniques you'll need.

Rethinking Text Resizing on the Web — An in-depth look at how Airbnb approached improving web accessibility at scale, particularly around text size, going beyond browser zoom settings, the challenge such changes could introduce, and the subsequent benefits.

What UI Density Means and How to Design for It — A thoughtful look at how user interface density has changed over the past twenty or so years, defining what such a term means today, along with some thoughts on which approach we should be taking.

On Compliance vs Readability: Generating Text Colors with CSS — Can we emulate the upcoming CSS contrast-color() function with features that have already widely shipped?

We’ve Got Container Queries Now, But Are We Actually Using Them? — Posits that container query adoption isn’t particularly high, and then shares some reasons as to why that may be the case (beyond it just being new, and any potential browser support concerns).

contrast-color() is a Good Thing, But Also Solving the Problem at the Wrong Layer — On the other hand.. some considered thoughts on the new CSS contrast-color() function and how it may placing the effort in the ‘wrong’ place.

Open-Source JavaScript Form Builder to Create Dynamic Forms Right in Your App — With SurveyJS library suite, you can build JSON-driven forms in a fully-integrated no-code form builder and store responses in any backend, inc. PHP, ASP.NET Core, and Node.js.

Navigating the Variety of Web Accessibility Evaluation Tools — A handy, in-depth guide on web accessibility evaluation tools, their features, and effective usage.

<style>: Inline Optimizations for the Bold — Some brief thoughts on the potential performance bump of inline CSS.

Hidden vs. Disabled In UX — Considerations for hiding versus disabling, along with possible alternatives to improve your UX.

CSS Pattern: Fancy Backgrounds with CSS Gradients — A collection of nice background patterns, now 144 strong, made with just CSS. We first shared this last year, but it's had lots of updates since.

Instant, Detailed Online Store Performance Analysis for Devs — Analyze site performance and get clear next steps for improvement with Elastic Path’s free Storefront Grader™.

Vue Fluid DnD: An Animated Drag-and-Drop Library for Vue — Designed for lists of items and you can view a variety of examples here, including one where the items are draggable using handles. GitHub repo.

Gradientor: A Minimalist, Beautiful Radial Background Generator — Mostly for inspiration, the tool lets you click, move the mouse, and scroll to change the color, position, and size of the gradient and you can choose from three types of colors (vibrant, pastel, or monochromatic).

Daily Quiz: A Gallery of JavaScript Quiz Questions — A decent way to learn some of the quirky and esoteric parts of the language. Click any of the examples to view some code, after which you can guess the output using a multiple-choice format.