Omagad, il y en a tellement ... Ça devient impossible de faire la sécu d'une appli soi même... trop complexe.

Aujourd'hui, je vous passe un petit bout de code que j'ai fait autant par défi personnel qu'avec l'objectif de l'autonomie pédagogique

J'ai pas les mots

Une petit appli qui génère une grille de mots-mélés à partir du titre et de la liste de mots: on peut l'utiliser via la GUI minimale...

... ou en «API» avec les arguments GET suivants:

• title: le titre (opt.)
• mots : les mots séparés par une virgule
• size : la taille de la grille
• list : la liste de mots à trouver (ou n'importe quelle autre consigne)
• download: télécharger l'appli pour auto hébergement (télécharger )

Et ça fait des chocapics

ça donne ça :

Omagad, c'te mine d'or...

• https://devhints.io/ pour des cheatsheets
• https://learnxinyminutes.com/ pour des rappels en une page de l'essentiel d'un langage J'ai appris qu'en Go il y a un type de variable complex128 qui permet un truc du genre c := 3 + 4i ... voilà qui serait pratique en python au lycée de ma fille [blague personnelle]
• https://htaccess.madewithlove.be/ pour tester des htaccess
• https://squoosh.app/ pour compresser les images
• https://www.photopea.com/ pour la retouche d'images vite fait quand t'es pas à la maison
• https://carbon.now.sh/ pour faire des images esthétiques de ton code (même si je ne saisis pas bien le concept d'une capture d'écran pour du code...)
• https://devdocs.io/ : connu mais toujours bon à rappeler
• https://devtools.best/ Base Converter,Base64 Encoder/Decoder, Emoji Picker Tool, HTML Entities Encoder/Decoder, Json Prettier, Lorem Ipsum, Text Comparison Tool, Text Effects tool, Text Hash Generator, Text Statistics, UUID Generator, Url Encoder/Decoder

Wow... la propriété CSS Fliter, qui permet d'appliquer des filtres sur un élément (blur, grayscale etc) permet apparemment l'utilisation de filtres SVG inline... le truc de fou.

C'est tricky, pas élégant, un peu sale mais apparemment assez puissant puisqu'on peut même appliquer des filtres de déformation...

img {
  filter: url('data:image/svg+xml,
    <svg xmlns="http://www.w3.org/2000/svg">
      <filter id="waves" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
        <feTurbulence type="turbulence" baseFrequency="0.01 0.01" numOctaves="1" seed="1" stitchTiles="noStitch" result="turbulence" />
        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" xChannelSelector="G" yChannelSelector="A" result="displacementMap" />
      </filter>
    </svg>#waves')
  ;
}

Donner un style NES à un site ou une appli web ? Voilà une feuille de style toute prête...

Bon, on ne m'enlèvera pas de la tête que c'est pas super intuitif, ni super simple, mais bon, je n'ai trouvé que ça qui fonctionne...

Mon souci

1. Je crée une image côté navigateur avec canvas
2. je veux l'envoyer à mon serveur pour stockage

On pourrait croire que c'est simple, hein... ben j'ai pas trouvé, personnellement.

J'ai essayé

1. de transformer le canvas en blob et de l'envoyer via un formdata
2. de transformer le canvas en blob et de l'envoyer comme un objet simple
3. de transformer le canvas en DataURL et de l'envoyer via un formdata
4. de transformer le canvas en DataURL et de l'envoyer comme un objet simple

Mais à chaque fois, j'ai pas été foutu de récupérer les données côté PHP (bon, je me doute qu'il doit y avoir un pacson de trucs que j'ignore encore, hein...)

Ensuite, j'ai pensé

«et si je passais les données au format base64, je devrais pouvoir les récupérer facilement...» car je pratique couramment un optimisme ridicule au sujet duquel il m'arrive encore de sombrer dans la stupéfaction à grand fracas...

Dont acte: je recommence à farfouiller avec des fetch, des posts pis tout mais sans succès: les données décodées font une image invalide.

en désespoir de cause

Je décide de procéder moins élégamment: je copie les données vers un formulaire caché que je poste en target blank pour pas perdre ma page de travail... Oui, je sais, c'est sale, c'est moche, c'est pas secure, j'en ai conscience, c'est pas la peine de m'enfoncer, j'ai déjà assez honte comme ça...

Je reçois bien de la base 64, je décode... Et l'image n'est toujours pas valide. Puis une recherche m'apprend qu'il faut virer l'en-tête base64 côté serveur avant de décoder pour que ça fonctionne...

Je teste et... ça marche.

SUPER INTUITIF MERCI

Un excellent article, très simple d'accès. Résumé pour mémoire mais je vous conseille d'aller lire le tout tant c'est clair et bien documenté:

1.Tout typer

... pour pouvoir compter sur le type des données

• Les paramètres des fonctions function moncul(string $str) pour éviter de vérifier les paramètres puisqu'un type erroné provoquera une erreur
• Les valeurs de retour des fonctions function moncul(string $str): int car en cas de retour d'un autre type, il y aura erreur. (pour les fonctions ne retournant rien, :void )
• Les propriétés de classe : private int $mon_cul; pour qu'une erreur se déclenche en cas d'initialisation d'un type erroné.

2.Protéger ses classes par défaut

• ajouter «final» à la déclaration de classe final class monCul(){ pour éviter tout héritage, même fortuit.
• laisser ses propriétés en private par défaut
• laisser ses méthodes en private par défaut jusqu'à ce qu'on ait besoin de les appeler de l'extérieur

3.Utiliser les comparaisons strictes

... pour éviter les confusions false/0 etc

4.Se passer des «if»

En utilisant l'opérateur ternaire condition ? valeur retournée si true : valeur retournée si false;

Pourquoi ? Parce que c'est plus court mais aussi parce qu'on peut placer la condition directement dans une assignation ou à la place d'un paramètre: $count += ($value === CONTROL_VALUE) ? 1 : 0;

Par contre, je trouve qu'on y perd BEAUCOUP en lisibilité et en organisation.

5.La fonction « sscanf »

Pour analyser une chaîne selon un format (et à la place d'un explode plus lourd). C'est l'inverse de printf(). ( https://www.php.net/manual/fr/function.sscanf.php )

6.L'inversion de valeurs en une ligne

et avec autant de valeurs qu'on veut

[$var1, $var2, $var3, $var4] = [$var4, $var3, $var2, $var1];

7. L’opérateur de décomposition « … »

$intersection = array_intersect(...$bigArray); au lieu de $intersection = array_intersect($bigArray[0], $bigArray[1], $bigArray[2]); // Etc.

8. Toujours ajouter un compteur de boucle pour sortir des while

Ça m'a rappelé un épisode de BigBang Theory dans lequel Sheldon est prisonnier d'une boucle dans son algorithme HowToMakeANewFriend... (c'est Howard qui l'en sort en implémentant un compteur comme condition de sortie).

$block++;
    if ($block > 1000) {
        break;
    }

9.Utiliser les fonctions liées aux tableaux

Je plussoie vigoureusement ce point particulier

Avant de se lancer dans un traitement de tableau en créant une fonction ou une méthode exprès, relisez la doc de toutes les fonctions commençant par Array_ ... histoire de ne pas réinventer la roue.

10.Manipuler les tableaux avec les callbacks et les Collections

Pour manipuler un tableau, penser à utiliser array_map plutôt que foreach si c'est possible:

• utilisation simple array_map('trim',$tableau)
• fonction anonyme ```array_map(function($k){ code de traitement },$tableau);
• avec une méthode array_map(array($instance, 'methode'), $tableau)

Intéressant et astucieux

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.first-day {
  grid-column-start: 3;
}

<div class="calendar-wrapper">
  <h1>Decemeber</h1>
  <ul class="calendar">
    <li class="weekday">Sun</li>
    <li class="weekday">Mon</li>
    <li class="weekday">Tue</li>
    <li class="weekday">Wed</li>
    <li class="weekday">Thu</li>
    <li class="weekday">Fri</li>
    <li class="weekday">Sat</li>

    <li class="first-day">1</li>
    <li>2</li>
    <li>3</li>
    <!-- ... -->
    <li>29</li>
    <li>30</li>
    <li>31</li>
  </ul>
</div>

Entre les navigateurs «legacy» qui veulent au max du 32x32, les apple qui demandent du 180x180 (c'est quoi ce format perso de merde à la apple), les webapps android qui réclament du 192x192 et du 512x512, les windows Tile, les Safari pinned (sans compter les trucs expérimentaux) et le fait que l'ensemble doit être déclinable en dark-mode ou bright-mode, ça en fait des icônes...

Genre, on se retrouve à charger plus lourd en favicon qu'en contenu pertinent et utile... tout ça pour afficher une icône dans l'onglet du navigateur ! Une trentaine d'icône pour être sûr que l'image elle sera zoulie partout... (on se croirait revenu au temps de la rétrocompatibilité IE6-8). Heureusement que l'auteur nous annonce que les favicons sont chargées en background par le navigateur et n'affectent pas l'expérience utilisateur...

On est en 2020 les mecs

Genre, vous pourriez utiliser globalement le svg pour avoir un rendu joli quelle que soit la taille et c'est marre. Alors je sais, on a - globalement - des connexions de fifous qui s'accommodent de cette surcharge, mais:

1. justement, pas tous: beaucoup n'ont pas des connexions de privilégiés; la campagne, les zones blanches, les pays en voie de développement etc... C'est pas cool de leur imposer des surcharges.
2. ça me rappelle les développeurs qui tablent sur le perfectionnement technologique des machines pour pas s'emmerder à optimiser leurs bouzins en se disant que ça tourne sur leur bécane à 4000 boules.
3. c'est du loose-loose: les devs s'emmerdent avec des brouettées d'icônes aux formats les plus strange qui soient et les utilisateurs se font bouffer le forfait 2€ free juste pour charger l'icône du site... Le jeu n'en vaut pas la chandelle: il y a sans doute de meilleurs emplois du temps de dev et de la bande passante.

Heureusement

...l'auteur propose de limiter à 5 le nombre d'icônes (avec un fichier manifest)... c'est déjà ça.

Je viens de mettre à jour Iconeleon:

1. le téléchargement est désormais un zip contenant les icônes et plus simplement le fichier du script

2. j'ai changé la maquette (un peu) : dark mode

3. j'ai ajouté les packs de svg de Typicons, Iconic, Zocial et Elusive

4. petit bug: certaines parties de quelques icônes semblent rester noires si on change leur couleur, je me pencherai dessus

Alors là, on est clairement dans le code du dimanche, et vous allez voir pourquoi...

J'avais envie de faire un outil de visualisation de données facile d'accès et simple, comme un microservice que je pourrais utiliser par la suite dans une de mes applis...

Comme toujours, avant même de voir si ça existerait pas déjà, je me demande comment faire le truc moi-même et ce que je vais pouvoir apprendre avec...
C'est alors que je me dis que le SVG ce serait bien:

• redimensionnable
• léger
• universel
• je ne connais pas la génération de SVG en PHP : youpi

Je me lance...

et j'arrive à des résultats pas trop dégueus mais tout se corse (chef-lieu Ajaccio) quand je dois placer le texte (nombres, noms de colonnes etc)

C'est emmerdant à center, c'est emmerdant à redimensionner: bref c'est emmerdant. Pour résumer.

J'en ai tellement chié pour un résultat tellement pas terrible que, d'un coup, je me suis rappelé que mon copain JerryWham avait fait une lib juste pour ça !

phpGraph

Une lib qui permet de transformer des données en graphique au format SVG directement, avec des options de configuration et des rendus différents (ligne, barres, camemberts etc), ça vous tente ? Ben c'est par là :

• https://www.ecyseo.net/article29/phpgraph-afficher-des-graphiques-svg-grace-a-php
• http://jerrywham.github.io/phpGraph/

Comme le plus dur est fait (et VRAIMENT bien fait)

Je me suis contenté de faire un script qui permet de passer des données et la config à la lib via $_GET

• data: des données au format json [123,234,345,...] ou {"cle":valeur...}
• w,h: largeur et hauteur (opt.)
• color: couleur du graph au format FFFFFF (opt.)
• lines/filled:graphique en ligne ou en lignes remplies (par défaut, le graph est en barres)
• steps: le pas des graduations en ordonnée (calculé par défaut en fonction du maximum)
• title: le titre du graph (opt.)
• hidekeys: pour cacher les clés en pied de graph

Et ça donne quoi ?

Données d'un tableau séquentiel

Les clés ne sont donc pas affichées.

api.warriordudimanche.net/grafit/?data=[123,321,51,656,89,54,67,56]

Le même avec un graph de surface

api.warriordudimanche.net/grafit/?data=[123,321,51,656,89,54,67,56]&filled

Avec des données de tableau associatif

Par exemple des données générées par GenContent

api.warriordudimanche.net/grafit/?color=FF0000&data={"01/08/18":"2822","28/11/19":"5320","01/05/16":"3856","03/04/19":"5087","25/10/14":"7137","27/12/17":"6365","08/11/15":"6616","01/05/17":"1341","01/08/14":"2742","05/07/20":"4697"}

https://api.warriordudimanche.net/grafit/?color=FF0000&lines&hidekeys=&data={"23/02/11":"9391","18/09/15":"5098","07/10/12":"8553","04/06/12":"3349","09/07/13":"1260","31/07/17":"1311","10/05/14":"2039","01/12/17":"273","19/08/14":"4641","04/07/11":"3806","24/11/12":"9094","20/10/19":"4837","14/02/11":"9425","24/06/17":"5971","09/08/15":"4326","18/07/15":"71","06/10/16":"1706","02/08/14":"9249","01/07/18":"3612","22/10/11":"375","27/04/17":"3596","04/11/15":"3732","21/03/13":"407","18/07/16":"2180","16/04/14":"9401","22/12/11":"3474","10/07/15":"4725","07/12/11":"2081","10/10/14":"3216","12/03/16":"3654"}[/center]

Attention !

Ce n'est pas pour visualiser des données épiques, multidimensionnelles ou vraiment très nombreuses (les clés se chevauchent s'il y a trop de données et on peut les masquer en ajoutant hidekeys en paramètre.)

Ce sera sans doute appelé à évoluer mais bon, je me suis bien amusé et j'ai touché du doigt que faire du SVG, ça se fait pas entre deux portes au doigt mouillé...

Amusant mais un peu tricky: encapsuler du HTML+CSS dans un SVG...

Rigolo : comment mettre du texte dans les rebords d'un cadre ? Genre comme ça:

En utilisant des fieldsets et leur legend...

<fieldset><legend>Wash Your Hands</legend></fieldset>
<fieldset><legend>Stay Apart</legend></fieldset>
<fieldset><legend>Wear A Mask</legend></fieldset>
<fieldset><legend>Stay Home</legend></fieldset>


body{
  display: grid; 
  margin: auto; 
  margin-top: calc(50vh - 170px); 
  width: 300px; height: 300px; 
}
fieldset{
  border: 10px solid transparent; 
  border-top-color: black; 
  box-sizing: border-box; 
  grid-area: 1 / 1; 
  padding: 20px; 
  width: inherit; 
}
fieldset:nth-of-type(1){ 
  background: content-box center/contain no-repeat url("photo-1588852065463-5de1411ea697?w=400"); 
}
fieldset:nth-of-type(2){ transform: rotate(90deg); }
fieldset:nth-of-type(3){ transform: rotate(180deg); }
fieldset:nth-of-type(4){ transform: rotate(-90deg); }
legend{
  font: 15pt/0 'Averia Serif Libre'; 
  margin: auto; 
  padding: 0 4px; 
} 
fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); } 

body {
  user-select: none;
  -webkit-user-select: none;
}

OUATE ?!

Le design Masonry est chiant à faire sans se lancer dans des hacks à la con ou des bouts de JS (surtout pour l'aspect vertical + horizontal)

J'apprends qu'il y a une propriété de grid-template-rows pour ça ?

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

Vous allez voir qu'une fois bien implantée, le design masonry deviendra hasbeen... comme à la grande époque des bords ronds à base de multiplication de divs ou des ombres à base de png tout pétés: quand on a eu border-radius et box-shadow, la mode est passée au flat design...

@SebSauvage Quand la destinée se mêle d'une conversation sur les polices de caractères dans laquelle on aborde le choix de police pour les blocs de code: tu t'aperçois que css-tricks a fait une showcase pour les polices dev...

c'est beau, le destin !