Weekly Shaarli

All links of one week in a single page.

Week 47 (November 20, 2023)

CSS { In Real Life } | Radial Gradients and CSS Trigonometric Functions

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

The Platform for Privacy Preferences 1.1 (P3P1.1) Specification

Even if this standard is not used for years, some ideas are interesting. How and which data is collected and used are pretty well standardized.

It can somehow interact with the GDPR.

More native than a Web app - Seirdy

When to use a GUI Toolkit, is it more native than the web? It means some criteria the author defines. Also what level of WCAG conformance can someone hope for?

CSS { In Real Life } | What to Blog About When You Don’t Know What to Blog About

Idea of writing:

  • Here’s a cool thing I made.
  • Here’s a cool thing someone else made.
  • Here’s something I just learned.
  • Here’s something I want to learn that looks cool.
  • Why I want to learn/use/do this thing.
  • Why I don’t want to learn/use/do the thing.
  • I’m in the process of learning something but I haven’t quite got it figured out yet.
  • Here’s something else I discovered while learning a thing.
  • Let’s learn a thing together!
  • Here’s a tip, tool and/or person that helped me recently. Maybe it’ll help you too.
  • Here’s a problem that’s been bugging me.
  • This is what I think about work/life/the industry/the world/this UI component right now.
  • Here’s an interesting thing someone else has to say. Here’s my take on it.
  • I’m feeling motivated! This is what’s motivating me.
  • I’m feeling unmotivated or burnt out. Here’s why.
  • This is what I’ve been reading/watching/listening to recently.
  • Here’s a list of things I could blog about.
Introducing b4 and patch attestation — Konstantin Ryabitsev

Git can be extended in many ways. The author of b4 created a cli tool to simplify the patches communicated by email for the linux kernel developers.

Le monde tel qu’il aurait pu être. Mercredi 22 novembre 2023 – Carnet de notes

Loin de rentrer dans cette logique du chan­tage à l’em­ploi, le gouver­ne­ment a déclaré, dans un discours plein de cohé­rence, qu’ils « visaient un système écono­mique durable et que ça ne passait pas par faire la promo­tion d’une consom­ma­tion de l’inu­tile », et que « sur le long terme nous avons tout inté­rêt au contraire à faire une force d’avoir des emplois centrés sur des besoins réels et un apport de valeur qui ne se voit pas que sur le chiffre d’af­faire ».

L'alliance du commerce pas contente à cause du spot du pub 😡 C'est peut être que vous vendez de la merde, inutile et superflu.

The stack of specifications - Design Issues

The internet works because

  • there is a stack of protocols built to make things work. Each protocol solves one thing.
  • all miraculously work together because these standards are open.

Tim takes the example of the network stack: Ethernet Packet, Internet Packet, TCP Packet, the port, and the email protocols.

Protocols and standards are everywhere. He takes more examples. When you publish a web page for example: it can be both human and machine-readable. It can be accessed through a URI and when someone follows a link to your web page, their browser opens a TCP/IP connection to TCP port 80 on the machine which is registered as serving the (www.whatever.com, etc) in question. All of that is because the URI specification says that what you can tell about a URI depends on the first bit, in this case HTTP. Tim explains in depth why these relationships exist.

An XML document is a less specified version of an HTML document. The namespace declaration gives a URI indicating the namespace used to interpret this XML though. And more...

An RDF document is based on XML and a triple: a value of some property of some object, or some relationship between some object and some other object. How to figure out what a triple means? A URI defines it, and its standard can be read while dereferencing it. The color example is great! So the stack for this document piles up from the Ethernet to the RDF MS 1.0 and RDF MS 1.0 definition of rdf:type.

A pattern is that each technology evolves into three stages: using numbers or strings, then using a URI, and then a dereferenceable URI. As we move on to later protocols, the protocols themselves become more diverse, so URIs were created instead of simple versions with numbers or strings. "The third stage of civilization is the one at which the identifiers can be looked up on the web.".

This stack prevents one from sending a nasty email to someone and then protesting that the message didn't mean anything. So if the stack is so strict, how does one send a nasty email message when one doesn't mean it? Many protocols have ways of breaking the chain, of including information that is not part of the meaning of the message.

For the email: an attachment. "So being able to refer to something without asserting it, whether you call it attachment, packaging, or quoting, is an important feature of a language. The fact that you can do this removes the last excuse for anyone claiming not to have meant whatever they did say in the main message!"

CSS { In Real Life } | Choosing a Green Web Host

Green energy means renewable energy instead of carbon credits or offsets.
What is the water consumption of the data center?
What about the energy efficiency?

Green hosting can be found at https://www.thegreenwebfoundation.org/tools/directory/

A Few Ways CSS Is Easier To Write In 2023 — Smashing Magazine

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](./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

Famileo, le journal familial qui fait le bonheur des grands-parents

Envoyer à rythme régulier un magazine avec des photos à ses membres de la famille. Cela est surtout utile aux personnes absentes des réseaux sociaux et messageries en ligne.

Infographie des premières indentifications 2022

Les autres publications (infographies et baromètres) sont disponibles à l'adresse https://www.i-cad.fr/articles/publications

Icad - Accueil
Things you're allowed to do

This is a list of things you’re allowed to do that you thought you couldn’t, or didn’t even know you could. I haven’t tried everything on this list, mainly due to cost. But you’d be surprised how cheap most of the things on this list are (especially the free ones).

Split into categories:

  • Learning & Decision making
  • Interpersonal
  • Support and accountability
  • Making the most of your resources
  • Professional

Write on a post-it note affixed to a greeting card rather than on the greeting card itself, so the recipient can throw away the post-it and reuse your card.

The author shares many other lists.

Association P·U·R·R

L'association "Pour un RGPD respecté" est en cours de formation et va entrer en action. C'est une bonne nouvelle !

Blogroll • Robb Knight
HTML Web Components are Just JavaScript? | OddBird

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

Personal - rootCompute:\
peertube-annuaire.nogafam.fr/

Un annuaire des chaînes Youtube dispnible sur Peertube est en cours de construction :)

Using SVG Sprites • Robb Knight

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>
Clin d'oeil : désespéré, Reef en est réduit à manipuler Wikipedia pour contrer Free
Repeat yourself, do more than one thing, and... — programming is terrible
Blog Stéphane Bortzmeyer: Capitole du Libre 2023, et mon exposé sur la censure de l'Internet
Email vs Capitalism, or, Why We Can't Have Nice Things - Dylan Beattie - NDC Oslo 2023 - YouTube

Why emails is a mess? Because there are a lot of email service providers that does not follow the standard...

Kysely | Kysely

A query builder. It can be coupled to Prisma schema for better performance.

As much as I dig into it, I find raw SQL better (or with a SQL builder).

CSS { In Real Life } | Stop Using AI-Generated Images

TL;DR they degrade illustrators work.

AI can be used by artists to augment their work and explore an exciting, new, creative frontier. But the vast majority of “AI art” I’ve seen is not that. It’s theft. You don’t have a right to “free” art, in the same way you don’t have a right to have your car fixed for free.

Ça prend combien de place un cycliste ? – Carnet de notes
Signal >> Blog >> Privacy is Priceless, but Signal is Expensive

We estimate that by 2025, Signal will require approximately $50 million dollars a year to operate — and this is very lean compared to other popular messaging apps that don’t respect your privacy.

When you send a message, the Signal service temporarily queues that message for delivery. As soon as your message is delivered, that small bundle of encrypted data (i.e. your message) can be dropped from the queue. The storage of end-to-end encrypted files is temporary too, and any undelivered end-to-end encrypted data is automatically purged after a period of inactivity.

It also shows different service costs and why they are like that. It shows the care Signal has to privacy in its different services.

CSS { In Real Life } | Preventing Scroll “Bounce” with CSS
:root {
  overscroll-behavior: none;
}

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

How to Design More Intuitive Websites & Apps | OddBird

Using an object model helps while designing some web pages or content.

An object in a web project is something that has structure, instances, and purpose. Instances are all the specific occurrences of an object.
An instance of the object link can be "When to choose a progressive web app".

So, as we make our user experiences more object-oriented, we also make them more intuitive.” - Sophia Prater, ooux.com.

With this practice, 4 unintuitive objects are identified. The author use the example of a zoo website and they are:

  • isolated objects: they are disconnected from related objects. The penguin animals are not related to the demos and habitat from the list of all the animals. The habitat is also included on the map view of the zoo, but there are no links to the Animal or the demo on this map view either.
  • broken objects: ones that are not directly manipulatable. Demos are useful to show events to the user. As someone who would like to attend the penguin demo, I want to click on an individual demo to see more details, but it is not possible.
  • masked objects: styled to look the same, but are actually different. On the DisneyPlus web view, there is no way to differentiate between a series or a movie. As you want to see a movie (one shot) instead of a series (multiple shots), you have to check on the detailed view in a panel.
  • shapeshifter objects: opposite of masked ones, they are styled to look different, but are actually the same. Date formatting, links, and so on should look and behave the same across the website or the experience platform. They have to be consistent.
Reducing kernel-maintainer burnout [LWN.net]

It was widely agreed that nobody should feel that way, since no one can be expected to catch everything. How to communicate that to the community as a whole is unclear, though.

Ne pas savoir – Carnet de notes

Ceux qui risquent d’être happés par les mauvaises croyances sont ceux qui pensent savoir et affirment savoir alors que ce n’est pas le cas

CSS { In Real Life } | Why You Should Hold Onto Your Devices For Longer

e-waste is defined as used electronic devices with batteries or plugs that are at the end of their useful life.

The main thing you can do to prevent e-waste is to avoid upgrading unnecessarily and hold onto your devices for as long as possible. If a device is no longer needed, consider selling or donating it, or if it can no longer be used then take it to a recycling facility or return it to the manufacturer.

dbrgn/tealdeer: A very fast implementation of tldr in Rust.

I use it since months and satisfied about it :)

PUCE M3 : Ce dont personne ne parle - YouTube

Effectivement, cela se tient avec la technologie Apple Silicon: si les processus units sont les plus efficients du marché, alors ils sont prometteurs pour faire tourner de l'IA.

Apple livrerait donc l'IA en local; là où Microsoft ou OpenAI passe par le cloud.

Society for the Protection of Animals - Wikipedia

Make a german article of it

L'Echappée Belle

Une coopérative de développeurs de 6 personnes :)

Leur site est disponible depuis les sources sur github à https://lechappeebelle.team/. Ils ont déjà des expériences https://lechappeebelle.team/nos-experiences.html

TOML: Tom's Obvious Minimal Language
Configuration | pinia-plugin-persistedstate

Update the documentation of JSON.stringify/JSON.parse as serializer/deserializer.

#idea #project

007: CSS is not a natural disaster • Buttondown
Getting started with CSS container queries | MDN Blog
Fire Chicken Webring

An invite-only webring for personal websites.

from the blog post: https://arne.me/articles/we-need-to-bring-back-webrings

Sans le vote des retraités – Carnet de notes

Le danger de cette vision [que le vote de quelqu'un ne se vaut pas] c’est qu’une fois ouverte l’idée que les choix de tout le monde ne se valent pas, on peut les enfon­cer très loin.

7 types de base de données | Pragmatic Nerdz | Wutsi
The experience of being a woman at a tech conf – a WebSummit 2023 recap
html - Is a URL allowed to contain a space? - Stack Overflow

Past a URL and retrieves some information about it.

First: check if the url is "safe"