Monthly Shaarli

All links of one month in a single page.

July, 2022

Exemple Organisation Freelance - Google Sheets

Un exemple de feuille de calcul pour obtenir son TJM

ar-nelson/spartan-schema: Ultra-minimal JSON schemas with Typescript inference

A minimal and simple JSON schema. The syntax is actually easy 👍

Usbek & Rica - Matrix, le protocole décentralisé made in France qui cartonne en Ukraine

« La crainte des Ukrainiens était que l’on coupe Internet dans leur pays. Or, contrairement à des messageries de types WhatsApp ou Signal, qui sont hébergées à l’étranger, Element utilise des serveurs décentralisés, ce qui signifie que si les Ukrainiens perdent l’accès à Internet, ils pourront toujours communiquer entre eux via des serveurs gérés indépendamment ».

Aussi, on est obligé d'utiliser une interface particulière pour un service de communication (Whatsapp, Telegram, ...). Alors qu'avec Matrix, il est possible d'implémenter l'interface de son choix. Element propose une interface pour l'utilisateur reprenant l'interface de Discord, mais rien n'empêche d'en avoir une autre.

Ensuite il est possible d'administrer soi-même ses données.

Matrix est utilisé par l'État francaix, depuis les Macron Leaks pendant l'élection présidentielle. L'application Tchap, un fork de feu Riot, devenue Element.

Après, le petit bémol que j’ai pour tous ces outils que j’affectionne et que j’utilise, c’est que c’est super cool pour les geeks mais que ça ne touche pas le grand public, parce que l’utilisation est un peu complexe

Twitter Anonymizer – Adoptez cette extension pour 🦊 Firefox (fr)

Anonymize the personal data of a tweet.

This extension can be extended to more websites :)

Tester si deux tranches horaire se croisent • Billets • Zeste de Savoir

A et B sont deux tranches horaires avec les indices: 1 le début de la tranche horaire et 2 la fin de la tranche horaire.
Alors il suffit de résoudre l'expression suivante:
(B2 < A1 or B1 > A2)

Et voilà !

How Did REST Come To Mean The Opposite of REST?

Formalizing REST APIs

My API is up to level 2 on the Richardson Maturity Model. So my API is more an HTTP+JSON RPC than Rest.

The short answer to this question is that HATEOAS isn’t a good fit for most modern use cases for APIs. That is why after almost 20 years, HATEOAS still hasn’t gained wide adoption among developers. GraphQL on the other hand is spreading like wildfire because it solves real-world problems. ‒ GraphQL and REST Level 3 (HATEOAS)

I feel this feeling too that something is wrong

Tella — Bring your work to life with video
Magical SVG Techniques — Smashing Magazine

What is possible with SVGs?

  • Generative SVG Grids
  • Generative Landscape Rolls
  • SVG Paths With Masks
  • Grainy Gradients
  • Adding Texture And Depth
  • Cut-Out Effects With CSS And SVG
  • Fractional SVG Stars
  • Generative Mountain Ridge Dividers
  • Flexible Repeating SVG Masks
  • Swipey Image Grids
  • Raster Image To SVG Converter
  • Scaling SVGs Made Simple
Note: Accélérer sa préparation et rattraper le retard

Vous connaissez la différence entre : "Nous accélérons notre préparation" et "Nous rattrapons notre retard" ? Tout est dans l'anticipation. ‒ Thinkerview

Pour un réveil écologique on Twitter: "Sans action écologique ambitieuse, ce meme va ressortir chaque été. https://t.co/An7zj1lLxg" / Twitter

C'est l'été le plus chaud de ma vie 😱
C'est l'été le plus froid du reste de ta vie 😌

The Slow March of Progress in Programming Language Tooling - Earthly Blog

The internet is full of fights about Go vs. Rust. But I think the fascinating thing is how similar their developer tooling experience is.

You don’t need to wonder what the best tool to use for testing, fuzzing, packaging or linting is.

Tooling innovation happens, new languages adopt and standardize on it, and end up incrementally better than existing languages.

Package manager state of the art: cargo and rustup
Documentation state of the art: docs.rs
Formatting state of the art: gofmt, rustfmt, zigfmt

A Complete Guide to CSS Cascade Layers | CSS-Tricks - CSS-Tricks
A Guide to Clipping Paths - I'm Jhey Tompkins!

Using clip-path to define custom shapes inside a container!
Percentages units has the benefit of keeping things responsive
There is many clip-path functions: inset, circle, ellipse, polygon and... path for maximum flexibility

clip-path: inset(x x x x) is useful for clipping blocks of an element and using it as a "controlled" overflow.
This clip-path value represents a thunderbolt: polygon(100% 0, 20% 50%, 35% 50%, 0% 100%, 70% 50%, 50% 50%)

We can transition or animate clip-path. There's one condition. The path must have a consistent structure. For example, if we transition a polygon, that polygon must have a consistent number of points.

Skewing effect: https://codepen.io/enbee81/pen/yLyrmyg

and cyberpunk buttons in CSS: https://jhey.dev/writing/css-cyberpunk-2077-buttons-taking-your-css-to-night-city/

Cool Things People Do With Their Blogs | Brain Baking

Things I want to do:

  • Content related
    • Publish reviews of books/music/… in a cool sortable grid (example)
    • Publicly display global website statistics (example)
    • Create and regularly update a "uses" page (example)
    • Create and regularly update a "now" page (example)
    • List all emojis used on the site by frequency (example)
  • Design related
    • Create an official coat of arms as the logo of your site (example)
    • An audible frequency graph that determines posting activity: example
  • IndiWeb related
    • Have a guestbook page where people can send Webmentions to to sign it: example
Kubernetes For Frontend Developers — Smashing Magazine

Docker-compose is a tool that accepts a YAML file that specifies a cross container application and automates the creation and removal of all those containers without the need to write several docker commands for each one. It should be used for testing and development.

Kubernetes, on the other hand, is a platform for managing production-ready containerized workloads and services that allows for declarative setup as well as automation.

I will read more when I will need it :)

Louis Derrac - Éduquer au numérique d’accord. Mais pas n’importe lequel et pas n’importe comment - Partie 2 : l'enseignement scolaire

Mais ce n’est pas avec ces compétences numériques qu’ils deviendront des citoyens informés et formés à l’histoire des technologies numériques, à sa culture, à ses nombreux enjeux économiques, sociaux, politiques. Ce n’est pas avec ces compétences numériques qu’ils pourront décider collectivement de leur futur et de la place qu’y prendront les technologies numériques.

Transmettre une culture numérique au lieu de simple connaissance.

Réfléchir au modèle sociotechnique et économique de Google. Par exemple:

L'objectif de l'école serait donc:

  1. Passer des compétences d’usages consuméristes aux compétences de pratiques émancipatrices. 2. Passer des strictes compétences numériques à la vision plus large de la culture numérique.
  2. Et enfin, adosser à cette culture numérique une réflexion critique du numérique.
unjs/untyped: Generate types and markdown from a config object.

Documentation that generates code that is then used in the project :)

Vue Telescope

Detect websites built with Vue or Nuxt and it displays related informations (plugins, modules, ...).

Project: https://github.com/nuxtlabs/vue-telescope-analyzer

Refactoring and Design Patterns

Useful resources. I will check it out.

Write documentation first. Then build. · reproof

there was too much at stake to not write the documentation first.

Maybe for my masterthesis ? :D

FilterLists | Subscriptions for uBlock Origin, Adblock Plus, AdGuard, ...

An enormous ad-blocking list!

CSS { In Real Life } | Breaking Out of a Central Wrapper
.full-width {
  width: 100vw;
  margin-left: 50%;
  transform: translate3d(-50%, 0, 0);
}

Or a responsive approach with CSS grid:

.wrapper {
  display: grid;
  grid-template-columns:
    [full-start] 1fr [wrapper-start]
    minmax(0, 70rem) [wrapper-end] 1fr [full-end];

  /* Optional gap */
  column-gap: var(--pad, 1rem);
}

Then

.wrapper > * {
  grid-column: wrapper;
}

.wrapper > .full-width {
  grid-column: full;
}
chiselstrike/chiselstrike: Build full-stack from prototype to production.

Built with Rust and use the deno runtime.

Chiselstrike handles everything in the backend :) Can be tested someday

CSS Grid Generator

Generate a CSS grid easily

Note - Le Hollandais Volant

Les sociétés ou les politiques qui parlent depuis 20 ans de devenir « neutre en carbone d’ici 2040 »…
Sachez qu’on est plus près de 2040 que de 2002.
Donc j’imagine que vous avez déjà decarboné 50% du monde ? Hein ? HEEEIN ?

Les papillons déclinent en France, indique une nouvelle étude
Craftwork - Freebies
Dr Valérie Masson-Delmotte on Twitter: "Emissions de gaz à effet de serre ⛽️, réchauffement planétaire 🌡️ et exposition aux canicules ♨️ : des enjeux d'équité entre générations. C'est l'objet de cette étude de 2021 @WimThiery @SISeneviratne https://t.co/GT8hXpBiqL 🧵➡️ (1/...)" / Twitter
Note: mise en prod réussie joke

Pourquoi l’équipe tech applaudit une mise en prod réussie ?
Parce que c’est le cloud du spectacle !

Deprecated Linux Commands You Should Not Use Anymore (And Their Alternatives) - It's FOSS

scp (eventually) → rsync and sftp
egrep and fgrep → grep with flags
netstat → ss
ifconfig → ip
arp → ip n
iptunnel → ip tunnel
nameif → ip link
route → ip route
iwconfig → iw
iptables → nftables

Tinker 🔆 on Twitter: "Is this you? #infosec https://t.co/sQMleB6Hei" / Twitter

Junior dev → programming all day with 4 screens in a terminal
Senior dev → in a farm

Gateway’s Propulsion System Testing Throttles Up – Artemis

This image of a propulsion system looks like space opera / SciFi :D

qmhc/vite-plugin-dts: A vite plugin for generating `.d.ts` files.

The way to generate types from vue 3 components.
After some hours searching about how to generate types for the vue library components, this plugin for vite solved my problem.

Lobbes & Paula on Twitter: "@buitengebieden The boss arrives .... https://t.co/FR48ECs4SL" / Twitter
scalability - How Scalable is SQLite? - Stack Overflow

Moral of the story: only use SQLite for websites where updates to the database happen rarely (less often than every page loaded).

Think about indexes:

As I mentioned in my first edit, database indexes dramatically reduce query time, but this is more of a general observation about databases than it is about SQLite.

And transactions to speed up writes:

However, there is another trick you can use to speed up SQLite: transactions. Whenever you have to do multiple database writes, put them inside a transaction. Instead of writing to (and locking) the file each and every time a write query is issued, the write will only happen once when the transaction completes.

Devant l’Assemblée, ils se collent aux pavés pour exiger l’isolation des logements
RSS feeds for your Github releases, tags and activity | by Ronalds Vilcins | Medium
Designing A Better Language Selector — Smashing Magazine

TL;DR refers to the language selector checklist

In my experience, when asked to change a country or language, a vast majority of users will immediately head to the header of the page first, and if they can’t find it there, they’ll jump all the way to the bottom of the page and scout the footer next.

I find this rule true in my experience:

We can’t confidently infer users’ preferences without asking them first.
While polite nudging is reasonable, automatic redirects are not.

As a rule of thumb: let the user choose between language, country and currency.

For example, if you want to purchase sneakers on Adidas from Germany but deliver them to your friend in Poland, you need to be able to make sense of the Polish language when checking out.

Moneses shows two tabs in the right upper corner of the header. Users can switch between language and country, defining preferences for each separately. [...] We can allow users to customize further parts of the UI, from currency and auto-translation to units of measurement and date formatting.

Preferred customization:

  • shipping location
  • preferred currency
  • units of measure
  • time/date formatting
  • time zones preferences
  • level of experience

Modal windows are often dismissed. So, In the mock-up above [with a modal on the bottom right], the important content isn’t blocked by the modal.

  • display most languages/countries in their local format . It avoids the assumption that the user needs to understand English.
  • breaking options down by tabs, either horizontal or vertical ones
  • provide users with poignant autocomplete suggestions. But Sometimes the fine-tuning of making autocomplete work for many different languages might be an effort way too underestimated and way too time-consuming.
  • Use the globe or translate flags to indicate the choice of locales

On Atlassian, if the user with a different browser language preference enters the site, it suggests changing the language at the very top of the page, with a globe icon appearing there, too.

Samuel Path on Twitter: "Nb jours facturés vs TJ : 2018: 145j/400€ 2019: 167j/430€ 2020: 191j/500€ 2021: 206j/800€ Je n'aime pas l'idée que je travaille plus à mesure que je facture plus! Lorsque je redeviendrai freelance, j'envisage de me mettre un plafond de jours travaillés par an (p.ex. 180)." / Twitter

Pour donner une idée du taux journalier:
2018: 145j/400€
2019: 167j/430€
2020: 191j/500€
2021: 206j/800€

« Uber Files » : une plongée inédite et alarmante dans la boîte noire du lobbying

Un dossier du monde sur les Uber files

Mis bout à bout, ces jeux d’influence dépeignent à quel point les grandes entreprises peuvent démultiplier les angles d’attaque pour contourner les législations nationales

Ils démontrent à quel point l’actuel président de la République, alors ministre de l’économie, s’est démené pour soutenir, contre l’avis de sa majorité et à l’insu de son gouvernement, une entreprise visée par de multiples enquêtes judiciaires et fiscales.

[Uber] suit la « stratégie [...suivante] », qui consiste à s’implanter dans des pays au mépris des législations nationales, faire croître le nombre d’emplois et d’utilisateurs, et ne négocier qu’une fois en position de force.

Taking HTML Seriously
<div>
    <div>
      Name: Joe Blow
    </div>
    <div>
      Email: joe@blow.com
    </div>
    <div>
      <a href="/contacts/42/edit">Edit</a>
      <a href="/contacts/42/email">Email</a>
      <a href="/contacts/42/archive">Archive</a>
    </div>
  </div>

So, what makes this HTML/hypertext special? The answer is also simple: this bit of HTML encodes both the data about the contact as well as the actions available on that data, in the form of hyperlinks.

Introduction - The Rust Performance Book
Design Patterns: Better Navigation UX With Navigation Queries — Smashing Magazine

In a dedicated area on the page, additionally to the primary navigation on the top, users are presented with a drop-down. They can specify what exactly they’d like to do on the website, or what they are looking for. Once one option is selected, another drop-down appears, allowing them to specify their intent even further.

This experience mimics the drill-down navigation with multiple levels. Yet the difference is that users are making small decisions, one after another, without being confronted with the entire navigation at every step of the way.

The user fills itself the needs

In fact, nobody wakes up in the morning hoping to finally compare products by features in a comparison table matrix. As customers, we actually want to find out what a better option is, yet we need to do quite a bit of work to get there.

A-Z Index Pattern: by listing all keywords on a single page mostly because users can use in-browser search to look something up quickly without having to go and explore multiple pages.

Tap-Ahead autocomplete pattern:

Rather than focusing on a list of keywords, the autocomplete actually provides an overview of items that the users might be looking for.

Tap-ahead minimizes the amount of effort needed for typing, but also drives customers to relevant results and gives them the confidence that they are actually on the right track.

If you are designing an interface for expert users, perhaps slightly more advanced ways to use search might be reasonable. Stackoverflow allows its users to specify a filter right in the search box, without having to rely on filters, tags, or any other modes of navigation.

ARTE on Twitter: "En Allemagne, dans la région de la Rhénanie, des villages entiers sont rasés au profit de l’industrie minière 👇 https://t.co/x8u7Yr6V77 https://t.co/nvge1Q53mY" / Twitter

But nuclear is the problem 🤦‍♂️

A Fistful of Megabytes - YouTube

Using web browsers might seem inefficient, but they solve so many problems.

FasterThanLime describes how hard it is to build a text-messaging app from scratch if we want to develop it properly.

Grammarly: Free Online Writing Assistant

Impressive

Avoiding <img> layout shifts: aspect-ratio vs width & height attributes - JakeArchibald.com

Without auto, the remains 4 / 3, and the image appears stretched. You can avoid the stretching with object-fit:

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

Although, if the image isn't actually that aspect ratio, it'll either end up stretched (object-fit: fill), letter-boxed (object-fit: contain), or cropped (object-fit: cover). None of which are ideal.

From Good To Great In Dashboard Design: Research, Decluttering And Data Viz — Smashing Magazine
Note: technical dev evolution in programming

Going from framework consumer to framework creator

Starting from language proficiency to data structures and algorithms to Design Patterns

A cool definition for design patterns: a solid architecture that are reusable and extensible and that are industry standards

Software Never Mattered More
Blog Stéphane Bortzmeyer: RFC 9204: QPACK: Header Compression for HTTP/3

Wow

Color contrast checker, analyser and color suggestions | Polypane, The browser for ambitious developers
Blog Stéphane Bortzmeyer: RFC 9113: HTTP/2
Write For Yourself so That One Day You Might Write For Those You Look Up To - I'm Jhey Tompkins!
(2) James Ide on Twitter: "With the newest version of Git 2.37.0, you can run just "git push" to push new branches. No more "--set-upstream origin". Enable with: git config --global --add --bool push.autoSetupRemote true https://t.co/1SzIqzvEFR" / Twitter

git config --global --add --bool push.autoSetupRemote true

So the branch will be set if it is not the case 👍
It needs git version 2.37.0 or superior.

FROM:latest, An opinionated Dockerfile linter

The way it works is quite simple, you just have to copy and paste the content of your Dockerfile into the interface and the site gives you a list of recommendations to follow to improve your file.

Understanding Layout Algorithms

This is the critical mental-model shift. CSS properties on their own are meaningless. It's up to the layout algorithm to define what they do, how they're used in the calculations.

Here's an example which blew my mind: Did you know that the width property is implemented differently depending on the layout algorithm?

I didn't know 😱

Inline space under images are due to the Flow layout and its inline elements. It adds extra-space to make sure that inline elements, such as <img />, don't negatively affect the legibility of the surrounding text.

There are a lot of layout algorithms in CSS, and they all have their own quirks and hidden mechanisms. When we focus on CSS properties, we're only seeing the tip of the iceberg. We never learn about really important concepts like stacking contexts or containing blocks or cascade origins!

Our intuition is the best tool we have. And when we start using CSS snippets without truly understanding them, it's only a matter of time until some hidden aspect of the layout algorithm throws a wrench into our gears, stopping us in our tracks.

La municipalité de Carolis fait planter le service informatique | l'Arlésienne - presse à Arles

Pour le seul confort de la hiérarchie, l’idée est de migrer d’une solution libre de droits, coopérative et économe en deniers publics à une solution payante, maîtrisée par une multinationale.

Mais.... chiffre à l'appui cela coûtait moins cher et était apprécié. Mais certains veulent utiliser les produits Microsoft, et puis pas grave si cela coûte plus cher... mais on est pas censé moins dépenser ?!

Et puis cela fait de l'emploi perdu, pour plus d'argent dépensé :x Du gâchis de compétence et de bonnes volontés des gens qui développent ces solutions libres.

Blog Stéphane Bortzmeyer: RFC 9111: HTTP Caching

Voir eTag, Cache-Control, Expires, max-age, Last-Modified pour gérer le cache d'une requête HTTP.
Le billet de blog détaille comment sont gérés les ressources du cache, avec le serveur.

COLRv1 and CSS font-palette | CSS-Tricks - CSS-Tricks

Check for font-palette and @font-palette-values.

Only usable in Chrome and Safari for now :(

massCode - A free and open source code snippets manager for developers
Give Up GitHub - Software Freedom Conservancy

Why give up GitHub?

  • Copilot is a for-profit product that violated licenses
  • GitHub has a for-profit software services contract with the USA Immigration and Customs Enforcement (ICE)
  • While GitHub pretends to be pro-FOSS (like SourceForge before them), their entire hosting site is, itself, proprietary and/or trade-secret software. GitHub differs from most of its peers in the FOSS project hosting industry, as GitHub does not even offer any self-hosting FOSS option. Their entire codebase is secret.
  • GitHub has long sought to discredit copyleft generally. Their various CEOs have often spoken loudly and negatively about copyleft
  • GitHub is wholly owned by Microsoft, a company whose executives have historically repeatedly attacked copyleft licensing.

How do I give up?
Hard because vendor lock-in.

Alternatives?
CodeBerg, SourceHut, Gitea, Gitlab.

Use a README template to make others aware

22 Juin 2022 - SNCF-Reseau-compte-reduire-ses-investissements-VRT-22-6-2022.pdf

(suite de https://shaarli.lyokolux.space/?2U139g)
Il y a besoin de 3,7 milliards, 2,8 milliards y sont consacrés, et 700 millions supplémentaires seront nécéssaires du à l'inflation.

Le réseau ferroviaire sera donc réduit...

Gavi Begtrup on Twitter: "A 10-year-old girl is raped. The State forces her to remain pregnant and tells her to consider it an “opportunity.” This isn’t Iran. This isn’t Gilead. This isn’t hypothetical. This happened today in Ohio." / Twitter

Une fille de 10 ans a été violé. L'état l'oblige a rester enceinte et lui dit de considérer cela comme une opportunité.
Ce n'est pas l'Iran. Ce n'est pas Gilead. Ce n'est pas hypothétique.

Cela est arrivé aujourd'hui dans l'Ohio.

Note about it: we shouldn't have to express extrem cases to prove abortion is fundamental...

Build a typescript component library with Vite | Ivancic Josip
Bun is a fast all-in-one JavaScript runtime

An alternative to Deno and NodeJS. It seems promising, but too soon to be used yet

Élucid - Demain se comprend aujourd'hui

Un média indépendant qui semble proposer une analyse en profondeur de sujets pertinents

Jean Quatremer on Twitter: "Que c’est embarrassant pour @EmmanuelMacron qui est quand même le roi de l’esbroufe. Sans les anglo-saxons, la Russie aurait gagné depuis longtemps. Et l’effort incroyable des petits pays… https://t.co/mJLdawrozx" / Twitter

Rapporté au dollar donné à l'Ukraine par habitant, nous sommes à 3$. La Pologne en a donné 49 $ / habitant (ce qui dans un salaire représente largement plus pour eux que pour nous).

HEURE LEGALE FRANCAISE
La CNIL condamne TotalEnergies à une amende de 1 million d'euros

Le formulaire de souscription à un contrat d'énergie ne permettait pas aux souscripteurs de s'opposer à la réutilisation de leurs données pour recevoir des offres commerciales. La CNIL a en outre identifié quatre autres manquements à l'obligation d'information des personnes démarchées par téléphone (article 14 du RGPD), au droit d'accès à leurs données (article 15), au droit d'opposition des personnes concernées (article 21) et aux obligations relatives aux modalités d’exercice des droits (article 12), la société n’ayant pas répondu aux demandes « dans le délai d’un mois prévu par les textes ».

Concernant la somme, oui c'est rien pour TotalEnergies d'après le commentaire de Drepanocytose:

Benefice Net (même pas le revenu, là c'est le bénéfice) de TotalEnergies en 2021 : 13.5 Milliards d'euros.
Donc 1 millions d'euros c'est 1 sur 13500,

Rapporté à un SMIC annuel net (15 631,75 €), cela représente 1.16€

Announcing Rust 1.62.0 | Rust Blog
  • Smaller footprint for the mutexes
  • #[derive(Default)]
  • cargo add similar to yarn add 👍‍
  • The x86_64-unknown-none target has been promoted to Tier 2
Comment ne jamais abandonner (2 étapes simples)

Dès notre plus jeune âge, on a un idéal de performance. On aime notre sportif préféré quand il gagne et on le délaisse quand il perd. On est félicité quand on gagne et on disparait quand on perd.

Le problème ? C’est que garder cette croyance à l’âge adulte explique notre stagnation.

Pourquoi ? Parce qu’elle nous interdit la moindre erreur. On s’impose toujours plus de performance, sans accepter les baisses de régime liés aux cycles naturels de la vie.

Ai on a la croyance que notre performance doit toujours augmenter, on est programmé pour l’échec.

Au contraire, nous vivons des cycles. Donc si nous n'acceptons pas de descendre de temps en temps, nous ne pouvons tout simplement pas monter.

→ la vie est faite de cycles et c’est ce qui nous permet de grandir.

Firefox Translations – Adoptez cette extension pour 🦊 Firefox (fr)

Traduisez des sites web dans votre navigateur sans avoir recours au cloud.

The bergamot project supports it: https://browser.mt/.

The Gray Areas of HWB Color | Miriam Eric Suzanne

TL;DR Nearly 50% of HWB possible values tends to grey shades.

In both HWB & HSL colors, we can describe white and black and a full scale of grays using any hue we want. It doesn’t matter what hue we provide in either table

Lucky for us, browsers don’t generally render gradients using naive HSL math: currently browsers convert everything to sRGB before mixing. Gradients in RGB can still get muddy at times

Électroménager et plats préparés : le confort nous a coupés de la nature

Car force est de constater que la production du confort n’a pas été mise au service de l’intérêt général : après avoir comblé les besoins essentiels de la population, l’industrie aurait pu ralentir sa croissance, chercher à augmenter la durée de vie de ses produits et réduire ses effets sur l’environnement

Pourquoi continues-t-on dans cette direction

Un exemple : lorsqu’il achète de la viande de lapin tranchée sous cellophane, débarrassée, donc, de tout viscère et autre signe de vie particulier (poils, pupilles), il s’épargne certes la confrontation avec la mort, mais devient un « nihiliste passif », complice inavoué de la violence industrielle, en l’occurrence celle exercée contre les animaux

Effectivement et c'est face à cette confrontation que je suis devenu végétarien.

Les objets que nous manipulos sont fortables, mais dépourvus de tout arrière-plan sensible

Effectivement, la pensée, morale ou sensibilité est absente des objets du quotidien.

8,800+ Animated Icons - Lordicon

Use icons, but animated :)

Remove Unwanted Objects & Fix Imperfections with Inpaint Online!
Waifu2x - Best Online Photo Enhancer and Image Upscaler Tool
SVG Gobbler

a browser extension that finds the vector content on the page you're viewing and gives you the option to download, optimize, copy, view the code, or export it as an image.

nébuleuse de la Carène par le JWST (JPEG Image, 900 × 1802 pixels) — Scaled (54%)

Dans les photos du champ profond, que ce soit Hubble ou Webb, chaque point lumineux est une galaxie. Chaque pixel correspond alors à une zone large de dizaines de milliers d’années lumière de côté et la zone couverte correspond à un grain de sable tenue à bout de bras.

Une façon de le dire autrement c’est que si on tient un grain de sable à bout de bras en direction du ciel, ce petit grain nous masque des milliers de galaxies, chacune composée de centaines de milliards d’étoiles et de planètes.

Et pour cacher le ciel en entier, je vous laisse imaginer combien il faudrait de grains de sable. Et donc combien de galaxies, d’étoiles, de mondes il y a là haut.
L’Univers a plus d’étoiles que l’être humain n’a émis de sons depuis toujours.

Voilà pourquoi on dit que nous ne sommes pas seuls dans l’univers. Avec une telle échelle, même les événements les plus rares se produisent obligatoirement un nombre immense de fois dans l’univers…

from https://lehollandaisvolant.net/?id=20220716082218

Microsoft is a Linux and open source company • The Register

I totally agree with https://sebsauvage.net/links/?LSWKJw

Sure, Microsoft isn't perfect. For instance, there are serious legal and ethical questions about how its subsidiary GitHub is using open source code in its commercialized Copilot AI-based pair-programming service [....]
However, you can find fault with any major company using Linux or open source software.

So? Is it ok if others have faults?

Using the EXCEPTION Comment to Help Maintain Mature, Large-scale Sass Projects. — Cantina
Squeaky Portraits: Having Fun with the CSS path() Function - I'm Jhey Tompkins!

Creating patterns for imgs

This size matches the dimensions of our SVG exports. This is important. This is the one drawback of using clip-path: path(). It's not responsive. The path definition is relative to the dimensions of your element.

Changing the shape:

.portrait {
  transition: clip-path 0.2s, transform 0.2s;
  transform: scale(var(--scale, 1)) rotate(var(--rotate, 0deg));
  clip-path: path(var(--clip, var(--splat)));
}
.portrait:hover {
  --scale: 1.15;
  --rotate: 30deg;
  --clip: var(--splattier);
}
.portrait:active {
  --scale: 0.85;
  --rotate: -10deg;
  --clip: var(--splatted);
}
10 Design Patterns Explained in 10 Minutes - YouTube

Creational

Singleton

Type of object that can be instantiated once

In Typescript, just use a global object, so you don't have the boilerplate.

Prototype

Object.getPrototypeOf

Builder

Build object step by step through different methods instead of using many parameters

Factory

Determine which object to instantiate

Structural

Facade

Simplified to hide low-level details of a system

Proxy

Reactivity system of Vue :D

Replace an original object and do some side effects

Advantage: allow user to work with the proxy just like the original object but it can trigger side effects behind the scene.

Proxy are also used when there is a large object that would be expensive to duplicate in memory.

Behavioral

Iterator

Traverse through a collection of objects.

A pull based system.

An object with a next() method in javascript that returns a { done: boolean; value: T }.

Observer

Allow many objects to subscribe to events that are broadcast by another object.

A Subject where other objects subscribe to it and triggers their method when the subject notify

Mediator

In case of many to many relationships, one object is a coordinator between them.

Middlewares are an example of mediator.

State

What is the difference between state and strategy pattern?

Private Access Tokens: eliminating CAPTCHAs on iPhones and Macs with open standards

Rather than interrogating a device directly, we ask the device vendor to do it for us.

I see so much problems coming 🍿
At the same time, I like the idea so much!

4 parties involved:

  • an origin (service provider)
  • a client (service consumer)
  • an attester (proof the client is real, for example device vendors)
  • an issuer: producer of the token called by the attester and choosed by the origin
Ce n’est pas la taille qui compte … ? Avec Docker, ça compte !
  1. Partir d'une base légère
  2. Éliminer les FROM, RUN et COPY
  3. Placer les fichiers modifiés souvent à la fin du build de l'image si possible
  4. Utiliser le .dockerignore
  5. "tout ce qui n’est pas essentiel au fonctionnement de mon programme n’a pas sa place dans mon image."
Boosting UX With Design KPIs — Smashing Magazine
Blog Stéphane Bortzmeyer: RFC 9205: Building Protocols with HTTP

Peut être utile un jour

Unit and Integration Tests

This separation between unit and integration became vague nowadays.
Instead we can think in term of purity and extent.

Purity → "corresponds to the amount of generalized IO the test is doing and is correlated with desirable metrics, namely performance and resilience."
Extent → "corresponds to the amount of code the test exercises. Extent somewhat correlates with impurity, but generally does not directly affect performance."

Things I Wish I’d Known Earlier In My Career — Smashing Magazine

In fact, a good way of pricing your work is by asking yourself what salary would make you enthusiastic enough to be heavily invested in the product and deliver your best work.

People usually stay in the same company for 12-18 months (in the U.S.).

If you feel valued and appreciated, the team is great and salary is fine, consider staying in the same company for around 2–3 years.

  1. Keep record of your achievements

  2. Pay attention to your estimates

    6 productive hours per day

  3. Test the company during the probation period

8 Think about passive income early

My Wonderful HTML Email Workflow, using MJML and MDX for responsive emails

Build a responsive email framework with MJML and its component and templates.

Use mdx and customize its parser to generate MJML output instead of raw HTML.

Use an Email Service Provider to send email

Discourses of climate delay | Global Sustainability | Cambridge Core

In the fig. 1, we get 4 categories of discourses of climate delay:

  • redirect responsibility
  • push non-transformative solutions
  • emphasize the downsides
  • surrender

examples are provided for each category

Les steaks végétaux devront changer de nom

Paradoxe de cette interdiction franco-française : ces produits pourront conserver leurs noms et être vendus dans l’Hexagone… à condition d’être fabriqués ailleurs ! Cette exception pour les produits importés d’un autre pays européen a dû être intégrée au décret, au nom de la libre circulation des produits.

Alors on l'interdit en France, seulement pour les produits francais 🤦‍♂️

Le terme « steak végétal » n'est plus utilisable pour les produits francais de même que les termes de la charcuterie. Pourquoi pas ?
Alternative à steak, le nom utilisé est plutôt galette: "En cuisine et en gastronomie, une galette peut désigner un gâteau rond et plat, un biscuit, un type de crêpe, une sorte de pain ou de gaufre, etc."

Vous avez dit 350 ppm ?

Le ppm est une unité représentant le partie par millions. Appliqué au CO2, il indique, pour 1 million de particules, combien sont effectivement du CO2.

On était au départ à 275 ppm.
Aujourd'hui, nous sommes à 387 ppm de CO2 (+2 millions/an), là où le niveau maximum acceptable est de 350.

florinpop17/app-ideas: A Collection of application ideas which can be used to improve your coding skills.

A list of app to implement as developer

sebsauvage on Twitter: "Juste un rappel que le "Je m'en fout qu'on me piste, j'ai rien à me reprocher" est une énorme erreur : Ce n'est pas VOUS qui déterminez ce qu'il y a à vous reprocher. Aujourd'hui des femmes qui veulent avorter, demain quoi ?" / Twitter

Just a reminder that the "I don't care if I'm traced, I'm not to blame" is a huge mistake:
YOU do not determine what you are to blame for.

Today women who want an abortion, tomorrow what?

Intéressant : Pourquoi certains éternuent lorsqu’ils regardent le soleil ? - 28 Minutes - ARTE - YouTube

Le réflexe photo-sternutatoire est partagé par 1/4 à 1/3 de la population mondiale.

Explication: le nerf optique envoie un signal si fort qu'il court-circuite le nerf trijumeau, qui se déclenche aussi.

Change `useTabs` to `true` by default · Issue #7475 · prettier/prettier

tabs are indeed more adaptable, and carry clearer semantics that a Braille reader understands

So tabs vs spaces: tab for accessibility?

BB27000 on Twitter: "Je vais revenir plus en détail sur cette carte du « futur réseau ferroviaire » tel qu’il risque de devenir. Afin que vous compreniez bien les enjeux. Thread vulgarisation.⤵️⤵️⤵️ https://t.co/GKSO6ujdNl" / Twitter

SNCF réseau aura une réduction d'un milliard, soit environ 30% de son budget.
BB270000 présente les résultats d'une telle mesure sur le réseau ferroviaire.

C'est chaud

Designing A Better Carousel UX — Smashing Magazine

I have a bad experience with carousels as the user can not control it.

Instead:

  • ResidentAdvisor avoid carousels altogether, highlight three last features, and invites users to explore more with a “View more features” button.
  • Australia Post uses a dynamic layout to highlight all features together in the same area.
  • 168plymouth uses mini-carousels for each feature that they want to highlight. There is no rotation, no auto-advancing, and you can move only in a single direction — moving backward might not be necessary with just 4 images that every panel contains.
CSS Aspect Ratio - I'm Jhey Tompkins!
  • aspect-ratio
  • padding-bottom depending of the aspect-ratio
  • css variables, but one dimension needs to be known:
    --aspect-ratio: calc(4/3);
    --height: 30vmin;
    --width: calc(var(--height) * var(--aspect-ratio));
    height: var(--height);
    width: var(---width);
Icebergify: Your Spotify Iceberg