Monthly Archive: janvier 2016

Otakugame.fr v5 (2016)
Une nouvelle version pour Otakugame.fr !

Otakugame.fr | Restyling 2016 !

Après le nouveau serveur, j’ai eu la volonté de revoir certaines parties du code d’Otakugame.fr, mais également pour vous, une autre façon de symboliser ce passage de façon visuelle ! J’ai donc encore modernisé le design, en supprimant les ombres (ceux qui ont des ordinateurs très peu puissants me remercieront), et allant encore plus droit au but : le contenu ! Je vous laisse jouer au jeu des sept différences ci-dessous (oui, j’ai eu droit plusieurs fois à des « mais il n’y a aucune différence ! » ^^ !

Otakugame.fr v4 (2015)

Otakugame.fr v4 (2015)

Après la v4.1, c’est donc la v5 qui débarque tout doucement, tout en finesse, avec de petites évolutions que vous devriez voir un peu partout… Notamment un système de login via facebook beaucoup plus fiable qu’auparavant (et la suppression du login via Facebook… Je cherche encore une solution par rapport à cela d’ailleurs…), mais qui ne sert plus qu’à l’inscription sur le site…

Otakugame.fr v5 (2016)

Otakugame.fr v5 (2016)

Et si vous avez des problèmes d’affichage (en théorie, je force vos navigateur à charger la nouvelle feuille de style), un petit CTRL+F5 ou POMME+R sur MAC (nan je suis réfractaire à appeler cette touche CMD) et ça sera réglé 😉 !

 

JQuery a changé la vie de pas mal de développeurs web...
JQuery a changé la vie de pas mal de développeurs web...

Optimiser WordPress en utilisant JSDelivr & Google Library pour Jquery !

Hello à tous !

Petite découverte du jour : Une des raisons de la lenteur de chargement des WordPress, c’est l’utilisation abusive de Javascript… Et je suis pleinement dans ce cas ! Mais sachez que si vous utilisez des ressources de CDN officiels, il y a de fortes chances que votre internaute ait déjà chargé ces librairies dans son navigateur… Et cela vous économisera quelques millisecondes de chargement !

Pour cela, il existait un plugin (Use Google Libraries), mais celui ci ne fonctionne plus avec les nouvelles versions de WordPress. En plus il n’est plus mis à jour… Moi je vous propose une solution simple : Utiliser le fichier function.php de votre thème et… Roulez jeunesse ! Ajoutez-y ces instructions :

////////////////////////////////////////////////////////////////////////
// On utilise les cdn Google et JSdelivr 🙂 ////////////////////////////
////////////////////////////////////////////////////////////////////////
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js’, true, ‘2.2.0’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘https://cdn.jsdelivr.net/jquery.migrate/1.2.1/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
wp_deregister_script(‘jquery-ui’);
wp_register_script(‘jquery-ui’, ‘https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js’, true, ‘1.11.4’);
wp_enqueue_script(‘jquery-ui’);
}
}
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );

Et voilà ! Les principales ressources javascript de votre wordpress seront gérées depuis des CDN 😉 ! Elle est pas belle la vie ? Notez également que wordpress vous propose un CDN image gratuit, photon, livré avec le plugin Jetpack, que je ne peux que vous conseiller d’activer pour encore soulager votre serveur !

Ah oui, petit détail : ma version de jQuery, la 2.2.0, cassera la compatibilité avec les navigateurs Internet Explorer plus vieux que IE9… Mais c’est un choix qui m’est personnel, puisque j’améliore l’expérience sur mobile, tablette et ordinateurs modernes en contrepartie 😉 !

Google chrome m'aura donné du fil à retordre...
Google chrome m'aura donné du fil à retordre...

Enfin ! La nouvelle interface pour commenter arrive sur Otakugame.fr !

Ah ah ! J’ai enfin réussi à régler le problème du chunked avec Google Chrome ! Il était bien du à la façon dont varnish gère le chunk… Etrange.

Donc en ajoutant ceci :

sub vcl_recv {

 

….

 

# — WordPress specific configuration

# Did not cache the admin and login pages
if (req.url ~ « wp-(login|admin) » || req.url ~ « preview=true ») {
return (pass);
}

#dont cache ajax requests
if(req.http.X-Requested-With == « XMLHttpRequest » || req.url ~ « nocache » || req.url ~ « (admin-ajax.php|control.php|wp-comments-post.php|wp-login.php|bb-login.php|bb-reset-password.php|register.php) »)
{
return (pass);
}

# Normalize Accept-Encoding header and compression
# https://www.varnish-cache.org/docs/3.0/tutorial/vary.html
if (req.http.Accept-Encoding) {
# Do no compress compressed files…
if (req.url ~ « \.(jpg|png|gif|gz|tgz|bz2|tbz|mp3|ogg)$ ») {
unset req.http.Accept-Encoding;
} elsif (req.http.Accept-Encoding ~ « gzip ») {
set req.http.Accept-Encoding = « gzip »;
} elsif (req.http.Accept-Encoding ~ « deflate ») {
set req.http.Accept-Encoding = « deflate »;
} else {
unset req.http.Accept-Encoding;
}
}

 

….

 

}

dans notre fichier default.vcl (nano /etc/varnish/default.vcl), on arrive enfin à passer outre le bug de chrome « ERR_INCOMPLETE_CHUNKED_ENCODING » ! Chrome est vraiment trop stricte à ce niveau… En gros, il faut normaliser les entêtes Accept-Encoding et éviter de cacher ces requêtes. Et là… Magie, ça marche !

J’en ai profité pour faire d’autres optimisations… Sur les Cookies cette fois-ci !

sub vcl_recv {

….

# Remove the Quant Capital cookies (added by some plugin, all __qca)
set req.http.Cookie = regsuball(req.http.Cookie, « __qc.=[^;]+(; )? », «  »);

# Remove the wp-settings-1 cookie
set req.http.Cookie = regsuball(req.http.Cookie, « wp-settings-1=[^;]+(; )? », «  »);

# Remove the wp-settings-time-1 cookie
set req.http.Cookie = regsuball(req.http.Cookie, « wp-settings-time-1=[^;]+(; )? », «  »);

# Remove the wp test cookie
set req.http.Cookie = regsuball(req.http.Cookie, « wordpress_test_cookie=[^;]+(; )? », «  »);

# Are there cookies left with only spaces or that are empty?
if (req.http.cookie ~ « ^ *$ ») {
unset req.http.cookie;
}

# Check the cookies for wordpress-specific items
if (req.http.Cookie ~ « wordpress_ » || req.http.Cookie ~ « comment_ ») {
return (pass);
}
if (!req.http.cookie) {
unset req.http.cookie;
}

….

}

Enfin, il y a une erreur de programmation dans wordpress, qui ne renvoi pas le content-length sur les requêtes ajax en html. En m’inspirant de cet article, j’ai remplacé dans le fichier « wp-includes/class-wp-admin-ajax-response.php » cela :

public function send() {
header( ‘Content-Type: text/xml; charset=’ . get_option( ‘blog_charset’ ) );

echo « <?xml version=’1.0′ encoding=' » . get_option( ‘blog_charset’ ) . « ‘ standalone=’yes’?><wp_ajax> »;
foreach ( (array) $this->responses as $response )
echo $response;
echo ‘</wp_ajax>’;
if ( defined( ‘DOING_AJAX’ ) && DOING_AJAX )
wp_die();
else
die();
}

par

public function send() {
$xml = « <?xml version=’1.0′ encoding=' » . get_option(‘blog_charset’) . « ‘ standalone=’yes’?><wp_ajax> »;
foreach ( (array) $this->responses as $response )
$xml .= $response;
$xml .= ‘</wp_ajax>’;
$length = strlen($xml);
header(‘Content-Type: text/xml; charset=’ . get_option(‘blog_charset’));
header(‘Content-Length: ‘.$length);
header(‘Date: ‘.date(DATE_RFC1123));
echo $xml;
if ( defined( ‘DOING_AJAX’ ) && DOING_AJAX )
wp_die();
else
die();
}

On termine dans apache par désactiver gzip avec « SetEnv no-gzip 1 » (je n’ai pas trouvé plus propre depuis qu’on utilise mod_deflate) dans l’admin (fichier httpd.conf)

<Directory « /votre/url/vers/votresite.fr/wp-admin »>
SetEnv no-gzip 1
</Directory>

Et voilà ! Plus d’erreur pour Chrome, qui a enfin la longueur exacte de sa requête (pfiouuu) ! Avec tout cela, je devrais pouvoir vous mettre rapidement en place la nouvelle interface pour les commentaires notamment ! J’étais bloqué par rapport aux utilisateurs de chrome… See you soon 😉 !

Google Chrome et l'erreur net::ERR_INCOMPLETE_CHUNKED_ENCODING
Google Chrome et l'erreur net::ERR_INCOMPLETE_CHUNKED_ENCODING

Bug net::ERR_INCOMPLETE_CHUNKED_ENCODING entre Google Chrome et admin-ajax.php (WordPress)

Voilà, depuis la nouvelle version du site, les utilisateurs sous Google Chrome ont beaucoup de mal à poster des commentaires. En réalité, cela fonctionne, le commentaire est bien publié, mais l’AJAX n’ayant pas un retour positif, il donne l’impression à l’utilisateur que le message n’a pas été envoyé – alors qu’il l’a été.

C’est dommage car Google Chrome représente plus de 50% des visiteurs : C’est donc un bug majeur.

Quel est la cause du problème

Ayant fait un peu le tour du web, je comprends que c’est lié au « chunked » et à un « Content-Length » incorrect. Google Chrome vérifie que les données concorde et si ce n’est pas le cas… Il s’arrête. Le soucis, c’est que mes données sont envoyées en GZip (compressée) donc forcément, impossible pour le serveur de savoir combien fera le fichier AVANT de le Gzipper (puisque le fichier contenant ce fameux Content-Length est DANS ce fichier Gzip).

Que faire ?

Personnellement, je me dis que désactiver Gzip et Deflate devraient résoudre le problème, mais je n’ai pas encore réussi à le faire (il faut dire que le fichier de configuration est vraiment complexe).  D’ailleurs, on peut voir dans le code source de Chromium la façon dont Chrome renvoi cette erreur :

int HttpStreamParser::DoReadBodyComplete(int result) {
// When the connection is closed, there are numerous ways to interpret it.
//
// – If a Content-Length header is present and the body contains exactly that
// number of bytes at connection close, the response is successful.
//
// – If a Content-Length header is present and the body contains fewer bytes
// than promised by the header at connection close, it may indicate that
// the connection was closed prematurely, or it may indicate that the
// server sent an invalid Content-Length header. Unfortunately, the invalid
// Content-Length header case does occur in practice and other browsers are
// tolerant of it. We choose to treat it as an error for now, but the
// download system treats it as a non-error, and URLRequestHttpJob also
// treats it as OK if the Content-Length is the post-decoded body content
// length.
//
// – If chunked encoding is used and the terminating chunk has been processed
// when the connection is closed, the response is successful.
//
// – If chunked encoding is used and the terminating chunk has not been
// processed when the connection is closed, it may indicate that the
// connection was closed prematurely or it may indicate that the server
// sent an invalid chunked encoding. We choose to treat it as
// an invalid chunked encoding.
//
// – If a Content-Length is not present and chunked encoding is not used,
// connection close is the only way to signal that the response is
// complete. Unfortunately, this also means that there is no way to detect
// early close of a connection. No error is returned.
if (result == 0 && !IsResponseBodyComplete() && CanFindEndOfResponse()) {
if (chunked_decoder_.get())
result = ERR_INCOMPLETE_CHUNKED_ENCODING;
else
result = ERR_CONTENT_LENGTH_MISMATCH;
}

Il y a également quelques erreurs Varnish 503, qui ne sont pas lié au bug ci-dessus, mais elles me semblent être liées à un des modules PHP chargé sur le serveur qui serait défectueux… Le soucis étant de trouver lequel, car l’erreur dit simplement :

zend_mm_heap corrupted

Et c’est tout… Aucune indication, si ce n’est que ZEND est forcément lié à PHP 🙂 !

Voilà, c’était tout pour ce petit carnet de développeur !

Tales of Zestiria est vraiment un RPG à l'ancienne, c'est à dire... Long. J'ai pas dit chiant hein ;) !
Tales of Zestiria est vraiment un RPG à l'ancienne, c'est à dire... Long. J'ai pas dit chiant hein ;) !

La météo des critiques d’Otakugame.fr !

Je dois avouer que je suis très en retard sur l’écriture de critique de jeux vidéo sur Otakugame.fr. Voici les jeux dont j’aimerais parler sur le site :Watch Full Movie Online Streaming Online and Download

  • Metal Gear Solid V : Phantom Pain
  • Fallout 4
  • Divinity Origin Sin Enhanced Edition
  • Xenoblade Chronicles
  • Destiny : Le Roi des Corrompus
  • Persona 4 : Dancing All Night
  • Dragon Quest Heroes (il y a un aperçu uniquement)
  • Tales of Zestiria
  • Final Fantasy Type-0 HD
  • Star Wars BAttlefront
  • Skylanders Supercharged (3DS & Wii U)
  • Disney Infinity 3.0 (mais le jeu lui même)
  • The Unfinished Swan
  • The Vanishing of Etan Carter

Et je m’essaierais bien à faire quelques test hardware (Tablette Dell Venue Pro 8, Microsoft Lumia 640 sous Windows 10 Mobile etc…). Mais pour tout cela, il faut du temps…

Otakugame.fr
Otakugame.fr

Otakugame.fr est enfin stable dans sa version 4.1 !

Hello les Otakus ! Ça y est : le nouveau serveur est là ! Tout beau, tout neuf, rapide comme un Sonic sur la plage… Je suis sûr que vous saurez l’apprécier !

Comme je vous le disais dans le précédent édito : vous êtes de plus en plus nombreux à vous connecter au site ! Cela a engendré d’ailleurs de gros ralentissement depuis la fin du mois, Noël et la période des fêtes ayant été l’apothéose… Les indisponibilités du site, récurrentes ces trois derniers jours, devraient être de l’histoire ancienne. Et vous pourrez enfin naviguer sur le site sans attendre des plombes avant que chaque page (et image) ne se charge…

Actuellement, cette version 4.1 d’Otakugame.fr est en bêta : Nous devons tester la façon dont réagi le site… D’ailleurs n’hésitez pas à nous faire part de vos difficultés si vous en rencontrez dans les commentaires ci-dessous !

Changelog :

  • Une nouvelle bannière graphique pour accueillir l’arrivée du nouveau site !
  • Simplification et épuration de cette bannière, vous savez tous qu’on est sur le blog des otakus !
  • Désormais, il n’y a qu’un bouton pour se connecter, dans le menu (et plus dans la sidebar). Vous pourrez alors vous connecter via Facebook, Twitter ou autre sur cette page. C’est moins rapide… Mais ça permet de simplifier les choses pour les nouveaux venus 😉 !
  • Il existe une page « Activité » permettant de voir en un clin d’œil les articles et les contributions de la communauté Otakugame.fr. Elle existait déjà mais fait partie intégrante du site désormais !
  • Nouveau logo pour Google + (bah oui, ça compte)
  • Nouveau système de partage sur les réseaux sociaux (plus rapide)
  • Disparition de la version anglaise d’Otakugame.fr (les articles sont mélangés aux articles français)
    • A noter que nous avons un partenariat avec notre site frère anglais :Otakugamers.uk ! Nous partageons la même philosophie des jeux vidéo, n’hésitez pas à leur faire un gros hug !
  • Un nouveau système de galerie d’images, plus sympa (plutôt que les anciennes vignettes carrées). Vous pouvez en voir un exemple ici, en bas de page.
  • Et surtout… Un nouveau serveur ! Un très beau serveur et un très très beau cadeau de Noël, qui est présent… Grâce à vous ! Milles merci et bravo à tous !

J’avais beaucoup d’idées pour Otakugame.fr, mais les ressources de l’ancien serveur, sous-dimensionné par rapport au succès du blog, me limitait par rapport à celles-ci… Ça va être l’occasion

Star Wars nous envahit...

Vous allez bouffer du Star Wars pendant tout le mois !

Vous n’aimez pas Star Wars ? Ça tombe mal, car il va vous falloir vous passer d’Otakugame.fr ! Il y aura un article par figurine, à commencer par les deux bundle avec un mini-test sur chacun des deux jeux… Je vais également pouvoir tenir un planning des jeux que l’on a à tester, car mine de rien, ça commence à demander de l’organisation tout cela !

Un gif animé de l'Amiibo Mario ? Chiche ?
Un gif animé de l'Amiibo Mario ? Chiche ?

Le gif animé de l’Amiibo Super Mario Bros…

Un gif animé sur un Amiibo… C’est une drôle d’idée, parti d’un simple constat : Difficile de faire tenir ce satanée Amiibo sur une feuille ! Du coup, on a prit pleins de clichés de l’Amiibo sur la feuille et là paf ! Un ami m’a dit : Et si on en faisait un gif animé !Watch Full Movie Online Streaming Online and Download

C'était un délire étrange... Mais je me suis dit : Why not !

C’était un délire étrange… Mais je me suis dit : Why not !

Alors le résultat n’est pas super, mais c’est intéressant… Je vais essayer de pousser le concept plus loin dans d’autres articles, avec des minis vidéos de présentation des figurines. A voir !