How to build common ui patterns that are accessible 👍

One project to unify them all

You simply substract the side distance [y-axis] from the larger corner radius.

That way you end up with the right one for the smaller shape.

Seen on Twitter but I could not find the author again

Postuler que la publicité est un business « honnête » revient à dire que ces milliards d’euros ne seraient pas dépensés sans elle. Et donc revient à démontrer que la publicité appauvrit la population d’une manière démentielle en entrainant une surconsommation qui détruit littéralement la planète.

Lorsque vous achetez des publicités chez un de ces géants, tout ce qu’ils vous offrent en échange sont… des chiffres qu’ils inventent.

Parce que ce sont des boîtes noires et que personne ne peut vérifier le nombre d'affichage, etc...

Le géant Procter&Gamble a d’ailleurs annoncé avoir coupé complètement tous ses budgets publicitaires pour les réseaux sociaux et n’avoir perçu absolument aucune différence dans les ventes.

Avec mes 2500 followers sur Facebook, j’avais découvert à l’époque que chaque message touchait en moyenne 1%, mais que, en payant, je pouvais monter à 5% voire 10% de « ma communauté ». Facebook me faisait croire que j’atteignais un public alors qu’en réalité, je devais payer pour contacter moins de gens que si je leur avais conseillé de s’abonner par mail ou RSS.

En fait, de manière générale, tout fournisseur qui prétend vous vendre l’observation de métriques décidées par lui, mesurées par lui et optimisées par lui est par essence un escroc.

Briser l’incroyable puissance de ces monopoles morbides ne passe pas par l’utilisation d’alternatives ou de succédanés, mais par la réalisation profonde que nous n’avons tout simplement pas besoin d’eux.

Clever and efficient

There is an alternative to the SPA model: a new model with HTML only. It uses modern DOM-swapping interactivity libraries like Hotwire, HTMX, and Unpoly and... something that returns HTML as backend :)

Since version 7.0 has Ruby on Rails Hotwire backed-in!

1. SSR and Jamstack

2. Active Memory Caching

In summary, if you want to increase the performance of your application, you can use server caches to speed up your APIs, but if you want to persist your app state, you should use the local storage cache.

3. Data Event Sourcing

Useful for real-time applications. Connections are made with Websockets.

4.a Prefetching

Pros: Prefetching waits until the browser’s network is idle and is no longer in use and will stop when you trigger usage by clicking a link or triggering a lazy loading function.
Pros: Prefetching caches data within the browser, making page transitions faster when redirecting to a link.

4.b Lazy Loading

Lazy loading can only help you delay downloading resources and doesn’t make your resources smaller and more cost-efficient.

5. Resumability

Essentially, Resumability uses the server to do the heavy lifting and then gives the client a minimal amount of JavaScript to execute via serialization.

A captcha with proof of work (~2s). This can definitely be better for every user as they do nothing. It's free software, privacy-friendly, and it doesn't use IP addresses (so users won't suffer what reCaptcha or CloudFlare impose).

They have a GitHub organization: https://github.com/mCaptcha

A way to avoid to pull with a request at regular intervals:

• the user subscribe to events similar to JS Events
• the server send them at its pace

Stats are there for the year 2022, and updated yearly. A mine of resources.

I find it hard too :/

Rule of thumbs:

1. Show errors immediately if issues are severe
2. Late validation is almost always better
3. Validate empty fields only on submit
4. Reward early, punish late: if a user edits an erroneous field, we should be validating immediately, removing the error message and confirming that the mistake has been fixed as soon as possible (reward early). However, if the input was valid already and it is being edited, it’s probably better to wait until the user moves to the next input field and flag the errors then (punish late).
5. Validate after a copy-paste
6. Allow users to override inline validation
7. Just in time validation
8. For short forms, consider validation on submit only. For complex forms, use the task list pattern

These statements of architectural principle explain the thinking behind the specifications. These are personal notes by Tim Berners-Lee: they are not endorsed by W3C on anyone else. They are aimed at the technical community, to explain reasons, provide a framework to provide consistency for future developments, and avoid repetition of discussions once resolved.

Examples of original icon hover effects 👍

Examples of original button effects 👍

Examples of original link effects 👍

Two circular navigation demos

A demo of 3 types of navigation menu with sublebels:

1. Overlapping levels
2. Covering levels
3. Overlapping levels with backlinks

Improved list designs. It's refreshing.