paulirish/lite-youtube-embed: A faster youtube embed.

Un web component destiné à embed une vidéo youtube plus efficacement et de façon plus légère que l'iframe bourré de merdes auquel on a droit. Il semble de plus optimisé et l'auteur annonce des gains de perf de l'ordre de 224x... à tester.

En tout cas, ça n'a pas l'air dur à utiliser: on link les css/le webcomponente et on utilise la nouvelle balise <lite-youtube videoid="ogfYd705cRs"></lite-youtube>

Plugin pluxml: reposter vers mastodon directement.

icone
Si ça intéresse quelqu'un, voici un plugin dont le but est de reposter automatiquement les billets de pluxml vers un compte mastodon.

pluxml2mastodon utilise le chapô ou le contenu (si le chapô est vide) comme corps de message en le retaillant si nécessaire.

Dans les options, il faudra compléter l'url de votre instance et le jeton de sécurité; vous pouvez également ajouter un message d'en-tête et de pied, si vous le souhaitez.

(...)

Astuce : Les template strings en JavaScript

L'usage de base consiste à imbriquer des variables dans les chaînes, entre ${ et }. Elles se verront "remplacées" par leur valeur au moment de l'exécution.



var kiwis = 3;
const message = `J'ai ${kiwis} kiwis dans mon panier`;
// Résultat : J'ai 3 kiwis dans mon panier


On retrouve ici le même concept qu'en PHP avec les chaînes de texte entre guillemets doubles qui interprètent les variables :

echo "Ma variable : $kiwis";


RoR - un générateur d'avatars auto-hébergeable en un script

Bon, j'ai un peu tout dit dans le titre... Toutefois, je peux préciser que ce script permet de générer un avatar à partir d'une chaîne de caractères (genre un pseudo, quoi )

Le script utilise les variables $_GET suivantes:

  • str : la chaîne de caractères (obligatoire)
  • sz : la taille souhaitée (par défaut:128)
  • c1 : couleur d'avatar (optionnel, par défaut le script déterminera une couleur en fonction de la chaîne)
  • c2 : pareil que c1 mais pour la couleur de fond.

Du coup Par conséquent, la requête suivante:

index.php?str=Bronco&sz=128&c1=ff0000&c2=00ff00

donnera

avatar généré

et

index.php?str=Bronco

donnera

avatar généré

A noter que lorsque l'avatar est généré, il est sauvegardé dans un dossier avatars/ afin d'éviter de le régénérer à chaque demande.

«Mais comment t'as fait ?» allez-vous me demander d'un ton péremptoire autant que fébrile
Non,non... on s'en fout... en fait.
🗦
PAN
🗦

Donc, le premier problème était d'avoir une pattern pour chaque lettre sur une grille qui ne soit pas trop étendue. Après avoir réfléchi un bon moment, je me suis frappé le front en me disant que la pattern était toute trouvée: l'ordre en binaire de la lettre à encoder...

Second problème, le nombre de lettres et de caractères potentiels m'obligeaient à avoir une grille trop grande (minuscules/majuscules/nombres -> 62 caractères !) 62 en binaire 111110, soient 6 cases x2 pour la symétrie, on se retrouve avec une matrice de 12 x 12... trop à mon goût.

Troisième problème, la taille variable des chaînes potentiellement fournies par l'utilisateur. Il faudrait normaliser ces chaînes avant traitement... pfff.

Illumination: le hash d'une chaîne est toujours de la même longueur... et hash('crc32','blabla'); donne toujours une chaîne de 8 caractères hexadécimaux \o/ : tous les problèmes sont résolus:

  • encodage de 16 caractères (0 à F) : 0000 à 1111.
  • chaîne de longueur fixe quelle que soit les données fournies
    $h1=hash('crc32',$_GET['str']); # pour la génération du dessin et de la couleur 1
    $h2=hash('crc32b',$_GET['str']);#pour la génération de la couleur 2

Il ne reste plus qu'à tracer des carrés de la couleur d'avatar à l'emplacement des 1 et de la couleur de fond à la place des 0.

function drawLine($linenb,$pattern,$size){
    global $image,$couleur_avatar,$couleur_fond;
    for ($i=0;$i<9;$i++){
        $x=$i*$size;
        $y=$linenb*$size;
        if ($pattern[$i]==1){
            imagefilledrectangle ( $image , $x,$y  , $x+$size ,$y+$size , $couleur_avatar );
        }else{
            imagefilledrectangle ( $image , $x,$y  , $x+$size ,$y+$size ,$couleur_fond);
        }
    }
}

Le reste est relativement simple à saisir, je vous mets donc le script complet

<?php 
########################
#                      #
# █████   ████   █████  #
# ██  ██ ██  ██ ██  ██ #
# ██  ██ ██  ██ ██  ██ #
# █████  ██  ██  █████  #
# ██  ██ ██  ██ ██  ██ #
# ██  ██ ██  ██ ██  ██ #
# ██  ██  ████  ██  ██ #
#                      #
########################
# Ror: avatar generator
# @author: bronco@warriordudimanche.net
# howto: use get vars to generate an avatar (once generated, it'll be saved in avatars/ folder)
# ?str=[string] (required)
# ?sz= [integer] avatar's size (opt.) 
# ?c1= [string] avatar's color (opt.)
# ?c2= [string] avatar's background color (opt.)

###############################
#                             #
#  ░░░░  ░   ░░  ░░░░  ░░░░░░ #
#   ░░   ░░  ░░   ░░   ░ ░░ ░ #
#   ░░   ░░░ ░░   ░░     ░░   #
#   ░░   ░░░░░░   ░░     ░░   #
#   ░░   ░░ ░░░   ░░     ░░   #
#   ░░   ░░  ░░   ░░     ░░   #
#  ░░░░  ░░   ░  ░░░░   ░░░░  #
#                             #
###############################

if (!is_dir('avatars')){
    mkdir('avatars');
}
$avatar_filename='';

if (!empty($_GET['c1'])){
    $c1=strip_tags($_GET['c1']);
    $avatar_filename.='-c1='.$c1;
    $c1=separatRGB($c1);
}
if (!empty($_GET['c2'])){
    $c2=strip_tags($_GET['c2']);
    $avatar_filename.='-c2='.$c2;
    $c2=separatRGB($c2);
}
if (!empty($_GET['sz'])){
    $size=intval(strip_tags($_GET['sz']));
}
if (empty($size)){$size=128;}
$avatar_filename='x'.$size.$avatar_filename.'.png';
$dotsize=$size/9;


##################################################################
#                                                                #
# ░░░░░░ ░░  ░░ ░   ░░  ░░░░  ░░░░░░  ░░░░   ░░░░  ░   ░░  ░░░░  #
# ░░     ░░  ░░ ░░  ░░ ░░  ░░ ░ ░░ ░   ░░   ░░  ░░ ░░  ░░ ░░  ░░ #
# ░░     ░░  ░░ ░░░ ░░ ░░       ░░     ░░   ░░  ░░ ░░░ ░░  ░░    #
# ░░░░░  ░░  ░░ ░░░░░░ ░░       ░░     ░░   ░░  ░░ ░░░░░░   ░░   #
# ░░     ░░  ░░ ░░ ░░░ ░░       ░░     ░░   ░░  ░░ ░░ ░░░    ░░  #
# ░░     ░░  ░░ ░░  ░░ ░░  ░░   ░░     ░░   ░░  ░░ ░░  ░░ ░░  ░░ #
# ░░      ░░░░  ░░   ░  ░░░░   ░░░░   ░░░░   ░░░░  ░░   ░  ░░░░  #
#                                                                #
##################################################################

function separatRGB($color){
    $color=str_replace('#','',$color);
    if (strlen($color)==3){
        $color=$color[0].$color[0].$color[1].$color[1].$color[2].$color[2];
    }
    $RGB=array();
    $RGB['r']=hexdec(substr($color, 0,2));
    $RGB['g']=hexdec(substr($color, 2,2));
    $RGB['b']=hexdec(substr($color, 4,2));  
    return $RGB;
}

function drawLine($linenb,$pattern,$size){
    global $image,$couleur_avatar,$couleur_fond;
    for ($i=0;$i<9;$i++){
        $x=$i*$size;
        $y=$linenb*$size;
        if ($pattern[$i]==1){
            imagefilledrectangle ( $image , $x,$y  , $x+$size ,$y+$size , $couleur_avatar );
        }else{
            imagefilledrectangle ( $image , $x,$y  , $x+$size ,$y+$size ,$couleur_fond);
        }
    }
}



###########################################################
#                                                         #
#  ░░░░  ░░░░░░ ░   ░░ ░░░░░░ ░░░░░   ░░░░  ░░░░░░ ░░░░░░ #
# ░░  ░░ ░░     ░░  ░░ ░░     ░░  ░░ ░░  ░░ ░ ░░ ░ ░░     #
# ░░     ░░     ░░░ ░░ ░░     ░░  ░░ ░░  ░░   ░░   ░░     #
# ░░ ░░░ ░░░░░  ░░░░░░ ░░░░░  ░░░░░  ░░░░░░   ░░   ░░░░░  #
# ░░  ░░ ░░     ░░ ░░░ ░░     ░░  ░░ ░░  ░░   ░░   ░░     #
# ░░  ░░ ░░     ░░  ░░ ░░     ░░  ░░ ░░  ░░   ░░   ░░     #
#  ░░░░  ░░░░░░ ░░   ░ ░░░░░░ ░░  ░░ ░░  ░░  ░░░░  ░░░░░░ #
#                                                         #
###########################################################
if (!empty($_GET['str'])){
    $h1=hash('crc32',$_GET['str']);
    $h2=hash('crc32b',$_GET['str']);

    if (empty($c1)){$c1 = separatRGB($h1);}
    if (empty($c2)){$c2 = separatRGB($h2);}

    $s=$h1.$h2[0];
    $file='avatars/'.$s.$avatar_filename;
    if (is_file($file)){
        header ("Content-type: image/png");
        exit(file_get_contents($file));

    }

    $image = @ImageCreate ($size, $size) or die ("Erreur lors de la création de l'image");
    $couleur_fond   = ImageColorAllocate ($image, $c1['r'], $c1['g'], $c1['b']);
    $couleur_avatar = ImageColorAllocate ($image, $c2['r'], $c2['g'], $c2['b']);

    $a[dechex(0)]='000010000';
    $a[dechex(16)]='111111111';

    for ($i=1;$i<=15;$i++){
        $bin=decbin($i);
        $bin=str_repeat('0', 4-strlen($bin)).$bin;
        $a[dechex($i)]=$bin.'1'.strrev($bin);
    }



    for ($i=0;$i<9;$i++){
        drawLine($i,$a[$s[$i]],$dotsize);
    }

    header ("Content-type: image/png");

    ImagePng($image,$file);
    chmod($file,0644);
    ImagePng($image);
}


?>

Le script est téléchargeable ici

(...)

C'est con, j'ai ri 4

Pour celles et ceux qui en ont marre de leur semaine, de la météo, de la politique, des affaires, des gens qui tuent leurs conjoints alors qu'ils faisaient genre «chuis trop inquiet sur la vie de ma reum», du code du travail, des inondations, qu'on leur parle de la Seine ou des nichons de la famille Kardachiants, voici un Dump du Dredi: attention, c'est con (mais j'ai ri )

(...)

What Web Can Do Today

Pas mal ça: un site sur les API disponibles dans les navigateurs. Très bien foutu.

par exemple, page visibility:

  • document.hidden: Returns true if the page is currently hidden.
  • document.visibilityState: Returns current visibility state: visible, hidden, prerender or unloaded.
  • document.addEventListener('visibilitychange')

    sympa !
    Via Korben


5 exciting new HTML and CSS features to look forward to in 2018

Les nouveautés du HTML 5.2...

Native Dialog element

Un élément pour faire des dialogbox facilement

<dialog>  
  <h2>Your title</h2>
  <p>Your content...</p>
</dialog>

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close('cancelled');
  }
});

modal.close('Accepted');

console.log(modal.returnValue); // logs `Accepted`

CSS scroll snap points

Des points d'arrêts lors d'un défilement

CSS Variables

On connaissait déjà, mais bon, c'est chouette quand même \o/

Support queries

Créer des règles css en fonction de leur support sur le navigateur

@supports (mix-blend-mode: overlay) {
  .example {
    mix-blend-mode: overlay;
  }
}

@supports not(mix-blend-mode: overlay) {
  .example {
    /* alternative styles here */
  }
}

“Stop Using CSS Selectors for Non-CSS”

Une réflexion intéressante que je garderai en mémoire: ne réserver les classes css que pour styler, pas pour cibler en js.
Donc en résumé, au lieu de


<article class="article"><br />
</article><br />
<br />
et <br />
<br />
$(".article") <br />
```<br />
<br />
Préférer:<br />
<br />
```<br />
<article class="article" data-hoverable><br />
</article><br />
<br />
et <br />
<br />
$("[data-hoverable]")<br />
```<br />
<br />
On sépare ainsi les classes (styling) des attributs data-* (scripting js)<br />
<br />
<br/><br/><div class="img_source"><a href="https://www.inetsolutions.org/wp-content/uploads/2016/03/JavaScript-And-CSS-Includes-Do-Overload-Googles-Fetch-And-Mobile-Testing-Tools-1030x644.jpg">Source image</a></div>

Bozon: mais non ce n'est pas mort...

Voilà un moment que je ne donne aucune nouvelle de Bozon. Le projet n'est pas mort mais après un an à récrire le code, JerryWham a attiré mon attention sur le fait que l'ensemble devait être amélioré et optimisé: malheureusement, après moultes tentatives en ce sens (de nous deux, on a pas mal bossé), il s'avère qu'une restructuration est encore nécessaire.

C'est donc à cette tâche que je m'attelle en ce moment: restructurer afin de respecter certaines règles de programmation, quitte à me racler la soupière encore un moment

Du coup, je suis en train de déplacer et récrire des portions de code pour rendre le tout plus élégant et efficient afin de produire une version de travail commune pour coder à quatre mains.

En plus, comme le mentionne Cyrille, c'est pas mon temps libre qui me permet d'avancer...

«Faire et défaire, c'est apprendre à travailler» Proverbe familial

(...)

Fil RSS des articles