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 });

The author takes the example of a tree structure.

TL;DR; Start with lifetimes, if it is not enough and you don't need a specific guarantee: Box, then go for Rc or Arc if needed.

Various way to print "Hello World!" in rust

Advantages of types: they are here to help, improve readability, and provide context

A quick guide on makefiles

All that we did to get this speedup is implement the Serialize trait using one line for the body of the serialize method!

But implementing the trait directly loses the possibility to serialize the structure with the #derive(Serialize) macro.

Instead, you should implement it on wrapper types that act like formatters.

Also for efficiency: format_args! doesn't allocate or even apply the formatting! It only returns Arguments which is a formatter that borrows its arguments.

Ok not bad at all. I still think Rust is not meant for prototyping, but let's give it a try.

We can now calculate the remainder rem() and the modulo mod in css.

We will have to wait a bit though for browser support: https://caniuse.com/?search=rem() and https://caniuse.com/?search=mod()

1. Consider mixing kebab-casing with camelCasing: --system-color-controlAccent: blue;
2. Using namespaces can help to avoid collision. In the upper example: system is a namespace.
3. Value typing hints to the use cases of the variable. In the upper example: color. It could be fontSize for example
4. Descriptive names can use 2 patterns: icyBlue which is value-based or accent which is usage-based.
5. Dark mode is simpler with usage-based variables

When to use between value- and usage-base?

Variables with value-based names can be useful for restricting the number of values in your interface. Using numbers can be useful, but sometimes overkill.

Usage-based tend to be useful to describe scopes of capability and utility within the project. The utility of a usage-based name comes in how it guides a developer or designer in its use.

There are often 3 levels of abstractions:

• defining the values
• different property for custom controls such as --color-accentColor
• the CSS variable of use in the component such as --button-color

Use padding, relative line-height and a flow layout instead.