Using radial gradients to create shapes. They are similar in some ways to svgs.

:root {
  overscroll-behavior: none;
}

A codepen demo https://codepen.io/michellebarker/pen/vYbrpbX

CSS has gotten easier to write than it is different to write.

• use :is to group multiple selectors such as a:hover and a:focus
• using logical properties instead of marg
• margin-trim can help by removing the last margin child element of a list for example. It is experimental, so Flexbox with the gap property
• aspect-ratio to set only one dimension between the height and the width, while keeping proportions
• .card:has(:hover, :focus) is easier and straightforward than a.card-link:hover > .card
• an easier way to define color palette with --gray-dark: color-mix(in srgb, var(--primary-color), [#fff](https://shaarli.lyokolux.space/./add-tag/fff) 25%);. It is more maintainable!
• ch for managing line lengths; text-wrap: balance is a work in progress (65% of users can use it)

and more with cascade layers, container queries, <selectmenu> and CSS nesting

A feedback from trying to reuse HTML: it still needs JS at the moment.

The technique is to group all SVG images in one big SVG; and then reference them across the website with:

<svg class="icon">
  <use xlink:href="#svg-id"></use>
</svg>

Two good rules of thumbs. I often use them in JS and Vue hints about avoiding v-if in v-for directives.

This is a super simple service for generating different HTTP codes.
It's useful for testing how your own scripts deal with varying responses.

Custom response headers can be set, as the HTTP status code.

This website is a single HTML file. It simply uses the #anchor suffix (from 1992) and the :target CSS selector to show and hide pages/content.

This setup1 is databaseless, javascriptless, and buildshit-free, so you can edit your website with a text editor and upload it somewhere2 like a normal person.

The 4 examples are from the WAI, Deque, U.S. Web Design System et Tommy Feldt.

• use lang for the language of the page, then the other parts of the page with a different language
• support different writing direction. Logical CSS properties help.
• handle text expansion with adaptive layouts. Avoid to truncate the text.
• apply a minimum width to avoid text shrinking in other languages. Also think about the height.
• readable typography is important
• make sure every user-facing string is translated such as alt-text, title or desc nodes in SVG.
• different languages have different word order, so avoid string templates
• ensure consistency of microcopy

  Microcopy is all the little bits of text that appear throughout the site: the nav links, the sidebar headings, the form field labels, stuff like that. When microcopy is written and used consistently, the site layout becomes much more predictable, and users won't have to guess

It means the atoms and some molecules in atomic design.

Starting with the right HTML tags and using semantic HTML is a first easy step compared to retrofitting accessibility.

It related to landmarks, menus, checkboxes, buttons, headings, bold and italic texts,

Recommended rust crates and resources can be found at the end of the guide

The headlines of the content picture well what content is in this post:

• The web used to be weirder
• Animated GIFs (WordArt)
• Music
• Cursor trails
• Webrings
• Guestbooks

and ho it differs from SCSS.

It explains the Writer monad and the Option monad.

This pattern is used for future or promise by the way.

aria-label and aria-labelledby are exclusive. So they can be enforced for components in typescript:

type ToggleSwitchProps = {
  name: string;
  checked: boolean;
  handleToggle: () => void;
  size?: "sm" | "lg" | "base";
  classNames?: string;
} & ({ ariaLabel: string; ariaLabelledBy: never } | { ariaLabel: never; ariaLabelledBy: string });