Monthly Shaarli

All links of one month in a single page.

February, 2023

Pachelbel's Chicken - YouTube

If you have some notes, you can have a melody

Manifesto for Minimalist Software Engineers | Minifesto.org

Summarized to:

Fight for Pareto's law, look for the 20% of effort that will give you the 80% of results.
Prioritize, minimalism isn't about not doing things but about focusing first in the important.
Perfect is enemy of good, first do it, then do it right, then do it better.
Kill the baby, don't be afraid of starting all over again. Fail soon, learn fast.
Add value. Think constantly how you can help your team and position yourself in that field/skill.
Basics, first. Follow always a top-down thinking starting by the best-practises of CSS.
Think different. Simple is harder than complex, which means you'll need to use your creativity.
Synthesis is the key of communication. We have to write code for humans not machines.
Keep it plain. Try to keep your designs with few layers of indirection.
Clean kipple and redundancy. Minimalism is all about removing distractions.

UX Podcasts For Designers — Smashing Magazine
Comment j'ai pris plaisir à tester mon code

(avec le TDD)

Ainsi, il ne peut pas y avoir la moindre ligne de code écrite sans test. Au-delà d’une technique de développement, cette technique de conception permet de poser la question explicitement : “Qu’est-ce que tu cherches à vérifier ?” Lorsqu’on répond à cette question, en développant le test automatisé qui matérialise la réponse, alors l’implémentation du morceau de fonctionnalité découle naturellement.

Un bug va obligatoirement engendrer plusieurs heures de perte pour l’organisation au global, en plus de créer des frustrations, de la perte d’image de marque, de détérioration de la confiance envers le produit, des mauvaises notes sur les stores et un risque de perte définitive du client.

My code is still a mess, but I’m learning - Jan-Lukas Else

Continuous learning :)

antfu/git-js: A light weight interface for running git commands in any node.js application.
antfu/vue-starport: 🛰 Shared component across routes with animations

So since we can't share the components across different branches in the component tree, we could actually hoist them to the root so they become independent from the routes.

Startport allows to have transitions between vue pages.

The ultimate guide to proper use of animation in UX | by Taras Skytskyi | UX Collective

This guide provides guideline for animations. Here are the following rules:

  • 200-500ms is the optimal speed for interface animation
    • on mobile device, the duration of animation should be limited to 200-300ms.
    • on tablets, it should be longer by 3ß% as the screen is bigger so objects overcome the longer path when they change position.
    • on wearables, the duration should be accordingly 30% shorter
  • the duration of web transitions should last about 2 times shorter than on mobile devices — between 150–200 ms
  • the more bigger the element is, a bot better when it lasts a little longer.
  • When objects collide, the energy of collision must be evenly distributed between them according to physical laws. Avoid the bounce effect.
  • The movement of the objects should be clear and sharp. Avoid motion blur.
  • List items (news cards, article list items) should have a very short delay between its appearance: 20-25 ms.

Easing makes the movement more natural: the object should move with some acceleration or deceleration — just like all live objects in the physical world. There are 3 categories:

  • linear motion: it looks very unnatural and artificial to the human eye.
  • ease-in (acceleration curve): should be used when the objects fly out of the screen at full speed and won't be displayed again.
  • ease-out (deceleration curve): should be used when the element emerges on the screen. his can also be applied to different cards or objects that appear from the outside of the screen.
    • ease-in-out (standard curve): is the most frequently used in interface animation. In doubt, use this animation. Ease-in-out is used when the objects move from one part of the screen to another. The same movement type should be used when the element disappears from the screen but the user can return it to the previous place at any time.

Equal interaction: the appearance of all objects obeys to one particular rule

  • A vertical list should be guided in one fluid direction
  • Grid should have a diagonal appearance
  • subordinate interactions (one central object which attracts all user's attention): animate as minimum objects as possible at one time.
  • when the moving objects transform their size disproportionally, they should move along the arc rather than in a straight line.
  • if the paths of the moving objects intersect one another, they cannot move through each other. In another case, the moving object can rise above other objects.
Melodice - Music Playlists for Board Games
SNCF INNOVE – LE WIFI À BORD DES TGV, COMMENT ÇA MARCHE ? - YouTube

La prouesse technique d'avoir du Wifi à bord des TGV, et pourquoi c'est si compliqué !

Building an accessible theme picker with HTML, CSS and JavaScript. by Sarah L. Fossheim

A great example!

Theme Toggles

Some dark/light mode toggles

My favourite 3 lines of CSS | Andy Bell

How to handle spacing between css elements in one line of code?

.flow > * + * {
    margin-block-start: var(--flow-space, 1em);
}
Reims : Pour ne pas arriver en retard, le passager d’un train ouvre lui-même un colis suspect
Les supermarchés favorisent les aliments de mauvaise qualité

Une étude de l’UFC-Que choisir a montré que les supermarchés faisaient deux fois plus de marge sur les fruits et légumes bio que sur les conventionnels. D’après tous les experts que l’on a interrogés, la pratique est la même pour la viande et les produits laitiers bio et sous Label rouge.

La NSA lance un « effort de recrutement sans précédent » de 3 000 nouveaux employés
10 Most Popular Torrent Sites of 2023 * TorrentFreak
antfu/naive-ui: A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses Typescript. Not too Slow.

Another component library for vue :)
The components look clean. Demo: https://www.naiveui.com/

antfu/taze: 🥦 A modern cli tool that keeps your deps fresh

It allows to bump patch versions by default, or minor or major. It can update dependencies recursively with -r.

As long as I read the README, it is useful to get an overview of the possible updates.

Home – Read Rust

A collection of resources about the rust programming language

The Magic Of February (2023 Wallpapers Edition) — Smashing Magazine
Why I Picked Vue.js as My Freelancer Niche

It combines the best parts of React and Angular.

  • Outstanding documentation
  • Less optimization efforts
  • Templates
  • Scaling Up
  • Scaling Down

Weakness:

  • Community less than React
  • Less opinionated → this can be solved with a Vue family project IMHO

What is missing:

  • Better Mobile App Support → indeed I never heard of that
  • Form validation → there is no standard validation pattern but there are libraries for it
Naive UI
PrimeVue - Vue UI Component Library
Quelle est la durée de vie moyenne de la batterie d’une voiture électrique ? | Ulys by VINCI Autoroutes

Des conseils sur l'usage d'une voiture électrique. Je poses cela ici pour partage ou utilisation ultérieure.

CodeImage - A tool to manage and beautify your code screenshots
Climat : il faut "préparer notre pays à 4 °C" de réchauffement climatique, prévient le ministre de la Transition écologique
Zelda & Chill - YouTube
SnippetVamp - open

Vérifier la validité des liens d'une page et y ajouter une classe .status comme .status404

Mon apprentissage du TDD (retour d'expérience)

Le TDD est avant tout une méthode de développement permettant de faire émerger son design et donc son code grâce aux tests

“Baby-step”, c’est la clé pour s’amuser, pas au sens d’enfantillage, mais pour prendre plaisir à développer et comprendre que notre métier est vraiment beau quand on supprime toute forme de “hasard”.

Un cycle TDD "Red, Green, Refactor" correspond une une bribe de spécification écrit sous forme de test et sa réponse. On écrit le code minimaliste pour que ce test "Red" fonctionne et passe au "Green".

Pour cela, il est recommandé d'abuser de son IDE. Par sa construction itérative guidée par les tests, TDD apporte par “effet de bord” un taux de couverture de code par les tests à 100%. Ce n’est pas ce que l’on recherche de prime abord, mais ce code coverage est là, et surtout il est pertinent. C’est ce dernier mot qui est important : cette pertinence permet réellement de se plonger dans la troisième phase de TDD.

Ensuite on refactorise pour donner plus de sens: spécifier les erreurs, de passer d'un constructuer à un builder, ... Nous pouvons nous le permettre car les tests nous soutiennent. Ils seront aussi à évoluer, par exemple pour vérifier que le builder pattern fonctionne correctement.

antfu/utils: Collection of common JavaScript / TypeScript utils

js/ts utils

Research: quantifying GitHub Copilot’s impact on developer productivity and happiness | The GitHub Blog

In order to measure this, the developers had to set up a JS server. Which is a routine... and that's cool Copilot helps with that. What would be a game changing is when specialized dev task can be done by Copilot.

Kagi - Universal Summarizer

Summarize any content on the web - from articles to books - in a jiffy!

Open Props: sub-atomic styles

Ready to use design tokens