Use: <video autoplay loop muted playsinline src="cats.mp4"></video> as Twitter does

About #mp4, #webm, #x264, #x265, #VP9, #VP8, #AV1 containers and codecs

Evilmartian uses the new codec and here is the comparison: "In AV1 it is just 68 KB, similar to the image file. HEVC is 195 KB, and H264 is 512 КB."

Use an image for dark mode only 😯

<picture>
  <source srcset="dark-animation.avifs" media="(prefers-color-scheme: dark)">
  <img src="light-animation.avif" alt="">
</picture>

webkitdirectory multiple to allow a directory and every files in it to be uploaded :)

Limitations and workarounds about the number input.

From the UK government:

You can put the capture attribute on inputs with the type of file, and you can give it a value of “user” or “environment“. The interesting thing about the capture attribute is for users coming to your website on a mobile device. If they interact with that input, instead of opening up the default file picker, it will actually open up one of their cameras.

Read the reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture

Web Content Accessibility Guidelines Success Criterion 2.4.4: Link Purpose (In Context) instructs us to ensure that a link’s accessible name makes sense when separated from its surrounding context. It’s why “learn more about elephants” is a far more effective link name than “click here.”

Cool to know.

This is all about maintaining an equivalent experience by not over-describing something for only a certain subset of people. Here, the goal is to preserve the author’s intentional act of creating a sense of curiosity, regardless of the way someone interacts with technology.

User-facing state is what someone experiences when they interact with (or try to interact with) an element in some capacity. It is reactive, helping to communicate the ways in which something can be manipulated.

It is also worth noting that on the web, the majority of user-facing state can be communicated programatically. This means that there is an HTML attribute or ARIA declaration that can ensure people who can’t see the content can understand the state something has been set to.

It is different from the application state.

The states:

• resting: the status of something before someone has interacted with it, or other content affects it. Oftentimes referred to as “Base” or “Default.”
• hovered
• active
• focused
• visited
• loading / loaded
• disabled
• hidden
• readonly
• enabled
• checked: marked for sending as data to another internal or external resource. Can be focused, but keeps it's selected state after focus is moved
• unchecked
• undeterminate
• selected / deselected
• dragged / dropped
• collapsed / expanded
• resizing
• dirty: an editable element that has been manipulated on one or more occurences
• pristine: editable element has yet to be manipulated by someone
• saving
• overflowing
• scrolling
• playing / paused / stopped
• sticky
• unstuck: sticky element removed from a side of the viewport back it its original position

The article element represents a complete, or self-contained, composition in a document, page, application, or site; that is, in principle, independently distributable or reusable, e.g., in syndication.

I gave my usual answer: think of

not just as a newspaper article or a blog post, but as an article of clothing — a discrete entity that can be reused in another context. [...] It means an article represents content that can be taken out of the document and away from the immediate surrounding content, dropped somewhere else, say on another page, and still make total sense as it is grouped.

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

A general rule is that the section element is appropriate only if the element’s contents are listed explicitly in the document’s outline. [...] a section is a part of a larger group without which it may not necessarily stand to make complete sense alone

To provide more meaning to a section for assistive technology: the attribute aria-labelledby="an-id" or aria-label=" a meaning" can be used. A labelledby attribute can be bound to a title for example.

This example of meaningful semantic shows the usefulness: https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ceca208c-154e-42f4-b769-b62c67f0c125/content-design-screenshot.png

Another problem is social markup not being identified properly, for example by LinkedIn, if it’s not following a start tag.

Wtf

Minimal markup:

<!-- <head> (and <body>) needed for LinkedIn -->
<head>
  <!-- “twitter:card” and title needed for Twitter -->
  <meta name=twitter:card content=summary_large_image>
  <meta property=og:title content="This is a test title">
  <!-- Quotes needed for WhatsApp and Signal -->
  <meta property="og:description" name="description" content="This is a test description.">
  <meta property="og:image" content="https://hell.meiert.org/core/png/test.png">

I totally agree and it felt natural to me

Memory and local storage are great for “private” state — settings, caches, history. URL parameters are good for the “public” state, so that one could bookmark or forward the stateful link.

I am already applying that, but only because I had a class about it. It is useful though to have content about it online.

The tricky part is to make sure that requests made with JavaScript work the same as with HTML.

• Implement features in HTML first
• then add javascript

Conveniently, if the HTML is done properly we can derive all the information we need.

document.querySelector('form').addEventListener('submit', (event) => {
  const form = event.target;
  const url = new URL(form.action || window.location.href);
  const formData = new FormData(form);
  const searchParameters = new URLSearchParams(formData);

  const options = {
    method: form.method,
  };

  if (options.method === 'post') {
    // Modify request body to include form data
    options.body =
      form.enctype === 'multipart/form-data' ? formData : searchParameters;
  } else {
    // Modify URL to include form data
    url.search = searchParameters;
  }

  fetch(url, options);
  event.preventDefault();
}

For POST requests, we’ll send the data in the request body.

• If the form explicitly sets the enctype to 'multipart/form-data', it’s safe to use FormData in the body.
• Otherwise, we can fall back to URLSearchParams.
  For GET requests, we’ll send the data in the request URL with the URLSearchParams object.

For the response: the header Accept: 'application/json' tells the server that json is awaited by the client else return HTML or a redirect :)
if we want to support HTML forms, we are though limited to GET and POST. But there is a nice workaround too:

• The GET and POST routes don’t change.
• The PATCH and DELETE routes become POST.
• We append the “methods” /update and /delete to their respective routes.

Also: to include extra data in your request, you can use and input with the name, value, and the type of “hidden”.

It is also important that not all progressive enhancement is a zero sum game.

<P> was meant to be a break tag between paragraphs!

Some smooth checkboxes :)

Why zoom is deactivated on some websites ? What is the advantage ?

You can force it though:

In Firefox find the settings, select “Accessibility” and activate “Zoom on all website”
In Chrome find the settings, select “Accessibility” and check “Force enable zoom”

→ Remember: if your user is supposed to go somewhere, use an <a> element. If something with JavaScript needs to happen, use a <button> element.

I agree with that: link for navigation and button to trigger actions.

About the onclick attribute and the event variable: onclick="submit(event)" works. But why ?

The spec shows that the string passed to a handler is combined like this:

function $name (event) { $body }

I'm not sure what $name is but $body is the string passed to the handler attribute in HTML. event is an argument. This string becomes a function through the Function constructor I'm assuming.

• enterkeyhint
• cite (reference an URL to an <q>, <blockquote>, <del>, <ins>) and datetime
• attributes for custom ordered lists: reversed, start, type, value
• download attribute for <a> that has a value for the suggested file name
• decoding attribute for the <img> element: sync or async the decoding of a picture.

• trigonometric functions
• new viewport unites
• :focus-visible
• scroll-behavior can be smooth :)
• lazyloading images by default with an attribute
• html element to get a modal with all the accessibility stuff baked right in ([demo](https://codepen.io/una/pen/dyJRwvG))
• array.prototype.at supports negative integers