Frontend Inspirations #3

July 24, 2023

• HTMx: Building modern web applications without JS

  HTMx allows developers to leverage HTML, HTTP and REST as the primary tools for building dynamic user interfaces and enables faster development without reliance on JavaScript frameworks and dependencies. Also, it embraces progressive enhancement and graceful degradation principles.

  We had a great time at Frontend RheinMain with Carson Gross, the inventor of HTMx. You can get a good overview there.

• Modern CSS For Dynamic Component-Based Architecture

  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.

• Too Much JavaScript? Why the Frontend Needs to Build Better

  One company found that too much JavaScript costs them $700,000 per year, per kilobyte. Here's what Alex Russell says needs to change.

  "Something wrong happened on the way to building a world-wide web: We’ve wound up at a place where many websites are designed more for the minority of super users than for the majority, Russell contended. And frankly, that majority is accessing the internet on much slower devices, at much slower speeds, than most developers (and tech journalists)."

• Motion

  Motion is a website that showcases the power of UI/UX animation in conveying the mood and character of a brand.

  It's a beautifully crafted resource using and explaining motion, animation and design principles

• When is :focus-visible visible?

  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.

• Vision Pro Accessibility

  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.

• The massive bug at the heart of the npm ecosystem

  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.

• A case study on scroll-driven animations performance

  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.

• ESLint configuration migration guide (from eslintrc to flat format)

  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).

• Material Web Components are now beta

  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 - Use JSX without React

  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.

• Flexer

  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.

• New Viewport Units

  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.

• The new @font-face syntax

  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.

• Invisible Details of Interaction Design

  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

  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.

• TypeScript Function Types: A Beginner's Guide

  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.

• How Shadow DOM and accessibility are in conflict

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