I heard of it from the blog post: https://scottwillsey.com/astro-expressive-code/

It has an integration for Astro: https://github.com/expressive-code/expressive-code/blob/main/packages/astro-expressive-code/README.md

Basic validation can be done with HTML/CSS and the CSS selector :user-valid or :user-invalid pseudo-selectors

User-agent: GPTBot
Disallow: /

User-agent: ChatGPT-User
Disallow: /

To favorise:

• checkbox
• file
• hidden
• radio
• password
• text

To avoid:

• button
• date
• datetime-local
• email
• month
• number
• reset
• search
• submit
• time
• week

The rest is not sure or evident...

How do we actually encapsulate state, and actually regain compositional reasoning, fully? The technique that actually works is confining state locally. Confining state to within an object (“encapsulation” as it’s usually meant) doesn’t get us there because the state is owned by the object and thus escapes, but fully-local to a function does successfully isolate that state.

Resources to learn programming "in the large".

Resources to learn programming: in which order or why. Sources are different

On the part about algorithms:

We teach algorithms so that students learn to think about invariants and properties when writing code. Real-life code is usually simple enough that it mostly works if you just throw spaghetti onto the wall. But it doesn’t always work. To write correct, robust code at work, you need to think about invariants.

There is a list of algorithms too :)

And there is one site for every main programming topic: compilers, OS, ...

Update the styles of the web pages with custom ones :)

It contains all the gotcha we can find with the flow and cross axis, minimal width, align-content, margin auto, etc...

If a state is important enough to indicate visually, it's probably important enough to expose to assistive technologies.

With an example such as <a href="/about" aria-current="page" class="current-page">, we now have two meanings that convey the same information: the aria attribute and the class. This can leads to bugs while refactoring.

Another example is provided with dropdowns or toggle buttons, and sorted table columns.
Mentions to :disabled or aria-disabled, :invalid or aria-invalid, aria-selected, role="tab", and the list can go on!

You need to be using the appropriate elements (s are your friend!), and managing the appropriate attributes and their values to make truly accessible user experiences.

The idea: uses CSS to detect accessibility issues.

The author uses different code snippets for it. One ensures the outline of the focus is never clipped. Another makes sure that not expanded content (aria-exanded="false") is not displayed. Another one targets aria-invalid elements. A busy container is not displayed in CSS, etc...

Every time you come up with a style that reflects a state or property of something (open, closed, expanded, collapsed, on, off, checked, disabled, busy, locked, selected, sobbing uncontrollably), do not use a class.

And an argument against utility-classes such as Tailwind: If you use these tools, you still need to know CSS. On top of that, you may need to know the tools’ syntax in order to incorporate any CSS that goes beyond what they offer. If you build these tools, please consider how you can use CSS that promotes and reinforces good and accessible underlying HTML syntax.

It provide a good example: this semantic HTML

<button
  id="navbar-toggle"
  type="button"
  aria-label="Toggle menu"
  aria-controls="navbar-menu"
  aria-expanded="true"
></button>
<ul id="navbar-menu" aria-labelledby="navbar-toggle"></ul>

should be styled as follow in CSS

/* State: closed. Click to open. */
#navbar-toggle[aria-expanded="false"] {}

/* State: open. Click to close. */
#navbar-toggle[aria-expanded="true"] {}

Just as before, it turns out that the class name was completely redundant. In fact, because we reached for a class name prematurely, we forgot to communicate the right semantics at the markup level.

Integrate a rust game compiled in wasm into sveltkit

The benefits of min-width: 0; while overflowing with flexbox