Daily Shaarli

All links of one day in a single page.

May 26, 2022

Testing Pipeline 101 For Frontend Testing — Smashing Magazine

Unit > Integration > E2E is still a valid pyramid for testing; but better can be found.

Static analysis > Unit + Integration > e2e

Static analysis means to check the code without running it. We already have examples with Eslint as a javascript code style fixer; Stylelint for CSS code fixing (I have to try); Sonarqube

Unit and integration tests are mixed together as:

  • The definition of a unit is often “to be discussed”: If you ask a group of developers to define a unit, you will mostly get various, differing answers. As some refer to a function, class, or service — minor units — another developer will count in the complete component.
  • In addition to those definition struggles, drawing a line between unit and integration can be tricky, as it’s very blurry. This struggle is real, especially for Frontend, as we often need the DOM to validate the test basis successfully.
  • It’s usually possible to use the same tools and libraries to write both integration tests. So, we might be able to save resources by merging them.

There are also visual tests. We can group e2e-tests and visual tests into a UI test category. Btw the recommended open-source and fully self-hosted tool for visual testing is Visual Regression Tracker

In Defence of the Single Page Application | William Kennedy

LOL

FixA11y — improving accessibility

A browser extension that automatically increases contrast on sites.

👍‍

This could also be implemented in the browsers :)

The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

As a general rule, we should give the user as much control as possible, and we should never disable or block their settings from working. For this reason, it's very important to use a relative unit like rem for typography.

Then we should use rem everywhere ?

Do I actually want everything to scale with font size?
When we use rem values for horizontal padding, though we amplify the effect "larger the text is, the fewer characters can fit on each line".

So the final question is:

“Should this value scale up as the user increases their browser's default font size?”

I've come to realize, however, that we usually do want to use rems for media queries.

We're so used to thinking of media queries in terms of mobile/tablet/desktop, but I think it's more helpful to think in terms of available space. [Why in the post]

Other example is the space between paragraphs: it has a "functional" purpose so that we can quickly tell where one paragraph ends and the next one begins. For this reason, it does make sense to scale these margins with the user's chosen root font size.

Example of use of em instead of rem

  • rem
h1 {
  font-size: 3rem
  margin-top: 6rem;
  margin-bottom: 1.5rem;
}
h2 {
  font-size: 2rem
  margin-top: 4rem;
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 0.75rem;
}
  • em
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}
h1, h2, h3 {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

Another example is the width of a button: we can think about it alone yet.

Finally, it is better to forge an intuition as opposed to a set of rules about using rem/px as there are always edge cases.

Encre canaille  on Twitter: "J’ai toujours cru que McDonald’s gagnait de l’argent en vendant des burgers. En voulant écrire l’histoire de la marque, je me suis aperçu que pas du tout. Voici le véritable business model de McDonald's, aussi simple que brillant 🍔👇 (En photo: McDonald's de Roswell, USA) https://t.co/LDQ4vrJkxe" / Twitter

Où on apprend que ce qui fait la fortune de McDonalds, ce n'est pas la vente de ses burgers, mais l'immobilier. Explication TLDR:

  • 93% des McDo sont des franchises.
  • Les terrains sur lesquels il y a un McAdo appartiennent toujours à McDo.
  • McDo loue ces terrains aux franchisés.

La part des bénéfices de McDo est donc :

  • 1% : Franchise.
  • 35% : Comission sur les ventes
  • 65% : Loyers de ses terrains.

En 2019, McDo possédait un parc immobilier d'une valeur de 39 milliards de dollars.

(de https://sebsauvage.net/links/?axT30A)

(Why) Some HTML is "optional" (archive) — David Larlet

<P> was meant to be a break tag between paragraphs!

Usbek & Rica - L’effondrement, la nouvelle fin du monde ?

D’après Roland Gori, psychologue et psychanalyste, là où, historiquement, l’ébranlement fondamental était porté par une parole révélée ou encore une hypothèse qui appuyait un projet politique, aujourd’hui le constat de l’ébranlement puissant et total que nous allons connaître – et avons commencé à vivre – ne se double ni d’un unique et clair programme politique, ni d’une croyance en un salut providentiel. En d’autres termes, nous savons que l’effondrement a lieu, mais nous ne savons quoi en faire. En cela, de mobilisateur, il peut devenir paralysant, en témoigne le peu d’impact que peuvent avoir les sorties des derniers rapports du GIEC.