Weekly Shaarli

All links of one week in a single page.

Week 31 (July 31, 2023)

Perspective actionnelle - Clés pour enseigner autrement
Florin Pop - 100 Days - 100 Projects Challenge
Zettelkasten - Elly Loel
  1. Having an "inbox" notes to capture ideas in form of napkin, receipt, voice recorder
  2. Literature notes: When you consume content, take notes of what you don’t want to forget or what you want to use in your own writing. It is recommended to make them atomic. Make sure to include the bibliographic details, author & source at the very least, so you know where you got the idea from.
  3. Permanent notes: every day, you should go through the inbox and seek to refine the fleeting & literature notes. Making connections and turning them into permanent notes.

One idea = One note
One note = One idea

  1. Navigation: an index allows you to navigate in the zettelkasten; keyword notes can also be used as link.
Using CSS to Enforce Accessibility — Adrian Roselli

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.

sneakycrow.dev/blog/2023-07-30-bevy-game-in-svelte-kit

Integrate a rust game compiled in wasm into sveltkit

31 jours sans Instagram, c'est parti ! - Aemarielle
Starlight 🌟 Build documentation sites with Astro
User Feedback - Jim Nielsen’s Blog

You build things thinking you know what people want and how they’ll use it but they’ll often surprise you.

I distinguish 2 cases:

  • I build for me, so I don't care about feedback
  • I build for others and the user feedback is gold
VigiPets - Animaux perdus - trouvés
512KB Club | A showcase of lightweight websites.

The 512KB Club is a collection of performance-focused web pages from across the Internet. To qualify your website must satisfy both of the following requirements:

  1. It must be an actual site that contains a reasonable amount of information, not just a couple of links on a page (more info here).
  2. Your total UNCOMPRESSED web resources must not exceed 512KB.
Astro - Elly Loel

As I start to gather more and more projects. I will need one to sort them and share them :)

This will allow me to share them, as this post ask for a project to build with Astro

Comment faire si son job de rêve est mal payé ?
  1. Rester calme
  2. Ne pas être obnubilé par l’argent
  3. Savoir combiner plusieurs rôles
How to create an accordion hover effect with box-shadows by Sarah L. Fossheim
mess with dns
Remarque sur l'ecosystème des navigateurs web et la Web Integrity API
Lightsoff - Sensibiliser contre l'éclairage nocturne
Sense of time - Elly Loel

People do not experience the same sense of the flow of time. For some, only now and not now exists.

The Small Web Browser, an inclusive proposal

Defining a subset of the web that removes a lot of complexity :)

Provide a local index of sites complying with the requirements above, so that sites can be found without the use of an external search engine.

How does this scale? How is the index sorted? That was originally the answer provided by search engines.

User Facing State | CSS-Tricks - CSS-Tricks

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.

Represent State with HTML Attributes, Not Class Names | Aleksandr Hovhannisyan

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.

Note: Dictionnaire des noms des opérations WWII

Overlord, Neptune, Fortitude, ...

Et encore, il y aussi le front de l'Est, le Pacifique, etc...

Une opération peut avoir une ou plusieurs sous opérations.

Une opération est définit par son nom. Elle a une date de début et de fin.

Base officielle des codes postaux - data.gouv.fr

Utile au besoin, l'État a publié le registre

Il existe aussi une #API dédiée https://api.gouv.fr/les-api/api_carto_codes_postaux

GitHub - linkchecker/linkchecker: check links in web documents or full websites

It has both UI and cli. It can be useful someday.

Atomic - Elly Loel

A single irreducible unit or component in a larger system.

This definition makes sense to me:

  • an atomic note describes only a singular idea or concept (that can not be split without breaking its sense)
  • an atomic habit is a regular practice that is small and easy to do
  • Atomic design reduces design down to their foundational building blocks of all user interfaces
Vacances sans avion : les solutions pour partir à 1 000 km

Le rapport train - avion est clair: il faut impérativement privilégier le train si on veut avoir un moyen de transport durable.

Facile aussi de proposer des prix peu cher, lorsque

son carburant est détaxé, et le coût des infrastructures n’entre pas dans le prix du billet et la taxation carbone du billet limitée à quelques euros.

Et c'est bien juste. Pourquoi ce secteur est autant aidé? Qu'est-ce qui le justifie?

An Interactive Guide to Flexbox in CSS

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

Salary history - Elly Loel

When looking for a job, it can be tricky to know what to ask for in terms of salary, especially for underrepresented minorities, who are routinely under leveled and underpaid. So I thought it would be useful to share my salary history since becoming a software engineer, in hopes that it will help someone at some point.

The author of https://carol.gg/salary/ shares their salary too

Style with Stateful, Semantic Selectors | Ben Myers

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!

Excluding non-binary people by design: How sign-up forms can lead to discrimination by Sarah L. Fossheim

Even if the subscribing form includes non-binary participant , advertisers have in contrast an "Unknown".

While Google doesn’t allow ads to exclude men or women from jobs, housing, or financial products, they did allow advertisers to exclude the “unknown” category, leaving those outside of the gender binary excluded as well.

Just the way this data gets labeled already shows how much of an afterthought gender diverse people were.

#idea #project: create many categories that fit better than male, female and "unknown". A better list?

If we don’t include and prioritize people from minoritized groups in our design and tech practices, we risk not only collecting incomplete or incorrect data, but also processing and using it in biased and harmful ways.

Fini le ticket de caisse ? Sept questions que pose la disparition de l’impression automatique
Curlie - The Collector of URLs

An index of the web.

92 editors, ~ 1 million categories and ~ 3 million websites

Throw away your first draft of your code | nicole@web

When you develop a major new feature, product, anything, one of the defining characteristics is that you don't know what you're building. The only way you know what you're building is if you've built it before.

This leads to a problem: If you don't know what you're building, how do you know where the rough edges are? How do you know what the design demands, and what technical decisions to make?

Altruism - Elly Loel

Or the limit of altruism:

As lovely as it might seem, our selfless actions usually get prioritized above looking after ourselves.

We will go to unending lengths to look after the ones we love, and even the ones we don’t. We are empaths, we want the best for everyone, so we do our best to try and give them that, usually to our own detriment through self-neglect.

Mastodon is easy and fun except when it isn’t - Erin Kissane's small internet website

Feedbacks from user of Bluesky that tried Mastodon :)

#idea #project : make a UX map of a Mastodon experience that is ... more alive