Put all the items in the same cells

header {
  display: grid;
  grid-template-areas: "heros";

  > * {
    grid-area: hero;
  }
}

Hero 1 summary

object-fit used to control img size
align-items: center used to vertically align the grid children

Hero 2 summary

created a color screen over the img by defining background-color of the header with rgba and adding z-index: -1 to the img to slide it behind the header
used pseudo-elements for additional design flair, and positioned them separately from the parent grid definition with place-self

Hero 3 summary

use of a wrapper to provide a secondary grid layout for content versus header design elements
creation of auto-width columns with grid-template-columns
Leveraging vmin to minimize padding on smaller viewports and increase it for larger viewports

1. aller sur https://sharedrop.io
2. partager le lien de la room par envoi d'un SMS via l'API de Free
3. ouvrir le lien reçu
4. envoyer le fichier depuis l'ordinateur
5. accepter l'envoi depuis le smartphone 😍

1. Switch the Grid Flow Axis : grid-auto-flow: column;
2. XY Center Anything : place-content: center; (on any child)
3. Intrinsically Responsive Grid Columns

:root {
  --grid-col-breakpoint: 15rem;
}

.grid-columns {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-breakpoint), 1fr));
}

Installez log2ram pour éviter que les logs soient écrit directement sur la carte SD

$gridGap: 2rem;
$minColWidth: 15rem;

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));
  grid-gap: 2rem;

  & + .grid {
    margin-top: $gridGap;
  }
}

Flexbox

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

// Optional
main {
  margin: 0 auto;
  // or: align-self: center
  max-width: 80ch;
}

Grid

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

// Optional
main {
  margin: 0 auto;
  max-width: 80ch;
}

Encore quelque chose de très utile ! Sous le coude

Une excellente liste à garder sous le coude

A lot of Vue tips

Full screen

• PrtSc – Save a screenshot of the entire screen to the Pictures directory.
• Ctrl + PrtSc – Copy the screenshot of the entire screen to the clipboard.

Custom Region

• Shift + PrtSc – Save a screenshot of a specific region to Pictures.
• Ctrl + Shift + PrtSc – Copy the screenshot of a specific region to the clipboard.

Current window

• Alt + PrtSc – Save a screenshot of the current window to Pictures.

OMG this changed my life. I was still using kazam for this !

About Flameshot : it gives useful features for fast editing after taking the screenshot 👍

On reprends les tips 👍

Juste après le « shebang », mettre ça sur la ligne d’après :
set -euo pipefail

• set -e which ensures that your script stops on first command failure.
• set -u which ensures that your script exits on the first unset variable encountered.
• set -o pipefail which ensures that if any command in a set of piped commands failed, the overall exit status is the status of the failed command.