blog

reset

Quelques changements modernes à customiser selon vos projets.

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width:0;
}
 
 
html {
  scroll-behavior: smooth;
}
 
/* Rendre les images responsive */
img,
picture {
  max-width: 100%;
  display: block;
}
 
/* Rendre le texte plus lisible */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height:100dvh;
}
 
h1,h2,h3,h4{
  text-wrap: balance; // ton titre
}
 
p{
  text-wrap: pretty; 
}

ChatGPT

dans la ou les catégorie(s) : code et avec pour étiquette(s) : ,

Je donne ma langue au chat…

Quelques tests

On trouve des prouesses sur Twitter et autres, mais je partage quand même quelques tests personnels.

bash

Via le Terminal, il est possible de faire des opérations complexes sur les fichiers, mais je n’ai aucune compétences dans l’écriture de ces scriptes !

Ma question : Comment déplacer tous les fichiers par extensions avec le Terminal MacOS ? Exemple, tous les .pdf vont dans un/le dossier pdf.

#!/bin/bash
 
# Vérifier que l'argument d'extension est fourni
if [ $# -eq 0 ]; then
    echo "Veuillez fournir une extension de fichier à déplacer."
    exit 1
fi
 
# Définir l'extension de fichier à partir du premier argument
EXTENSION=$1
 
# Créer un dossier pour l'extension si nécessaire
if [ ! -d $EXTENSION ]; then
    mkdir $EXTENSION
fi
 
# Déplacer tous les fichiers avec l'extension donnée dans le dossier correspondant
for file in *.$EXTENSION; do
    if [ -f "$file" ]; then
        mv "$file" "$EXTENSION/$file"
        echo "Déplacement de $file dans $EXTENSION/"
    fi
done

On sauve le fichier sous le nom move_files.sh

Assurez-vous que le script a les permissions d’exécution (sinon, utilisez la commande chmod +x move_files.sh pour les ajouter).

On lance.

sh move_files.sh pdf
sh move_files.sh zip

FFMPEG

FFMPEG est un outil en ligne de commande pour manipuler les vidéos.

J’ai demandé les commandes pour transformer une séquence d’images en mp4 avec différents paramètres.

ffmpeg -framerate 25 -i image%03d.png -c:v libx264 -pix_fmt yuv420p -b:v 8000k output.mp4

Explications par chatGPT

  • -framerate 25 définit la fréquence d’images de la vidéo à 25 images par seconde.
  • -i image%03d.png indique à ffmpeg que les images d’entrée sont nommées image001.png, image002.png, etc. %03d signifie que les numéros de fichier sont formatés sur trois chiffres (avec des zéros de remplissage si nécessaire).
  • -c:v libx264 spécifie le codec vidéo utilisé pour encoder la vidéo de sortie en H.264.
  • -pix_fmt yuv420p définit le format de couleur de la vidéo de sortie en YUV 4:2:0.
  • -b:v 8000k définit le débit binaire de la vidéo de sortie à 8000 kbps.
  • output.mp4 est le nom du fichier de sortie.

En utilisant le format de couleur YUV 4:2:0, la vidéo devrait avoir une prévisualisation rapide dans le Finder de MacOS.

C’est vraiment pas mal pour faire de la sorcellerie ;¬)

En bonus : quelques snippets par Tim Rodenbroeker

GSAP

le fail

J’ai demandé un déplacement en sinusoïdale avec GSAP, il ne comprend pas très bien et donne un mauvais code. C’est très frustrant, ça ressemble à un bon code, mais les subtilités de la librairie sont incomprises. Il faut revoir avec lui la demande et dans ce cas, un débutant sera vite perdu.

const element = document.querySelector(".element");
const amplitude = 50;
const frequency = 0.1;
 
const tl = gsap.timeline();
tl.to(
  element,
  {
    duration: 2,
    x: "50%",
    modifiers: {
      y: (y, i) => Math.sin(i * frequency * Math.PI * 2) * amplitude,
    },
  }
);

SVG, JS, GSAP et plus.

Voici un kit (à améliorer) pour faire des dessins vectoriels en SVG avec du JavaScript.
Même si Processing semble mieux adapté pour ce genre de tache, faire son propre SVG permet une approche différente.
Dans ce kit, j’ai mis quelques fonctions pour dessiner des cercles, des lignes, des rectangles… mais il est assez simple d’en faire d’autres.
J’ai aussi ajouté des liens vers des librairies pour mes propres expérimentations.
Par exemple, GSAP permet pas mal de transformations rapides.

Mode d’emploi :

  • Ouvrir le dossier du zip dans Visual Studio Code (ou équivalent)
  • Ouvrir le fichier sketch.js dans le dossier 01 pour voir un exemple
  • Ouvrir index.html et lancer le liveserver (ou équivalent)
  • La touche S permet de sauvegarder en png et svg (il faut peut-être autoriser Chrome/Firefox)
  • Pour faire un autre sketch, dupliquer le dossier 01 et renommer le 🙂

Le kit.zip

portfolio sur GitHub

Cette année les portfolios de mes étudiants et quelques ressources seront publiés sur GitHub.
Ce choix s’explique en 5 arguments :

  • « gratuit » (et rien à renouveler) ;
  • suffisant (html/css) ;
  • fiable ;
  • pédagogique ;
  • facilement remplaçable si les besoins évoluent.

On utilisera les pages github proposées par celui-ci.
Le principe étant assez simple, si votre compte Github est nommé « git-esad » en ajoutant un repository nommé « git-esad.github.io », GitHub vous publie votre site à cette adresse https://git-esad.github.io/ et le code est lisible/visible/téléchargeable sur votre compte, exemple :
https://github.com/git-esad/git-esad.github.io (on peut aussi le modifier, si on est propriétaire du compte).

GitHub étant assez complexe (une sorte de Time Machine multi-utilisateur avec historique et fusion), on utilisera les fonctions basiques via l’application GitHub Desktop.

Attention ! Si votre nom sur GitHub est avec des capitales « UserName » il faudra créer le repository « username.github.io » sans capitales.
Si votre repository est « private » votre site ne s’affichera pas (logique, non ?).

mini modulofont

dans la ou les catégorie(s) : code

Aujourd’hui, un mini exemple de code pour faire son propre outil de dessin.

  1. Un fichier html avec un ‘.grid’ contenant 25 ‘.item’ pour avoir une grille de 5 sur 5
  2. Un CSS pour contrôler l’aspect
  3. Du JavaScript pour rendre interactif

Ici la technique évite de créer une boucle, on écoute les clics sur ‘.grid’ et on vérifie si on a ciblé un élément avec la classe ‘.item’.

See the Pen mini modulofont by Benoît Wimart (@benoitwimart) on CodePen.

distanciel

Même si ça ne remplace pas un cours en classe…

Comment travailler un projet Web à distance

Checklist du matériel

Internet

Les problèmes en télétravail proviennent souvent de la qualité de la connexion à Internet.
Le site speedtest.net permet de connaitre votre débit.
Celui-ci propose aussi une version en ligne de commande pour les plus aventuriers. Voici mes résultats, si vous passez par le site, vous aurez les mêmes informations en image.

// serveur qui sera testé :
Server: CCleaner – Paris (id = 16676)
// Mon FAI
ISP: Free SAS
// le ping
Latency: 5.54 ms (0.97 ms jitter)
// on charge un gros fichier
// attention si vous êtes en 4G, c’est compté dans vos datas
Download: 304.23 Mbps (data used: 413.1 MB)
// on envoie un gros fichier
Upload: 143.43 Mbps (data used: 254.0 MB)

J’ai l’habitude de lire en Mbps, ici ~ 300Mbps, la fibre et le WiFi n’ont aucun problème.
Si vous avez moins de 8 Mbps, les visioconférences, partages d’écran seront difficiles, il faudra couper la caméra.

Pour améliorer votre connexion :

  • un câble ethernet (et un adaptateur si vous avez un MacBook)
  • ou être le plus près possible du WiFi ;
  • éteindre la box TV ;
  • fermer les onglets Facebook et autres.

Le système d’exploitation (OS)

Vérifiez vos versions de logiciels en commençant par MacOS (ou Windows). Sur mac, menu pomme > à propos de ce mac : MacOS Catalina 10.15.6.
Selon votre OS vous ne pourrez pas installer certains logiciels (et extensions) et si vos versions diffèrent avec celles de votre interlocuteur, les échanges seront parfois impossibles.

Les logiciels

Bureautique

Pour les échanges, les mails (attentions aux pièces jointes), Discord (chat ou salon), Skype (voir les alternatives comme Google Meet ou Jitsi), pour un usage occasionnel teamViewer est gratuit et permet de prendre la main à distance sur une machine.

N’oubliez pas de faire des copies de sauvegardes de vos projets. Votre poste de travail est fragile, les conditions d’usages parfois extrêmes.

Graphisme & code

app figma
Figma

Pour le graphisme web, le logiciel le plus adapté est Figma. Il s’installe sans problème sur la plupart des machines, dans le navigateur ou en application (recommandée), celui-ci nécessite une connexion à Internet, mais pas de besoin de gros débits. Figma offre des outils simples avec des fonctions puissantes pour faire des maquettes « écrans ». Partager vos projets avec un accès complet en lecture et écriture (pour que je puisse corriger), le logiciel propose un système de commentaires permettant d’annoter les images (à l’usage, les notifications ne sont pas toujours précisent et j’en ai déjà « oubliée »).
Attention aux polices utilisées libres ou gratuites, éventuellement vectoriser certains éléments avec parcimonie (exemple : logo).

vscode
don’t panic

Pour le code, codepen est parfait pour les prototypes. Si votre machine vous le permet (OS récent), VS Code en mode projet (ouverture du dossier) avec LiveShare et LiveServer configurés/activés/lancés permet de travailler, visualiser et corriger en même temps un projet web (façon Google Docs).

Comment poser une question technique ?

dans la ou les catégorie(s) : code

En informatique, en code ou autres

  1. Décrire le problème (j’ai ça, je veux ça), préciser son niveau, sa plateforme (ex:mac os catalina, firefox) et les langages ;
  2. Illustrer vos propos (exemple vu ailleurs, prototype Figma, vidéo, croquis), bout de code ou zip (pour le prof) ;
  3. Montrer vos efforts, isoler le problème, éteindre et redémarrer sa machine.

Exemple :

Je débute en JavaScript et j’aimerai faire un diaporama dans une page web. J’ai trouvé la librairie Flickity, mais mon code ne marche pas (être précis) sur Safari, les images ne s’affichent pas. Mon dernier test est en ligne à cette adresse (site + codepen ou jsbin pour l’archivage).

Bonus : Comment résoudre un problème ?

  1. Les moteurs de recherche ;
  2. in english ?
  3. Les plateformes vidéos (youtube) ;
  4. Google images parfois;
  5. Les amis ;
  6. Les forums spécialisés ;
  7. Les Discord spécialisés ;
  8. Github, codepen, stackoverflow ;
  9. Les moteurs de recherche en mode avancé (site:jenseign.com grid).

typotap

Introduction

En 26 jours de confinement, je viens de finir un alphabet animé de 26 lettres, visible sur https://typotap.jenseign.com, le projet se situe entre patatap, le cédérom Alphabet et d’autres inspirations.
Décortication.

Trois ingrédients

Pour faire votre propre typotap, il vous faut :

  • Environ 26 SVG ;
  • 26 MP3 ;
  • 200 gr de JavaScript.

Les SVG

Pour les SVG, il est nécessaire de comprendre, le dessin en SVG via un logiciel de votre choix (Illustrator, Figma, InkScape, Affinity Designer), la balise <g> et les options de la balise <svg> pour certains cas (preserveAspectRatio).

Les MP3

Par défaut, les animations vont être créées avec une base temporelle en seconde, pour certains sons rythmiques, j’ai réglé les BPM à 120 ou 60 (astuce offerte).

Le JavaScript

On décompose les connaissances :

  • Détecter les événements du clavier — les touches pressées (niveau débutant) ;
  • Charger un SVG en JavaScript (pas débutant, mais facile à écrire avec un exemple) ;
  • Animer le SVG, on utilisera la librairie GSAP (niveau moyen) ;
  • Lire le MP3, on utilisera ToneJS (niveau débutant avec un exemple) ;
  • Retirer le SVG (une ligne :))

Récipient

L’ensemble des ingrédients sera mélangé dans votre navigateur, de préférence à jour et on monte le tout dans une page HTML, avec un peu de CSS.

En pratique

On commence par le clavier et le JavaScript.

See the Pen clavier by Benoît Wimart (@benoitwimart) on CodePen.

Puis pour le SVG, on va chercher le fichier (fetch) et si on le trouve (internet ok, le site ok, le fichier existe…), dès qu’il est totalement chargé, on l’insère dans l’élément « #play ».

Fetch permet de charger un fichier venant d’un autre site, mais pour des raisons de sécurité, les Blocage de requêtes multiorigines (Cross-Origin Request) sont courants (ici jenseign.com est bloqué sur codepen, mais pas « s3-us-west‑2.amazonaws.com/s.cdpn.io ».

See the Pen fetch svg by Benoît Wimart (@benoitwimart) on CodePen.

Les deux ensemble (en supposant que le svg est dans le même dossier) :

const play = document.querySlector('#play');
 
function load(letter){
  fetch(letter+'.svg') // concatenation, je charge a.svg ou b.svg … z.svg 
    .then(function(response){
      if(response.ok){
        response.text().then(function(svg){
          play.insertAdjacentHTML("beforeend", svg);
        });
      }
  });
}
 
document.addEventListener('keyup',function(e){
  load(e.key); // une fonction qui charge 
});
Attention, pas mal fonctionnalités JavaScript nécessitent un serveur pour marcher. Trois solutions, mettre en ligne, installer un serveur local ou utiliser l’extension live server de VS Code. Si votre adresse dans le navigateur commence par « file:/// », vous devez résoudre d’abord ce problème.

J’anime

Voici l’avant dernière étape, l’animation, il faut connaitre les fonctions, GSAP et l’overlap (la superposition) en CSS avec Grid.
L’ensemble est ici sur Repl.it.

C’est ici qu’il faut jongler entre la créatvité, le SVG, GSAP et le logiciel de musique (Audacity pour voir le timing).
const play = document.querySelector('#play');
 
function load(letter){
  fetch(letter+'.svg') // concatenation, je charge a.svg ou b.svg … z.svg 
    .then(function(response){
      if(response.ok){
        response.text().then(function(svg){
          // insertion professionnelle
          play.insertAdjacentHTML("beforeend", svg);
          // on ajoute un id avec la lettre et la date en ms
          // depuis 1970 pour le rendre unique
          // ex : r1586771234272 
          // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/now
          play.lastElementChild.id = letter + Date.now(); 
          // la fonction qui animera
          // je lui donne la lettre, l'élément et l'id
          anim(letter,play.lastElementChild,play.lastElementChild.id);
 
        });
      }
  });
}
 
document.addEventListener('keyup',function(e){
  load(e.key); // une fonction qui charge 
});
 
function anim(letter,el,id){
    // je récupère la letter, l'élément et l'id pour gsap et le switch 
    // voir la doc mdn sur le switch/case 
    switch(letter) {
      case 'r':
          // j'attache une timeline à l'élément
          el.tl_= gsap.timeline();
          // gsap to
          el.tl_.to('body',{backgroundColor:'#F90'});
          // '#'+id+' .r' sera '#r1586771234272 .r'
          el.tl_.to('#'+id+' .r',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          // on enchaine et efface l'élément quand l'animation est finie :) 
          el.tl_.call(function(){el.remove()});
      break;
 
      // avec les autres lettres
      /*
      case 's':
          el.tl_= gsap.timeline();
          el.tl_.to('body',{backgroundColor:'#000'});
          el.tl_.to('#'+id+' .s',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          el.tl_.call(function(){el.remove()});
      break;
      */
    }
}

Let’s the musique play

J’ajoute la librairie dans la page d’HTML.
Je connnais peu ToneJS, mais le sampler permet de charger nos sons et avoir une polyphonie.
Pour TypoTap, après chargement, j’ajoute l’écouteur d’événement du clavier.

Voici la demo sur repl.it

Le code JavaScript :

const play = document.querySelector('#play');
 
/* TONE JS */
const alphabet = new Tone.Sampler({
  "F3":"r.mp3", // , <- virgule
  "G3":"s.mp3" // on liste les sons ici
  }, // <- virgule
  function(){ 
    // quand les mp3 sont chargés, on ajoute l'écouteur de clavier
    // ce bout de code était plus bas
    document.addEventListener('keyup',function(e){
      load(e.key); // une fonction qui charge 
    });
  }
).toMaster(); // <- un truc de toneJS pour envoyer le son
 
function load(letter){
  fetch(letter+'.svg') // concatenation, je charge a.svg ou b.svg … z.svg 
    .then(function(response){
      if(response.ok){
        response.text().then(function(svg){
          // insertion professionnelle
          play.insertAdjacentHTML("beforeend", svg);
          // on ajoute un id avec la lettre et la date en ms
          // depuis 1970 pour le rendre unique
          // ex : r1586771234272 
          // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/now
          play.lastElementChild.id = letter + Date.now(); 
          // la fonction qui animera
          // je lui donne la lettre, l'élément et l'id
          anim(letter,play.lastElementChild,play.lastElementChild.id);
 
        });
      }
  });
}
 
 
 
function anim(letter,el,id){
    // je récupère la letter, l'élément et l'id pour gsap et le switch 
    // voir la doc mdn sur le switch/case 
    switch(letter) {
      case 'r':
          /* Tone JS en action */
          alphabet.triggerAttack("F3");
 
          // j'attache une timeline à l'élément
          el.tl_= gsap.timeline();
          // gsap to
          el.tl_.to('body',{backgroundColor:'#F90'});
          // '#'+id+' .r' sera '#r1586771234272 .r'
          el.tl_.to('#'+id+' .r',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          // on enchaine et efface l'élément quand l'animation est finie :) 
          el.tl_.call(function(){el.remove()});
      break;
 
      // avec les autres lettres
      /*
      case 's':
          el.tl_= gsap.timeline();
          el.tl_.to('body',{backgroundColor:'#000'});
          el.tl_.to('#'+id+' .s',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          el.tl_.call(function(){el.remove()});
      break;
      */
    }
}

benoit wimart, graphiste webdesigner

Mon portfolio

Je viens de finir le portfolio de mon agence, activité en freelance ; un exercice que je donne à mes étudiants chaque année.
Le site est codé à la main sans CMS avec les outils et langages étudiés en cours à l’exception du php et .htaccess pour optimiser quelques éléments.
L’interface utilise du JavaScript avec la librairie GSAP pour les interactions animées et SWUP pour les chargements.
La page d’accueil propose une variation sans cercle et une version petit smartphone en responsive.

jaiunsite.com, © benoit wimart, création site web, graphisme, interface

Les pages de présentations sont très simples et se chargent rapidement.

site web modulo font © benoit wimart

Remplir avec du texte

Petite exercice pour remplir « sans dépasser » de lettres au hasard un bloc html.

L’idée est de remplir chaque ligne de lettre en chasse fixe (monospace) et d’ajouter un retour à la ligne pour avoir un bloc plein.
Attention : ce code est pour le fun et n’est pas parfait (certains caractères ne passent pas et la preview du codepen ne marche pas).

Le code est aussi commenté dans CodePen.

/* Ajouter GSAP*/
 
var fill  = document.querySelector('.fill'); // je cible la première div.fill
var wl; // largeur d'une lettre 
var hl; // hauteur
var w; // largeur de la fenêtre
var h; // hauteur
 
/* fonction de lettre random via gsap */
// https://greensock.com/docs/v3/GSAP/UtilityMethods/random
var randomLetter = gsap.utils.random('-abcdeABCDEF+*,#_!:\.?/='.split(''),true);
 
/*
étape 1 : prendre les dimensions
*/
function ini(){
  w = window.innerWidth; // largeur de la fenetre 
  h = window.innerHeight; // hauteur
  fill.style.display = 'inline-block'; // par défaut display block prend toute la largeur; 
  // inline-block prend juste la largeur du texte 
  fill.innerHTML = '0123456789'; // j'ajoute 10 glyphs 
  wl = fill.clientWidth/10; // je divise par 10 pour avoir la taille d'un glyph
  fill.innerHTML = '0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9'; // idem en hauteur
  hl = fill.clientHeight/10; // ok
  fill.style.display = 'block'; // je remets 
  console.log(w,h,wl,hl)
  fill.innerHTML = ''; // je vide
}
 
ini(); // je lance la fonction ini
 
/*
étape 2 : on remplit
un peu de math
Si j'ai 13 px et des lettres de 4 px, je peux en mettre 3.
13/4 = 3,25, on supprime le reste après la virgule -> 3.
Math.floor(3.25) = 3 
*/
 
function fillit(){
  let maxX = Math.floor(w/wl); // nombre max en x
  let maxY = Math.floor(h/hl); // nombre max en y
  let innerhtml = ''; // variable temporaire qui contient le texte
 
  /* boucle dans une boucle */
  for(let y=0;y<maxY;y++){ 
    for(let x=0;x<maxX;x++){
      innerhtml+=randomLetter(); // truc de gsap
    }
    innerhtml+='<br>'; // on passe à ligne
  }
  fill.innerHTML = innerhtml; // on remplit l'élement html avec innerhtml
}
 
fillit(); // je lance …
 
/* bonus */
window.addEventListener('resize',function(){
  ini();
  fillit();
})

See the Pen remplir avec du texte by Benoît Wimart (@benoitwimart) on CodePen.