Télécharger une page web via PHP en utilisant WGET

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);
?>

 

Tableau javascript : random et shuffle

LMAO every day im shuffling

Quand le hasard est trop prévisible, un petit coup de shuffle pour épauler random().

Le hasard et la statistique

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.

Shuffle au secours de Random

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.

Conclusion

  • Besoin du hasard une ou deux fois : random()
  • Du hasard moins prévisible : shuffle() et random()
  • Attention à la vitesse d’exécution sur les grands tableaux

Effet ombré discret et chattoyant

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.

Simple et discret

.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 :

Icone de scroll animée en CSS

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.

Le code

<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;
}

Le résultat