Un pour l'argent, 2 pour le spectacle et 3 pour le caillou
Pour le fun, j’ai eu besoin de télécharger des pages web et toutes les ressources associées, comme on le ferait via un navigateur desktop.
WGET n’en finira pas de m’étonner… il suffit alors de l’appeler via PHP.
<?php $url = 'site.web'; $cmd = "wget -nd -p --convert-links -P downloads/siteweb\"$url\" "; exec($cmd); ?>
Petit « one day build » du 15 août, la décoration d’un coffre en bois inspiration Kokeshi. Il représentera nos deux « princesses » sous la forme de ces petites poupées japonaises et servira pour leur linge.
Après un rapide tour des différentes formes de kokeshi sur internet, j’ai décidé de m’inspirer des Kimmidoll Junior.
Un petit coup de Photoshop pour détourer les kokeshis, histoire de leur faire les essayages, et c’est déjà l’heure de la séance de validation, menée par Princesse N°1. Le livrable respecte le brief initial : « une rose avec des cheveux violets et une violet avec des cheveux rose », feu vert pour l’étape pochoir.
Une version filaire du dessin est alors imprimée sur un papier cartonné, puis découpé au scalpel pour créer des pochoirs. Le contour est ensuite reporté sur le coffre au crayon pour valider l’emplacement des motifs et leur taille.
Pour la peinture, j’ai utilisé de l’acrylique sur base d’eau. Elle sèche rapidement, elle est couvrante et se nettoie à l’eau en cas de dérapage. Elle permet également à Princesse N°1 de mettre la main à la pâte.
Pour le reste, rien que du classique, un couteau, une palette et des pinceaux en poils de slip de hibou d’Alaska. Ah, si! Un sceau de patience pour accompagner Princesse N°1 dans le « peinturage » des poupées.
Une fois les couleurs de fond posées, j’ai ajouté quelques ombres.
Le temps d’une négo client pour les motifs, fleur et coeur sont retenus comme forme de base pour les motifs des vêtements des kokeshis. Réalisés au pochoir, ils seront agrémentés de paillettes argentées.
L’étape des paillettes ayant légèrement débordé, les motifs ont été agrémentés de foultitude de détails réalisés au stylo à peinture.
Un dernier raccord maquillage pour les joues qui ne me convenaient pas et voilà le résultat final:
Un petit coup de vernis pour tenir le choc face à la dure vie qui l’attends et et sera prêt pour le service.
Quand le hasard est trop prévisible, un petit coup de shuffle pour épauler random().
Dans la vie, le hasard fait plus ou moins bien les choses. En informatique, c’est un peu plus tordu : au delà d’un certain nombre d’itérations, le hasard rencontre la statistique.
Si vous devez piocher au hasard des valeurs dans un tableau, l’algorithme tape au milieu la plupart du temps et touche rarement les bords (elle est pour toi Chriis).
Pour philosopher plus loin sur le sujet, je conseille vivement d’aller se cultiver un petit quart d’heure sur « La puissance organisatrice du hasard » de l’excellent Mickaël Launay :
Je ne ferai pas ici la liste des différents algorithmes permettant de tirer « mieux » une valeur au hasard, chacun y va de sa méthode (utiliser le timestamp, piocher un pixel dans une image, parser le md5 de la dernière vidéo postée sur Youporn, …). Je ne me lancerai pas non plus dans un comparatif des ressources nécessaire pour accomplir les calculs.
Pour les besoins ponctuels, le bon vieux Math.random() fera l’affaire :
var rand = myArray[Math.floor(Math.random() * myArray.length)];
Dans le cas où le hasard ne fait pas bien les choses, il vaut mieux mélanger le tableau. Voici une méthode basée sur l’algorithme de Fisher-Yates :
function shuffle(array) {
var m = array.length, t, i;
// While there remain elements to shuffle…
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
Pour comprendre la différence, je recommande d’aller voir les excellentes visualisations faites par Mike Bostock.
Mettre un ombré sur une image ou un bloc permet de le mettre immédiatement en relief. Encore faut-il savoir doser la force et profondeur.
.card .card-image, .card .header, .card-profile .card-avatar, .card-testimonial .card-avatar img, .card-raised, .img-raised, .iframe-container iframe {
-webkit-box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.card-plain .card-image {
margin: 0;
border-radius: 3px;
}
.card .card-image {
overflow: hidden;
position: relative;
}
Ce qui donne le résultat suivant :
Un petit snippet pour créer une icone de scroll animée en CSS, pour accompagner les utilisateurs après un splashscreen ou sur un site parallax.
C’est malin, c’est simple et c’est joli.
<div class="w-scroll-button w-button-1" style="border-color:#000000;color:#000000"> <a href="#scroll"> <i></i> </a> </div>
et les css qui vont avec :
@-webkit-keyframes scrollButtonFadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes scrollButtonFadeInDown {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.scrollButtonFadeInDown {
-webkit-animation-name: scrollButtonFadeInDown;
animation-name: scrollButtonFadeInDown;
}
.w-scroll-button {
position: absolute;
z-index: 10;
display: inline-block;
left: 50%;
bottom: 50px;
width: 100px;
border-color: #fff;
color: #fff;
margin-left: -50px;
text-align: center;
}
.w-scroll-button.w-button-1 a {
display: inline-block;
border-width: 1px;
border-style: solid;
border-color: inherit;
color: inherit;
width: 22px;
height: 36px;
border-radius: 20px;
overflow: hidden;
}
.w-scroll-button.w-button-1 a i::before {
display: block;
content: '';
border-style: solid;
border-left-width: 1px;
border-color: inherit;
color: inherit;
border-radius: 2px;
height: 3px;
}
.w-scroll-button.w-button-1 a i {
display: inline-block;
position: absolute;
left: 50%;
top: 10px;
height: 8px;
width: 4px;
margin-left: -2px;
border-color: inherit;
color: inherit;
-webkit-animation: scrollButtonFadeInDown 1.2s infinite both;
animation: scrollButtonFadeInDown 1.2s infinite both;
}
Depuis la version 3.5, il est masqué par défaut.
Pour le réactiver, éditer le « functions.php » du thème actif pour y insérer :
add_filter( 'pre_option_link_manager_enabled', '__return_true' );
Et voilà, c’est reviendu.
git push --force && git checkout experimental && git revert --abort
Si toi aussi tu as chez toi un haut-parleur dont le cache poussière est enfoncé (le petit dôme au centre est écrasé), voilà la petite astuce qu’il te faut pour le redresser.
Il te faudra :
– un pistolet à colle chaude
– un fil un peu solide
– tes doigts
– un peu de finesse
Tout d’abord dépose une petite boule de colle sur l’extrémité du fil (celle que tu veux) et avant que la colle ne sèche, colle le tout sur ce qui te semble être le centre du cratère.
Attends patiemment que la colle refroidisse (environ 2 minutes) et prépare toi à utiliser ton doigté le plus délicatement ferme.
Il suffit alors de tirer sur le fil, en trouvant le bon angle pour redresser le dôme sans arracher la boule de colle immédiatement. Et voilà !
Il ne te reste plus qu’a décoller gentiment la boulette de colle du cache poussière en tirant latéralement sur le fil.
Répète l’opération autant de fois que nécessaire pour les petits cratères qui restent.
Life is like riding a bicycle. To keep your balance, you must keep moving.
- Albert Einstein
Quand l’âme nous parle, elle dit « je ».
Quand l’égo nous parle, il dit « tu ».