2023-07-24-Inspirations

When do user agents determine that focus should be indicated? According to the :focus-visible specification, user agents are free to choose their own heuristics for indicating focus. However, the spec includes some suggestions, which most browsers have adopted. These suggestions can be broken down into four questions. Let’s break each of these questions down.

Today, we will explore modern project architecture, emphasizing theming, responsive layouts, and component design. We'll learn about features to improve code organization and dig into layout techniques such as grid and container queries. Finally, we'll review real-world examples of context-aware components that use cutting-edge CSS techniques. You're sure to be inspired to expand your CSS skills and ready to create scalable, future-friendly web projects.

Apple’s latest innovation, the Vision Pro was introduced at WWDC -- the number one question is, "Will it be accessible?" Imagine a mixed reality head set that could potentially tell you what you’re looking at with Point and Speak, while its inside cameras stream your face onto the outside screen for people to see.

Scroll-driven animations can enhance functionality or visuals, but only if they’re performant. Learn about a new set of APIs that help create even better animations with both CSS and JavaScript.

This guide provides an overview of how you can migrate your ESLint configuration file from the eslintrc format (typically configured in .eslintrc.js or .eslintrc.json files) to the new flat config format (typically configured in an eslint.config.js file).

Google’s Material Web Components are now officially in beta and they are planning to launch their first-ever stable release later this quarter.

NakedJSX is a command-line tool for generating HTML files from JSX. The output is pure HTML and CSS - unless you choose to add your own JavaScript.

A simple CSS flexbox playground that lets you switch between "simplified" and "actual" for the property controls, allowing you to learn the properties either literally or by concept.

Using the vh unit on mobile is buggy. The reason is that the viewport size won’t include the browser’s address bar UI. To solve that, we now have new viewport units.

An article about the new syntax for using variable fonts and color fonts in CSS, including how to test browser support for different font technologies using the tech() function in @font-face and @supports, and the availability of different font formats like woff2, truetype, and opentype.

This article explores the intricacies of interaction design and delves into the science behind the details that make great user experiences, discussing concepts such as kinetic physics, responsive gestures, spatial consistency, fluid morphing, frequency and novelty, and fidgetability.

The Concise TypeScript Book provides a comprehensive and succinct overview of TypeScript's capabilities. It offers clear explanations covering all aspects found in the latest version of the language, from its powerful type system to advanced features. Whether you're a beginner or an experienced developer, this book is an invaluable resource to enhance your understanding and proficiency in TypeScript.

Functions are the small pieces of logic that together form applications. If you write applications in TypeScript, understanding function types is a must. This guide covers everything you need to know to get started with TypeScript function types.

The npm Public Registry does not validate manifest information with the contents of the package tarball, relying instead on npm-compatible clients to interpret & enforce validation/consistency. In fact, as I researched this issue it looks like the server has never done this validation.

Shadow DOM promises to allow developers to create more maintainable, cross-framework components, but there is an as-yet unsolved conundrum for accessibility.