Monthly Shaarli
December, 2022
Pour avoir des médecins en direct.
Je ne l'ai pas testé
Another one !
This is the crux of the Yard-sale model. In a free market, one person ends up with all of the wealth – completely by chance.
Looks like the monopoly game. It is inevitable. This effect is the following:
When you lose, the maximum amount you can wager goes down. So you can't win back what you lost in one coin flip.
When you win, the maximum amount you can wager goes up. So you could potentially lose more than what you won in the first game.
Besides I like the work done on the interface to make it interactive 👍
When shown the huge list of operating systems curl runs on, people often ask me which is the strangest, or hardest, operating system to keep curl support for. The answer is always, and will probably always remain: Windows.
No other operating system has so many custom, special, weird and quirky ways that require special-case solutions in the code.
Free speech really should be free. To bypass the new censorship regime at twitter, use this URL shortener to link to Mastodon or other censored destinations. Considering recent policy decisions on twitter, please be aware that use of links generated from this site may constitute a violation of their policy.
An URL shortener
Fait assez curieux, la bureaucratie assure sa domination non pas en exigeant des données fiables ou contrôlées, mais se satisfait de ce que chaque case soit remplie. L’expérience a montré que répondre n’importe quoi à ces inquisitions n’a aucune conséquence.
La loi de Goodhart devrait pourtant être connue de nos élites : lorsqu’une mesure devient un objectif, elle cesse d’être une bonne mesure. Un indicateur manipulable transformé en objectif a immédiatement des effets pervers.
Plaidoyer pour les araignées, ces animaux subissant le délit de sale gueule.
La vidéo appuyé par Elon Musk n'a donc pas été tournée proche d'un aéroport, comme il le prétend
Mais cela poussera à réfléchir à ce que nous voulons que les humains fassent. Écrire des synthèses fades et sans originalité ou bien travailler de manière plus créative ?
Et Bortzmeyer rappelle que la progression technique n'est pas linéaire.
L'impunité des hommes célèbres (face aux violences contre les femmes).
Sinon c'est ok, nous pouvons continuer, le foie gras en vaut bien les sacrifices :)
Un thread de répartie et rhétorique pour se défendre face aux discours réduisant l'impact du COVID.
Tooling for DX have skyrocketed these last years.
Point is it is still hard to develop these tools: what if there is a standard? "What if your users could start writing lint rules immediately?".
As an example of Tree-sitter, what if such a compiler could include every build framework such as salsa, turbo [opinionated thought], VSCode, etc...
All of these tools are what I’d call meta-tools. They allow programming language implementors to increase their productivity in a comparable manner to how developer tools increase the productivity of regular developers.
How?
- Meta-tools must offer such a compelling suite of features that it becomes difficult to refuse.
- The experience of using a meta-tool should also be first-class.
- Meta-tools must fundamentally be extensible: being able to implement theirself 1% needed.
What keeps Rust from being an Inria PhD student’s thesis that nobody uses is its focus on tooling, good compiler diagnostics, and ecosystem
- raise the bar: maybe it’s better code generation for scaffolding projects. Maybe it’s extremely quick deployment based on incremental compilation. Maybe it’s seamless interop with other languages.
Rappel que le COVID est toujours une maladie a prendre au sérieux et dangeureuse
WebOSINT is a tool that retrieves domain information based on different APIs.
The different APIs used need an account, but there is a free trial.
A curated list of algorithms sorted in two categories: Beginner and Advanced
Specific questions on the JS language
JavaScript Repository of TheAlgorithms, which implements various algorithms and data structures in JavaScript.
For education only
A project to use a Result type. This particular type contains a result or an error.
- OpenStreetMap
- Wikipedia
- Observation.org
- Wardriving with the tool Wigle
- folding@home
- Blog posts
Madeline a eu le bon réflexe de nous contacter pour demander l’autorisation de garder une licorne chez elle. Nous voulions absolument lui répondre et encourager ce type de comportements
- Due to color vision deficiencies, it’s a good idea to always complement error messages with an icon
- Additionally, it might be a good idea to guide users towards specific issues of the form with an error summary.
- Never cover user inputs
- First of all, we avoid tooltips that open on hover and display the tooltip only once tapped or clicked.
- Error message position:
- they should be placed above input for various reasons, but it costs layout shifts. In doubt, a collapsible accordion instead might be a better idea there.
- they should be placed inline in tables. One of the simpler patterns is to display the error message in the same row where the content lives.
- Avoid toast error messages
- Establish stop-words for your error messages: they should never be used. See Error messages
- Provide Examples Of Correct Input or guide the user to the expected input. For example, "IBAN starts with the country code. For example, DE or AT.
- Display Error Summary on the top
- Additionally, you might want to adjust the favicon and the title of the document if errors do appear,
How to build common ui patterns that are accessible 👍
Create an accessible color palette based on criteria AA
Un mensonge en deux actes
Check the interaction is ok
Which errors or alert message should be used?
Each new generation on the web needs to learn that there’s no such thing as a permanent web identity on a commercial web service.
The only long-term solution to maintain your identity is:
- your own domain name
- Your own website/blog
- Several backups
Everything else is temporary. Your accounts on myspace, facebook, medium, twitter, google plus, youtube, tiktok, mastodon will one day disappear or become useless.
You don’t have a "community" on those websites. Only ephemeral discussions.
Legit if you think in terms of years.
Make slides on the web.
Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with.
Consistency is the deciding factor in long-term success
Totally agree.
We can all stay consistent when we're in a great mood and feeling motivated. What really makes the difference is finding a way to stay consistent when we feel like shit and would rather stay in bed.
A key difference is how to react when it is hard or you don't want to do it anymore.
Voilà. Comme le soutien SebSauvage, ce n'est plus la fête du côté des GAFAMs.
« En deux siècles, la productivité du travail a été multipliée par trente et le temps de travail divisé par deux. Sans cette diminution, nous aurions deux fois plus de chômeurs aujourd’hui », assure Jean-Marie Harribey.
Je poses cela ici
Send me a picture of your dog to get it tinyfied!
Using JS to generate a default avatar with one letter:
function genAvatar(name) {
try {
// Match General_Category=Letter
const match = name.match(/\p{L}/u);
return (match && match[0]) || null;
} catch {
return name[0] || null;
}
}
A good starting point for Vue experienced programmers with Tailwind
The strategy of all billionaires: giving their money to their own fundation.
- Extraction: make the nested code a function or its own piece of logic.
- Inversion: use guards to remove nested code. These guards will stop the function before the end of the function body. They act as gates.
In the last 14 months (from Oct-2021 to Nov-2022), DevJobsScanner has analyzed more than 12M developer jobs.
- JS/TS
- Python
- Java
- C#
- PHP
- C/C++
- Ruby
- Go
How to handle fetch API errors ?
It throws on API Network Error only...
An excellent project for useful conversions!
Generate a palette color based on one color, and shows the colors with a proper accessibility ratio (3:1 or 4.5:1).
Can work perfectly with https://www.opensourcecolorsystem.design/ where a meaning to a color is provided!
Discours retardant l'action climatique:
- capituler: On n'y arrivera jamais
- Dictature verte: les mesures contre le réchauffement sont tellement contraire à notre manière de vivre qu'elles ne seront jamais possible dans une démocratie.
- Catastrophisme: de toute facon c'est trop tard, la catastrophe est déjà écrite. Nous devons nous adapter ou accepter notre sort.
- détourner la responsabilité: c'est d'abord aux autres d'agir
- Détournement: notre empreinte carbon est négligeable par rapport à X, donc il ne sert à rien d'agir.
- Individualisme: les individus et les consommateurs sont les responsables principaux et doivent agir en priorité.
- Compétition: Réduire nos émissions nous affaiblira par rapport à ceux qui ne le font pas, et ils en profiteront pour gagner contre nous.
- se concentrer sur les mesures marginales: des petits changements sont suffisants
- optimisme technologique: nous devons concentrer nos effort sur les technologies qui devraient apporter des solutions au réchauffement climatique.
- Belles paroles: Nous sommes à la pointe du combat contre le réchauffement climatique, nous avons voté des cibles ambitieuses et déclaré l'état d'urgence climatique...
- Compromis carboné: les combustibles fossiles sont de plus en plus efficace et font donc partie des solution pour un futur bas carbone.
- Carottes sans batons: la société n'acceptera que des mesures positives et incitatives, il faut éviter les contraintes et restrictions.
- se concentrer sur les coûts: cela sera trop compliqué
- perfectionisme politique: nous devons prendre uniquement des mesures parfaites, acceptées par tout le monde, sinon ce serait contre-productif.
- Attention au développement: les combustibles fossiles sont nécessaires au développement des pays pauvres et y renoncer les condamnera à la misère.
- Attention aux gilets jaunes: les coûts de l'action climatique porteront largement sur les plus pauvres, qui vont s'opposer à cette injustice.
Different loading hints:
async
resource is loaded when the browser candefer
resource is loaded when the DOM is parsed (less priority than async)rel=preload
load the resource before the parsing and everything elsefetchpriority
with valuehigh
,low
andauto
. They are hints.rel=preconnect
indicates that a connexion has to be established ASAP.rel=dns-prefetch
resolves the domain name without fetching the resource.loading
attribute determine when an image is loaded depending of its value:eager
: the image is loaded immediatelylazy
: the loading is delayed until the user scroll to it.
A crash course with further resources
La solution, la seule, permettant de traiter le mal plutôt que ses symptômes est pourtant connue. Elle consiste, je vous en ai déjà parlé, à créer un index indépendant du web. C'est à dire à réinstaller durablement dans l'espace public une "ressource", un "bien commun" dont l'exploitation par des acteurs privés à fini par installer des usages essentiellement privatifs, là où pourtant l'ensemble des caractéristiques techniques (son architecture) et des usages (ces 'contenus' qui 'font' le web) de ce "bien" relèvent, par nature, de la sphère publique commune.
Aussi, développé dans l'article:
Il n'y a pas de barrière technique ou juridique au déploiement de cet index indépendant.
Avec de bons débuts d'aggrégation de données: Hathi Trust pour les livres, Internet Archive pour les sites webs.
Les technologies open-source sont aussi présentes, de même que la recherche au niveau européen. Les services quotidiens ont tous ou presque un équivalent open-source.
About design:
- Less is more: the content will be more important
- 5x5 rule: Maximum 5 lines of texte for a slide, and maximum 5 words per line.
- Show, don't tell: group together, use size, color, font, bold, etc...
- Fonts: Outfit, Montserrat, Lato, Fira, Roboto, Opan Sans, Poxima, Circular
- Illustrations: Pixabay (https://pixabay.com/fr/), Unsplash (https://unsplash.com), stocksnap (https://stocksnap.io), Undraw (https://undraw.co)
- Icons: Flaticon, TheNounProject (https://thenounproject.com/)
- Figma or Adoe XD can help to create the slides
This is in large part because HTML is a limited hypertext. In particular:
- Only
<a>
and<form>
can make HTTP requests- Only click & submit events can trigger them
- Only GET & POST HTTP Methods are widely available
- A request must replace the entire screen, leading to a clunky and sometimes jarring user experience
To the last point: the transition API is on its way :)
LOL. Wrap a IP protocol into HTTP 🤯
The Selection control ecosystem flow chart has a great tree-choice to display the expected field component.
TL;DR; An AI is created from the work of thousands without their consent.
The artists have to opt out before publishing each of their new works.
A serie of posts about Nuxt
- Continuous performance checks in Nuxt.js with Lighthouse CI and Github Actions
- Performance checklist for Vue and Nuxt (and recommended modules for Nuxt)
- Introduction to Nuxt modules
- Leveraging cache in Nuxt.js (and there is a good example of server middleware per page 👍
- Introduction to Nuxt 3 modules
- How to add Algolia Search to Nuxt 3
- Using Modules and Pinia to structure Nuxt 3 app
- Building a Nuxt Modules clone with Nuxt 3, TailwindCSS, Storyblok, and Vercel
- Building Blog with Nuxt 2 and Contentrain Headless CMS
- Deploying Nuxt 3 app to Vercel 🚀
- Adding Newsletter to Nuxt 3 apps
- How to use Cloudinary Images with Nuxt 3
- Improving Security of Nuxt 3 (self-developed modules)
- Improving Performance of Nuxt apps with Partytown
- Improving Performance of Nuxt with Fontaine [fonts] 🚀
UnoCSS powered component library.
It looks promising with its 18 components!
It looks like software-locked features are unlocked by supplementary payment, but on hardware...
But why should you pay more if it is already built-in the thing you buy?
TL;DR; instead of
- padding-left: use padding-inline-start
- padding-right: use padding-inline-end
- padding-top and -bottom: use padding-block
- width: use inline-size
- height: block-size
- overflow-x or -y: use overflow-inline or overflow-block
- position: top: use inset-block-start
Here is the pattern:
inline
for the reading axis. For us, it is left to right.block
for the other (thickness) axis. For us, it is top to bottom.
Réimplémenter le jeu Pigeon Pigeon avec une interface web, seul ou à plusieurs joueurs.
I like these relative paths added in the text of the links. I wonder how accessible it is?
Generate memes cat
- cookie jarring
- love bombing
- soft ghosting
Des concepts inventés pour... rien. Quel est l'utilité de ces cpncepts? D'où les bullshit concepts.
A game where you need to pick the design that is most correct. Test your attention to details!
Lien du projet: https://github.com/lettier/gifcurry
Lorsque le métier n'attire plus, que ce n'est plus une vocation souhaitée avec laquelle vient un confort financier, les gens n'en veulent simplement plus
.
Toujours en cours de construction, ce service peut s'avérer d'utilité pulique à l'avenir!
Le modèle économique:
Hive établira un cours basé sur l’offre et la demande en matière de stockage. Si une personne propose plus d’espace qu’elle n’en consomme, elle sera rémunérée. Cela est selon l'espace de stockage, le type de stockage, la disponibilité, l'empreinte énergétique et la valeur communautaire.
Hive prendra 5% de frais sur l'ensemble des transactions.
Le blog du service en question: https://www.hivenet.com/blog
Le témoignage pourrait bien être corrélé aux témoignages de suicides au travail.
TL;DR; éviter les interfaces inutiles. La question se pose alors: quand est-ce qu'une interface est pertinente?
Deux cas vous indiquent que vous devriez avoir une interface :
- Vous développez une bibliothèque : mettez toute l’API publique dans des interfaces. Ça permet une excellente séparation de ce qui est public (et utilisable par les tiers) de ce qui est du détail d’implémentation et « public » pour raisons techniques. Vous pouvez même distribuer ces interfaces dans un paquet séparé si c’est pertinent dans votre cas.
- Vous savez déjà, lors de votre conception, que vous avez plusieurs implémentations distinctes à réaliser – maintenant ou dans un futur proche et non-hypothétique.
Generate color gradients
Provide context to each chunks of color such as "Classy Palette" or "Collective".
When we fall to the Sunk Cost Fallacy, we are most likely to continue an endeavour if we have already invested in it, minimising downsides and new information in the process.
It happens due to three reasons:
- the commitment bias: we stick to a previous decision despite new evidence showing it isn’t the best course of action
- the loss aversion bias: avoid being in a losing situation since losses feel much worse than gains.
- the endowment effect: we tend to attribute more value to something we own or make than something we buy.
Solution?
Instead of estimating how long it will take to code a feature, you could estimate the maximum amount you’re willing to spend on this feature
L’an passé, selon les chiffres de l’assurance-maladie, seules 27 % des fraudes à la Sécurité sociale avaient été commises par les 67 millions de Français assurés, contre 72 % par les professionnels de santé.
TL;DR $attrs defines every attribute that is not listed in the props.
Use cases:
- apply $attrs on a specific node
- tell Vue to apply $attrs on a node of a multiple root-node components
- using prop validations (in dev only for example)
Je poses cela là.
Avec une vidéo de son témoignage sur Twitter: https://mobile.twitter.com/LCP/status/1601249096735547398
Je ne connais qu’une seule façon d’apporter plus de valeur et c’est d’en faire moins, de ne pas faire tout ce qu’on nous demande. En restreignant les tâches, on se concentre sur celles qui ont le plus de valeurs. Ça veut aussi dire accepter que mes interlocuteurs ne fassent pas tout ce que j’imagine, leur donner le pouvoir de faire des arbitrages, leur donner les objectifs et leur expliquer la stratégie pour qu’ils fassent ses arbitrages de façon autonome… et leur faire confiance sans leur reprocher ce qu’ils n’ont pas fait.
Sur les métiers de production informatique j’ai vu une différence de production assez faible entre un développeur à 80% et un à 100%. J’ai vu une grosse différence entre quelqu’un de reposé et quelqu’un qui ne l’est pas.
Ils sont magnifiques et c'est si beau
The whole point of #100DaysToOffload is to challenge you to publish 100 posts on your personal blog in a year.
Tiens tiens
You got some points
Straight white male privilege (from the far right) is this: To be able to stand 50 people in front of a school in military uniform with automatic weapons in hand and not be bothered by the police.
(from https://sebsauvage.net/links)
Using the tool gitfive.
A simple, consistent open-source icon set designed to be used in a wide variety of digital products.
First feedback: 130km/h to 110km/h
Time travel (hours): 3.15 to 3.35
Consumption (liters): 31.23 to 17.18
It seems to be relevant depending of the vehicle of course.
Another testimony:
- 5.7-6.0 liters to 5.2 liters
A calculator for everything, every usage.
En dessous de 17°C je ressens le froid au quotidien (à 18°C je me sens encore bien). Et le pire c'est pour le télétravail : sous les 19°C c'est difficile d'être à l'aise.
Idem. Effectivement, un simple chauffage d'appoint peut suffire: 19 degrés est confortable pour le travail. 18 sinon.
A quick accessibility checklist for programmers
« Il s’agit d’un modèle économique construit autour de l’exploitation de l’environnement et des personnes, qui s’appuie sur l’absence d’application des réglementations conçues pour protéger l’environnement, la santé et la sécurité des travailleurs et des consommateurs », conclut l’ONG.
A way to understand Mastodon.
2 things:
- Today I Learned - TIL
- Write about your projects
I recommend adding “write about it” to your definition of “done” for anything that you build or create.
Because without reproduction, it takes so much time!
Open Source Software is served "as-is"
So provide a repro or don't open an issue.
const productIds = [123, 456, undefined, 789]
const products = productIds
.map(getProduct)
.filter((item): item is Product => item !== undefined)