Un sticker pour les codeurs !
Trop beau ! Je vais m'en faire un ! [EDIT]
Trop beau ! Je vais m'en faire un ! [EDIT]
Tiens, pas con: une regex qui sélectionne tous les caractères imprimables de la table ascii [ -~]
(de 32-125)
Très intéressant ça ! Riditléteur... Merci Seb ! (et bonne année ! )
Superbe, simple, ergonomique...
OMAGAD ! je ne connaissais pas, faut que je regarde ! Merci copain !
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>
Un web component tout prêt fait par Grafikart qui remplace le input file par une dropzone plus élaborée. Ça a l'air bien foutu, je me le mets de côté.
Je ne connaissais pas l'astuce (alors que ça m'a fait chmir aussi!)
Il faut ajouter \u000A.
C'est pourtant très intuitif.
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.
L'appli à l'origine de celle du geektionnerd
Je jetterai un oeil dessus, ne serait-ce que pour ragaboom qui sert à manipuler canvas...
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
echo "Ma variable : $kiwis";
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:
Du coup Par conséquent, la requête suivante:
index.php?str=Bronco&sz=128&c1=ff0000&c2=00ff00
donnera
et
index.php?str=Bronco
donnera
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.
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:
$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
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 )
Pas mal ça: un site sur les API disponibles dans les navigateurs. Très bien foutu.
par exemple, page visibility:
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`
Des points d'arrêts lors d'un défilement
On connaissait déjà, mais bon, c'est chouette quand même \o/
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 */
}
}