Monthly Shaarli

All links of one month in a single page.

March, 2023

shlinkio/shlink: The definitive self-hosted URL shortener

The best OSS and free alternative I found so far

Needle

Create 3D scenes for the web

Robin Mastromarino - Interactive Designer

An example of original interaction

Accessibility vs emojis. At an emojis best, they can add fun and… | by Camryn Manker | Mar, 2023 | UX Collective

For accessible emojis:

  1. Use them sparingly as the screen reader will read them all.
  2. Use them at the end in order to keep the sentence consistent.
  3. Keep words instead of emojis: the words convey a better meaning.
  4. Avoid them in bullet lists
  5. Avoid emojis to convey an information
  6. Context can be misleading in the use of the emoji! It emphasizes points 3. and 5.
vueuse/sound: 🔊 A Vue composable for playing sound effects

UseSound 😳

Justice / Presse / Agenda

Idée de projet: visualiser les agendas des personnes du gouvernement :D

Inspiré de AgendaDeMinistre (https://framagit.org/agendadeministre)

HACKED Font | DavidLibeau | FontSpace

A haker font that is still readable :)

Typst: Compose papers faster

Le successeur de LaTex? A service similar to Overleaf.

The End of Front-End Development

caused by AI? Such an AI is incompetent.

Fichiers de police et de gendarmerie : dix ans de détournements  | Mediapart

Voilà :)

Partage de la valeur : la "prime Macron" a en partie remplacé les hausses de salaires

Je poses cela ici

BlackRock, la finance au chevet des retraités français, par Sylvain Leder (Le Monde diplomatique, janvier 2020)

Pendant ce temps de réforme, il faut se tenir informé. Voici l'entrée de la retraite par capitalisation avec les conseils de BlackRock.

Orange-Cyberdefense/KeePwn: A python tool to automate KeePass discovery and secret extraction.

A python script to help red teamers discover KeePass instances and extract secrets.

Gilles Babinet on Twitter: "D'abord il a plutôt raison. A une échelle internationale, on observe un découplage depuis en gros 1980. Donc le capital gagne plus qu'avant sur le travail. (source OCDE) => https://t.co/8zRcB6lliB" / Twitter

Où sont passés les gains de productivité issus de la technologie numérique?

  1. à l'échelle internationale, on observe une augmentation des revenus du capital depuis 1980.
  2. cela n'est pas applicable en France.
  3. on ne voit pas les gains de productivité en macroéco. On les voit très bien en microéco. Exmple de Amazon et Wallmart: Amazon à un ratio de rendement au m2 7 fois supérieur à Wallmart, avant que cette société ne commence à s'adapter. Au niveau microéco, il y a de nombreuses hypothèses mais rien de confirmée.
  4. Une étude de l'UE suggère qu'avec plus de travailleurs dans le domaine informatique, le PIB augmenterait (1 million, 2% du PIB). L'étude doit encore être retrouvée
Interactive SQL Examples in JavaScript

Eḿbed SQL examples in a web page. It uses a browser-compatible compiled sqlite under the hood .

Level Up Your CSS Skills With The :has() Selector — Smashing Magazine

A good starter to use cases for the :has() selector

Lessons Learned As A Designer-Founder — Smashing Magazine
  1. You have multiple hats: separate them. Split up the design tasks from the implementation tasks.
  2. Know your environment, fit in your team
  3. Do hero mockups before implementation
  4. Use Design Briefs to keep track of raw notes and decisions.
  5. Design system helps to be more productive
  6. Research: focus on the 20%. 80% of what a good designer does should be usable.

We have a broad array of tools at our disposal. Use them! Only the right tool for the job.
Low fidelity can be better than no fidelity.

Enseigner les langues autrement : ce que l’exemple des Pays-Bas nous apprend - Journal des bonnes nouvelles

Marjolijn Voogel signale que la perception de l’importance de parler français aux Pays-Bas est toujours en déclin, surtout suite aux réformes à la fin des années 1990.

Ces résultats, sont à rapprocher d’un environnement pauvre en occasions de se confronter régulièrement à la langue et de méthodes pédagogiques surtout basées sur les structures de la langue, la grammaire et la traduction plutôt que sur l’usage.

En revanche aux Pays-Bas,

Les méthodes utilisées considèrent que le langage est un assemblage de mots fréquemment utilisés par des locuteurs dont c’est la langue de socialisation, auxquels les apprenants doivent être exposés de façon répétée à travers des activités créatives et des tâches réelles de la vie. Elles correspondent à (la théorie dynamique de l'usage)

Afin d’exposer le plus possible les apprenants à ces constructions, du matériel différent est utilisé selon le niveau et l’âge : des contes (au primaire et au collège), des textes ou vidéos créatives et réelles (au lycée) et des films (à l’université).

Aussi les logiciels Slimstampen ou FluentU sont utilisés afin d'apprendre les mots via des cartes à la manière d'Anki.

AustinGil/vuetensils: 🍴 A tasty toolset for Vue.js 🛠 - Lightweight, functional components to boost your next project.

Featured components that are ready to be styled.

Note: rewrite Git Fork for the web

Use a web UI to ensure compatibility.
Operations are made through system calls of Node, Bun or deno or the git cli command as the FileSystem API is not widespread.

Reading and Writing Files in SQLite

It uses the sqlean-fileio extension. It allows to import/export data from files such as JSON :)

SQLite the only database you will ever need in most cases
mjl-/mox: modern full-featured open source secure mail server for low-maintenance self-hosted email

A minimalist email server without UI

Pompe le Mousse (Akren) on Twitter: "Et j'ai bossé chez Capgemini et je sais comment se font les projets, c'est de la merde de bout en bout je vais vous expliquer comment fonctionne leur modèle ⤵️" / Twitter

Les mauvaises pratiques de Capgemini semblent être pointé du doigt. Il s'agit des ESN en général.

Ukraine : comment un jeu de plateau aide à planifier des offensives bien réelles sur le front

Le jeu de plateau mémoire 44 :D

Le jeu de guerre ne permet pas de prédire l'avenir, mais d'identifier des problèmes. Le joueur se rend compte que telle partie du plan n'est pas très adaptée. Plus aucune opération militaire n'est menée sans avoir été jouée au préalable, sur une carte, avec des petits soldats, des dés et des cartes.

Dumb Password Rules

A collection of websites

no hello

Just ask the question!

antfu/vscode-file-nesting-config: Config of File Nesting for VS Code

Nest similar files that are in the same directory.

Steve Bauman 💎 on Twitter: "With Vue you can do some cool stuff with a self-closing <template> tag -- like creating variables dynamically outside of your data/refs. You wouldn't want to do this all the time, but in certain cases, it's super helpful and can be really neat pattern! https://t.co/xaexTMkik5" / Twitter

It can be useful in some cases: to declare variables in the <template> directly.

«Pour ou contre les trottinettes» : les opérateurs assument de rémunérer des influenceurs pour inciter au vote

Alors garçon, on ne veut pas laisser les gens décider par eux-mêmes ?
Pourquoi ce si grand besoin d'influence ?

Le vétérinaire n’arrive pas à déceler la maladie de sa chienne, ChatGPT y parvient et la sauve
A Web Developer's Browser | Responsively App

Display a web view with different sizes simultanously

Color Game
The Boolean Game

Build up forms from rectangles and triangles

Flexbox Froggy - Ein Spiel, um CSS flexbox zu lernen
Produit versus Side Project | EventuallyCoding

Quelle est la différence entre produit et side project

  1. Ne pas écouter ses utilisateurs (car le produit n'est pas fini)
  2. Se concentrer sur les fonctionnalités aux lieu de prototype technologiques, surtout lorsque cela est fait par des tech/devs.
  3. Un produit demande plusieurs corps de métier à l’œuvre. La vente est importante, ou des compétences légales ou financières.

Un side project c'est un projet qu'on réalise à côté, le soir, le week end. C'est un extra en dehors d'une autre activité. On le fait sans contraintes en mode best effort. Et si j'arrive à une conclusion désormais, c'est que dans beaucoup de sujets, le mode best effort c'est le meilleur moyen d'échouer.

Bref, pour caricaturer, il y a donc deux extrêmes qui ne marchent pas :

  • le mode best effort, sans moyen, sans temps alloué
  • la profusion de moyens et l'absence de contraintes

Et pour transformer un side project en produit, il faut viser la solution médiane : être à 100% et avoir des contraintes.

Indextreme.fr

Répertoire des symboles d'extrême-droite

Stencil

A framework to build web components where targets can also be other web frameworks.

flauwekeul/honeycomb: Create hex grids easily, in node or the browser.

A great project to get started with hexagons (for example, a map).

Tackling TypeScript
Kant faut y aller... on Twitter: "L’ART DU CHIFFRE Un lapin dessiné avec seulement deux chiffres : 23. Par le designer hongkongais Kan Tai-Keung. Génial. https://t.co/zwpZrVl5uK" / Twitter

23, avec un lapin

sites with a /now page

A collection of websites that have a "now page"

about nownownow.com

Another page: what is the owner or organization doing now (this year) instead of the generic about.

A Complete Guide to Data Attributes | CSS-Tricks - CSS-Tricks

Store content that should be accessible. If the content should be seen or read on a page, don’t only put them in data attributes, but make sure that content is in the HTML content somewhere.

A use case is to style components based on their data attribute values.

Data attributes can be accessed in JS with tag.dataset.attributeName. It can also store JSON.

bluwy/publint: Lint packaging errors

publint lints npm packages for packaging errors, ensuring maximum compatibility across environments. This means that consumers of your package can safely run your code in any platform, e.g. Vite, Webpack, Rollup, Node.js, etc.

jiacai2050/text-saver: A browser extension to save texts anytime, anywhere.

A browser extension to save texts anytime, anywhere.

A simple text saving tool inside a browser.

9 Fabulous Python Tricks That Make Your Code More Elegant | by Yang Zhou | TechToFreedom | Medium
  1. use product instead of nested python for-loops
  2. use the walrus operator for assignment expressions
  3. use ternary conditional operator if the assignment is simple
  4. use lambda function to define simple functions
  5. use list comprehensions
  6. leverage the Higher Order functions of python such as map and other iterable functions.
  7. use union operators to merge dictionaries
  8. use f-strings to format strings
  9. use asteriks for unpacking iterables and destructuring assignment
Dana Fried: "Reminder: The people who work…" - Mastodon

The people who work for you have three resources: time, energy, and give-a-fuck.

Time is the cheapest. It replenishes one hour every hour.

Energy is more expensive. When you're out, you need lots of time off to recharge.

Once give-a-fuck is burned, it's gone forever.

Got a point here

AlgoRSSithme — David Larlet

About RSS and its most recent first approach. Nothing stops someone from putting old articles in their feeds every month or sorting them differently.

The vast majority stay with the most recent article comes first approach.

Comment évoluer d’un profil de développeur à celui de tech lead ?

Comme on vient de le voir, il y a un tas de raisons qui pourraient donner envie de passer du statut de développeur à celui de tech lead : améliorer le relationnel et la fluidité au sein de la team et/ou avec les autres services de l’entreprise, intervenir plus tôt dans le processus de création du produit, endosser plus de responsabilités, créer un environnement de travail plus efficace, etc.

How we Build Platforms

I agree with Mark Nottingham.
The Metaverse is only a new way to get a private platform where Meta is free to do what they want.

Its users don’t think about the systemic effects of their actions

Most of them yes because they won't care about everything. It is too hard to do so.

I don’t want to live in a society where pouring countless billions into a platform gives you automatic rule over people’s interactions, solely because no one else spent as much and you had the first mover / network effect advantage.

Simply put, while competition has a place in improving the Internet, cooperation has an even larger role, and it’s too often ignored.

So in a nutshell, Internet and most of it should stay open!

existentialcrisis.sh

Endpoints:

  • receive a quote that may induce existential dread
  • estimate the percentage of life you have lived
  • estimate the number of saturdays remaining
  • estimate the number of people who will remember you in a given number of years
Three-State Stability

There is not a unstable then a stable phase, but 3 phases:

  1. the API is unstable as hell
  2. the API is mostly settled
  3. In the third phase, the API is fully stable, and no backwards-incompatible changes are expected.

We can name these:

  • experimental (unstable)
  • production-ready (still unstable, but you can budget-in a bounded amount of upgrade work)
  • stable (no maintenance work is required)
Les ventes de smartphones s'effondrent en Europe et battent un triste record

Excellent! Les gens achètent moins de smartphones et les gardent plus longtemps.

Email Love Links – March 2023 – Just Use Email

I think it would be better if he mastered rules and filters and stick to one inbox

I totally agree

"Wargames" : quand des alliés s'affrontent dans des jeux de guerre pour bâtir les stratégies de demain

Un autre article sur le sujet des wargames, qui deviennent sérieux.

riderx/vue-timer-hook: Vue timer hook is a custom hook, built to handle timer, stopwatch, and time logic/state in your vue 3 component.
White Label Designs – All About Implementation, Design Systems...

A good example is Amazon’s Basics range. Amazon buys white label products from multiple manufacturers and sells them under the Basics brand.

White label design services follow a similar concept. A creative agency builds tools, apps, and websites (templates) that companies can purchase and rebrand.

Challengs of White Label Design are multiple:

  • white label products must be re-brandable: the design should fit everyone, and everyone should be able to customize it.
  • flexible information architecture: the white label product provides many page layouts and navigational possibilities while maintaining the flexibility to adapt to the brand’s requirements.
  • accessibility: UX designers must also consider accessibility, so products comply with WCAG (Web Content Accessibility Guidelines) standards.

In order to define a white label system, we can extend atomic design (atoms, molecules, organisms, templates, pages) with a new elements category: it contains colors, typefaces, grids, spacing, brand assets, etc... They are all the design tokens :)

bluwy/vite-plugin-warmup: Warm up Vite's transform cache

Always a way to optimize the startup time of vite :D

Vite can transform some files before the first request, increasing the speed of the first possible interaction.

It could also be integrated to Vite core as Evan You is in favor of it https://twitter.com/youyuxi/status/1641402565631025152

GitHub - antfu/icones: ⚡️ Icon Explorer with Instant searching, powered by Iconify

It collects indeed a lot of icons

Check if your website supports Brotli compression | Brotli.Pro
Shape Type

Try to draw perfect vectors :D

Kern Type

Align the letter perfectly

typicode/lowdb: Simple to use local JSON database. Use native JavaScript API to query. Written in TypeScript. (supports Node, Electron and the browser)

Simple to use local JSON database. Use native JavaScript API to query. Written in TypeScript. owl

🐘 Mastodon.tools | mastodon-tools

A list of tools for Mastodon. It can surely be improved!

Comment écrit-on en inclusif déjà ?

Un dictionnaire proposant des mots plus inclusifs 👍

Etats-Unis : ce pays qui marie ses enfants

Au nom des libertés individuelles, .... mais on en parle des libertés individuelles des mineurs? Ah non sinon toute le raisonnement ne tient plus. C'est incroyable ce délire aux U.S.

7 Principles of Icon Design. Creating a high-quality icon family… | by Helena Zhang | UX Collective
  1. Clarity
  2. Readability
  3. Alignment
  4. Brevity
  5. Consistency
  6. Personality
  7. Ease of Use (organize, well-documented, tested)
A better way to structure D3 code (updated with ES6 and D3 v4) | Elliot Bentley ⟶ Blog

Using POO can help to structure the application code with the d3 library.

37signals — Seven Shipping Principles
  • We only ship good work
  • We ship when we’re confident
  • We ship when the work is finished
  • We own the issues after we ship
  • We don’t ship if it isn’t right
  • We ship our collective best effort
  • We ship to our appetite
Analyse your HTTP response headers

It follows best practices :)

Using {Blocks} in Rust & Go for Fun & Profit
  1. Create construction zone where the result is affected to a variable
  2. Containing Side-Effects and Error-Handling (go)
  3. Restrincting variable lifetimes (rust)
L’argent fait-il le bonheur ? Il y contribue, concluent des scientifiques

L'argent contribue a augmenter le bonheur jusqu'à plafonner à 100 000 dollars par an aux U.S.
Après ce revenu annuel, le surplus d'argent contribue peu au bonheur.

Lien de l'étude

Manifesto for Agile Software Development

The first reference about agility since 2001

easyBnF

L'accès aux ressources de la BNF avec le pass Culture Illimité (15/24€ pour une année).

Cette liste provient de https://www.bnf.fr/fr/ressources-electroniques-de-presse

Rather Than Making The Internet Safe For Kids, Make Your Kids Safe For The Real World | Techdirt

It is not obvious that the internet is inherently dangerous for kids. See studies about this subject.

A great comparison:

try to “clean up” the internet to make sure everywhere was perfectly safe for everyone was the equivalent of raising children at Disneyland, and then on their 18th birthday, releasing them into the real world outside the gates, and expecting them to be able to survive.

Instead, we just need to “talk to your children honestly not just about what they might see online, but about their own bodies.

About the current ideas that seems to be good:

Debates around the pros and cons of these various solutions get into what freedom and privacy we’re willing to sacrifice for the sake of keeping kids from seeing adult content.
Does censorship alone ensure that kids will grow up to be sexually healthy adults?

Instead

As the article notes, educating children helps to inoculate them against whatever nonsense they might encounter online.

5 takeaways from screen reader usability interviews - Jess Budd
  1. Users tend to use a list of all the links or headings on the page instead of the tab key! The user could then jump directly to the heading or link that sounded like what they were looking for.
  2. Navigating to the homepage from an internal page: all of our interviewees searched for a link being announced as "Home"
  3. To navigate to a certain page, users opened a list of all the links on a page. it was common to type the letter on the keyboard to search for the available links starting with the first letter of what they would expect the page name to start with. A "Get in touch!" link is likely to not be found
    • idea here: we need a standard about common pages! (Contact, Pricing, etc...)
  4. None of the interviewees enlarged the window to take the full screen. This means some users will experience the mobile layout and behavior of the menu navigation, rather than the desktop version we intended. So a computer does not mean a desktop layout
  5. None used skip links because they are less efficient than their other methods. Moreover, the skip link is sometime broken as the keyboard focus does not shift!
Note: Cool URIs project

A full-stack projet that report cool URIs: https://www.w3.org/TR/cooluris/

URIs are cool up to the moment they change, so the service will register a URI and says if it is cool or not.

The service can be extended and provide a timeline when a URI was cool, when it became not cool anymore. And the less cooler it is.
Also it can provide stats on the coolest URIs registered :)

Checking a URL can result in 2 states:

  • the URL is stored and the service is checking it stays cool
    • cool since YYYY-MM-DD
    • list of changes as timeline
  • the URL is not stored and the service register it for the first time.
oruga-ui/oruga: 🐛 Oruga is a lightweight library of UI components without CSS framework dependency

A pure HTML vue library. CSS is free :)

En Europe, près de 40 % des sites d’e-commerce ont des « interfaces truquées », selon la Commission

Sur 399 boutiques évalué par la comission européenne et les autorités nationales de protection des consommateurs:

  • 42 sites web utilisaient de faux compteurs à rebours indiquant des échéances pour l'achat de produits spécifiques
  • 4 sites web orientaient les consommateurs vers certains choix [...] par leur présentation visuelle ou leur formulation
  • 70 sites web dissimulaient des informations importantes ou les rendaient moins visibles pour les consommateurs
jes post

An ode to email <3

keep your crusty gmail account around for spam and trials and signups and
whatever else, and get yourself a fastmail.com account. or a migadu.com account
if you're a techie.

set email type to plaintext-only. this email account will only ever send
or receive text.

email waits patiently. it sits still and does not make a fuss. if your friend
doesn't respond, send another email to another friend. the conversations move
slowly, sometimes over the course of many years. this is the antithesis of
modern communication.

think of email the same way you'd think of a penpal.

email connects people intimately and loosely.

Sciencey Things Made With Love – the kurzgesagt shop
Emmanuel Macron a discrètement décoré le milliardaire Jeff Bezos de la Légion d’honneur

Je poses cela là

What time is it on the moon? Europe pushing for lunar time zone | CBC News

Setting a timezone for the moon 😃

TresJS | The solution for 3D on VueJS
Camerci – Récupérer les vidéos de caméras de surveillance qui vous sont de droit
Reducing code size in librsvg by removing an unnecessary generic struct - Federico's Blog

An example of optimisation