Decaps' crypt

Encore du travail ?

Sharing - Mariocraft/F.lux/Prepros/DigitalOcean

Le partage c'est bien, alors partageons. Voici des sites, logiciels et services (pas forcément inconnus) qui méritent selon moi d'être encore plus visibles.
Mariocraft

Mariocraft - Jeu en ligne

La quête perpétuelle d'amour du célèbre plombier moustachu revient mais cette fois-ci dans votre navigateur.

Développé en HTML/CSS et Javascript avec passion et acharnement par @xumiz, son gros plus: l'éditeur très complet permettant de réaliser des mondes et de les partager avec la communauté.


F.lux

F.lux - Logiciel

F.lux (malgré la tête de son site) est un logiciel qui vous veut du bien.

Il a pour mission d'adapter la quantité de lumière bleue émise par votre écran en fonction de l'heure, ce qui aura pour effet de diminuer la fatigue visuelle et de faciliter l'endormissement.

Un peu perturbant au début, on se rend vite compte de ses bienfaits après l'avoir désactivé pendant les heures de nuit.


Prepros

Prepros - Logiciel

Outil actuellement capable de compiler les langages suivants : LESS, Sass, Scss, Compass, Stylus, Jade, Slim, Markdown, Haml, LiveScript et CoffeeScript. Il sait aussi minifier et concaténer les fichiers Javascript, optimiser les images (même si pour l'instant c'est manuel et la compression n'est pas égale aux meilleurs compresseurs).

Les petits plus qui faciliteront la vie des codeurs : les notifications et le live refresh du navigateur.

Il est facilement utilisable et paramétrable, et a l'avantage d'être disponible en standalone pour Windows.


DigitalOcean

DigitalOcean - Hébergeur (serveur dédié virtuel)

Voilà bientôt 6 mois que je suis chez DigitalOcean et la seule chose que je regrette c'est de ne pas avoir migré plus tôt.

Très bon uptime, interface claire, et service client réactif (toutefois, il semblerait que victimes de leur succès, cela soit moins vrai aujourd'hui). L'ensemble donnant un rapport prestations/prix excellent.


Coding mistakes #2

Cette fois, c'est plus une horreur qu'une erreur. Regardez-moi ce joli onMouseOver :
  1. <div id="fooButton" onclick="getNext();" onmouseover="this.style.cursor='pointer';">+</div>

Les pseudo-classes c'est surfait.

Coding mistakes #1

Parce qu'il faut partager dans la vie, j'ai décidé de reporter ici les erreurs un peu "lulz" sur lesquelles je tomberai désormais.

Aujourd'hui, dans la catégorie "useless" :
  1. for ($i = 0; $i < 3; $i++)
  2. {
  3.     if (trim(strtolower($this->foo[$i])) != trim(strtolower($this->foo[$i])))
  4.     {
  5.         $diffArr[] = 'foo_'.$i;
  6.     }
  7. }

On ne sait jamais, $this est peut-être un mutant...

Preloading d'images avec CSS

Imaginons que nous avons ceci :

  1. #my_link { background: url(img.png); }
  2. #my_link:hover, #my_link:focus { background: url(img_2.png); }

Lorsque l'événement "hover" sera déclanché, il y aura un temps de décalage entre l'action et l'affichage de la nouvelle image. Ce temps est le temps que le navigateur mettra pour récupérer cette image. 

Pour éviter ce décalage, il est possible de précharger les images que l'on veut, en ajoutant dans votre HTML : 

  1. <div id="preloader">
  2.     <img src="img_2.png" alt="img_2">
  3. </div>
Et dans votre CSS :
  1. #preloader {
  2.     height:1px;
  3.     width:1px;
  4.     overflow:hidden;
  5.     position:absolute;
  6.     top:-1000px;
  7. }

Vous pouvez bien sûr ajouter autant d'images que vous avez besoin dans #preloader.

Créer des URLs "SEO friendly"

Pour ceux qui ne seraient pas encore au courant, SEO est l'acronyme de Search Engine Optimization.

Bref, si vous désirez rendre vos chaînes de caractères utilisables dans vos URLs, voici une fonction PHP qui répondra à vos attentes :
  1. function formatUrl($url) {
  2.     // Convert special characters with a dash
  3.     $url = preg_replace("`&(amp;)?#?[a-z0-9]+;`i", "-", htmlspecialchars($url));
  4.     // Convert in UTF-8
  5.     $url = htmlentities($url, ENT_COMPAT, 'utf-8');
  6.     // Replace some special characters with their equivalent
  7.     $url = preg_replace("`&([a-z])(acute|uml|circ|grave|ring|cedil|slash|tilde|caron|lig);`i", "\\1", $url);
  8.     // Replace all non alpha numeric characters with a dash
  9.     $url = preg_replace(array("`[^a-z0-9]`i","`[-]+`"), "-", $url);
  10.     $url = strtolower(trim($url, '-'));
  11.     return $url;
  12. }

Elle transformera la chaîne suivante :
Ceci e Ä un ä test é < > \" flÎdelï ô tàc t'ac ! ?N./mùl^p 
En ceci :
ceci-e-a-un-a-test-e-flideli-o-tac-t-ac-n-mul-p

Valeurs erronées avec .height()/.css("height") ou .width()/.css("width") de jQuery sous Opera

Lorsque l'on veut récupérer la hauteur d'un objet du DOM avec jQuery, on écrit par exemple cela :
$(document).ready(function() {

var obj = $("#an_id");
var height = obj.css("height");
}
Or, il arrive que l'on obtienne de fausses valeurs, cela vient du fait qu'actuellement Opera déclanche l'événement "DOM ready" avant que les CSS externes soient chargées.

Afin de résoudre ce problème, il faut travailler sur les dimensions dans le callback de $(window).load() :
$(document).ready(function() {

$(window).load(function(){
var obj = $("#an_id");
var height = obj.css("height");
});
}
Pour teminer, il peut arriver que la fonction .css("height") retourne la valeur "auto" sous Internet Explorer. Il suffira de rajouter une ligne pour prévenir ce cas :
$(document).ready(function() {

$(window).load(function(){

var obj = $("#an_id");
var height = obj.css("height");
if(height == "auto") height = obj.height();
});
}

Le saviez-vous ? Refresh saviez_vous Loading

VDM Refresh vdm Loading