// raccourci ctrl+s ou alors affichage->palette de commande -> snippets
// choisir le fichier à éditer


Créer un snippet sur VS Code

Créer une paire de clés rsa
ssh-keygen -t rsa  -b 4096 -C "email@example.com"

//les options -b 4096 et -C… sont facultatives mais permettent respectivement d'augmenter la force de la clé et d'ajouter un commentaire, ici l'email, pratique si on veut se créer plusieurs clés, par exemple perso/pro

Ajouter ma clé ssh pour qu'elle soit reconnue :
ssh-add
// si on veut préciser le chemin
ssh-add /chemin-complet/vers-la-cle/nom-cle

Vérifier tout ça :
ssh-add -l
// si : The agent has no identities. => pas bon. Faut refaire.

Ajouter une clé publique sur le serveur :
ssh-copy-id -i ~/.ssh/id_rsa.pub address@server
-> puis entrer le mot de passer pour finaliser la connection


Gestion des clé rsa

// Ajouter dans le head de la page principale du site
<§
window.addEventListener("load", () => {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("service-worker.js");
  }
});
§>

// Créer le fichier service-worker.js au même niveau que le ficier html du site (dossier public généralement)
// source : https://googlechrome.github.io/samples/service-worker/basic
<§
const PRECACHE = 'precache-v1';
const RUNTIME = 'runtime';

// A list of local resources we always want to be cached.
const PRECACHE_URLS = [
  'index.html',
  './', // Alias for index.html
  "favicon.ico",
  "/img/main_page_small.png",
  "/img/details_page_small.png",
  "/img/transaction_page_small.png",
  "/img/history_page_small.png"
];

// The install handler takes care of precaching the resources we always need.
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(PRECACHE)
      .then(cache => cache.addAll(PRECACHE_URLS))
      .then(self.skipWaiting())
  );
});

// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
  const currentCaches = [PRECACHE, RUNTIME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
  );
});

// The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener('fetch', event => {
  // Skip cross-origin requests, like those for Google Analytics.
  if (event.request.url.startsWith(self.location.origin)) {
    event.respondWith(
      caches.match(event.request).then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }

        return caches.open(RUNTIME).then(cache => {
          return fetch(event.request).then(response => {
            // Put a copy of the response in the runtime cache.
            return cache.put(event.request, response.clone()).then(() => {
              return response;
            });
          });
        });
      })
    );
  }
});

§>

// Et enfin créer le fichier offline.html qui servira de fallback. A customiser, bien entendu !
§>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>You are offline</title>

    
    <style>
      body {
        font-family: helvetica, arial, sans-serif;
        margin: 2em;
      }

      h1 {
        font-style: italic;
        color: #373fff;
      }

      p {
        margin-block: 1rem;
      }

      button {
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>You are offline</h1>

    <p>Click the button below to try reloading.</p>
    <button type="button">⤾ Reload</button>

    
    <script>
      // Manual reload feature.
      document.querySelector("button").addEventListener("click", () => {
        window.location.reload();
      });

      // Listen to changes in the network state, reload when online.
      // This handles the case when the device is completely offline.
      window.addEventListener('online', () => {
        window.location.reload();
      });

      // Check if the server is responding and reload the page if it is.
      // This handles the case when the device is online, but the server
      // is offline or misbehaving.
      async function checkNetworkAndReload() {
        try {
          const response = await fetch('.');
          // Verify we get a valid response from the server
          if (response.status >= 200 && response.status < 500) {
            window.location.reload();
            return;
          }
        } catch {
          // Unable to connect to the server, ignore.
        }
        window.setTimeout(checkNetworkAndReload, 2500);
      }

      checkNetworkAndReload();
    </script>
  </body>
</html>
§>

Faire fonctionner le site en offline

Colorer le texte lors d'un echo en php en ligne de commande

<?php
// Mettre le texte en rouge (0;31)et avec un fond vert (;42)
<§
echo "\e[0;31;42mMerry Christmas!\e[0m\n";
§>
// Mettre le texte en rouge, pas de fond. "to all of you" restera blanc
<§
echo "\e[0;31mMerry Christmas!\e[0m to all of you.\n";
§>
Autres couleurs pour le texte:
Color	        Code
Black	        0;30
Dark Grey	    1;30
Red	          0;31
Light Red	    1;31
Green	        0;32
Light Green	  1;32
Brown	        0;33
Yellow	      1;33
Blue	        0;34
Light Blue	  1;34
Magenta	      0;35
Light Magenta 1;35
Cyan	        0;36
Light Cyan	  1;36
Light Grey	  0;37
White	        1;37

Pour le background:
Color	      Code
Black	      40
Red	        41
Green	      42
Yellow	    43
Blue	      44
Magenta	    45
Cyan        46
Light Grey  47

// source : [How to Use Colors in Command-line PHP Output by Josh Sherman](https://joshtronic.com/2013/09/02/how-to-use-colors-in-command-line-output/) => Thanks bud !


cd  -> change directory, naviguer sur un autre dossier

cd .. -> revenir sur un dossier parent

ls  -> voir les fichiers sur le dossier présent

pwd -> voir le chemin d'accès dans le dossier actuel




Commandes du terminal

Faire des raccourcis avec les alias zsh sur Mac

Ouvrir un terminal et aller dans le dossier de travail qui nous interesse

touch .zshrc

Dans vi, ajouter les alias que l'on veut. Par exemple : 
alias mm='php bin/console make:migration'
alias dmm='php bin/console d:m:m'
alias cc='php bin/console cache:clear'
alias gs='git status'

Activer le fichier avec:
source .zshrc

//Pour rediriger toute URL en HTTP vers l’URL équivalente en HTTPS, ajouter ceci dans le fichier .htaccess au niveau du rendu (/public) :
<§
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L,NE,QSA]
§>

.htaccess http -> https

Convert image jpg, png into webp using command line

Pour une seule image :
<§
cwebp -q 50 images/flower1.jpg -o images/flower1.webp
§>

Pour tout un dossier :
<§
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
§>

Source pour plus d'info :
[Creating WebP Images with the Command Line]
https://web.dev/codelab-serve-images-webp/

Other