Tag: tuto | Page 24 | SkyMinds.Net

Serveur dédié : optimiser toutes les images JPG et PNG avec OptiPNG et JpegOptim

7 April 202217 juin 2013 by Matt Biscay · Lecture: 3 minutes

Je classe volontairement cet article dans la série Serveur dédié, étant donné que nous allons utiliser la ligne de commande exclusivement. Si vous souhaitez faire la même chose sur votre machine personnelle, il vous suffit d’utiliser Trimage (qui en plus possède une GUI).

Si vous possédez un site, blog ou une galerie d’images, il peut être très intéressant d’optimiser toutes vos images d’un seul coup et ce, de manière lossless : chargement plus rapide des pages et moindre consommation de bande passante.

Sous Linux, il existe plusieurs programmes pour le faire. Personnellement, j’ai choisi OptiPNG (pour optimiser les PNG) et JpegOptim (pour optimiser les JPG).

L’installation et la compression de vos répertoires d’images prend à peine quelques minutes.

Installation d’OptiPNG et JpegOptim

On installe nos deux paquets :

apt-get install jpegoptim optipngCode language: JavaScript (javascript)

et on RTFM :

man jpegoptim

man optipng

Optimisation des JPG

On navigue dans notre répertoire images et on fait une estimation des gains. Avant de commencer, vérifiez que vous avez la dernière version de jpegoptim et installez manuellement la dernière version des dépôts Sid.

Commençons par les JPG :

jpegoptim -n -t *.jpgCode language: CSS (css)

-n permet de simuler l’optimisation.
-t permet de calculer l’espace gagné

Résultat :

Average compression (2730 files): 0.95% (452k)Code language: CSS (css)

Cela peut sembler peu mais je compresse toutes mes images avant de les mettre sur le web. Visiblement, quelques unes sont passées au travers du filet !

Serveur dédié : activer X11 forwarding pour SSH

19 August 202003 juin 2013 by Matt Biscay · Lecture: 2 minutes

Si jamais vous avez besoin que votre serveur dédié vous renvoie une image ou quoi que ce soit de graphique via SSH, vous aurez très certainement besoin d’avoir l’X11 Forwarding activé.

Il ne l’est pas par défaut donc si vous obtenez l’erreur suivante:

X11 forwarding request failed on channel 0

alors il vous faut paramétrer l’option dans la configuration SSH du serveur.

Etape 1 : installer xauth

Sur le serveur et sur le client, xauth doit être installé. Il ne l’est pas sur notre serveur Debian, donc on l’installe :

apt-get install xauthCode language: JavaScript (javascript)

Etape 2 : vérifier que X11 forwarding est activé dans SSH

Sur le serveur, on édite la configuration du daemon SSH :

nano /etc/ssh/sshd_config

Et on vérifie qu’on a bien ForwardX11 est bien à yes :

AllowTcpForwarding yes
X11Forwarding yes
X11DisplayOffset 10
X11UseLocalhost yes
AddressFamily inet

et sur le client, on édite aussi la configuration SSH :

nano /etc/ssh/ssh_config

avec :

ForwardAgent yes
ForwardX11 yes
ForwardX11Trusted yes

PHP : résoudre l’erreur “Creating default object from empty value”

5 April 202228 mai 2013 by Matt Biscay · Lecture: 1 minute

Suite à la mise à jour de PHP, mon fichier d’erreurs du site a commencé à afficher le message suivant :

PHP Warning: Creating default object from empty value in /wp-content/themes/skyminds/functions.php on line 1213

La ligne en question correspond à :

$posts[0]->comment_status = 'closed';Code language: PHP (php)

Le problème réside dans le fait que $posts n’est pas explicitement défini et comme les versions récentes de PHP tournent maintenant avec le mode E-STRICT par défaut, on obtient une erreur. Il existe deux solutions – soit mettre :

$posts = new stdClass();Code language: PHP (php)

s’il sagit d’un objet, soit mettre :

$posts = array();Code language: PHP (php)

s’il s’agit d’une associative array, juste avant la ligne de code incriminée. Dans mon cas, l’array() est la bonne solution.

Serveur dédié : mise à jour vers Debian 7 Wheezy

29 September 202411 mai 2013 by Matt Biscay · Lecture: 4 minutes

Hier soir, j’ai mis le serveur à jour : nous passons de Debian 6 (“Squeeze”) à Debian 7 (“Wheezy”) – vous l’aurez remarqué : chez Debian, les versions portent le nom de personnages de Toy Story :)

Histoire de garder une trace de ce que je fais, voici les étapes que j’ai suivies.

Contrairement aux versions précédentes, Debian recommande d’utiliser apt-get au lieu d’aptitude. Donc acte dans ce tutoriel.

Etape 1 : s’assurer que le système est à jour

On vérifie que notre Squeeze est à jour :

apt-get update && apt-get upgradeCode language: JavaScript (javascript)

Etape 2 : installer les nouveaux dépôts

Pour voir vos dépôts existants :

cat /etc/apt/sources.listCode language: PHP (php)

Résultat :

deb http://mirror.ovh.net/debian/ squeeze main contrib
deb-src http://mirror.ovh.net/debian/ squeeze main contrib

deb http://security.debian.org/ squeeze/updates main contrib
deb-src http://security.debian.org/ squeeze/updates main contrib

# Webmin
deb http://download.webmin.com/download/repository/  sarge contrib

# varnish
deb http://repo.varnish-cache.org/debian/ squeeze varnish-3.0

# mod security
deb  squeeze-backports main 

# dotdeb updated LAMP servers
deb http://packages.dotdeb.org squeeze all
deb-src http://packages.dotdeb.org squeeze allCode language: PHP (php)

Il faut remplacer toutes les occurrences de squeeze en wheezy. On peut le faire avec cette commande :

sed -i 's/squeeze/wheezy/g' /etc/apt/sources.listCode language: PHP (php)

Evidemment, il y a un piège : le dépôt des backports a changé de nom et d’adresse. Il se trouve désormais ici :

deb http://ftp.debian.org/debian/ wheezy-backports mainCode language: JavaScript (javascript)

Après modification, voici donc notre sources.list :

deb http://mirror.ovh.net/debian/ wheezy main contrib
deb-src http://mirror.ovh.net/debian/ wheezy main contrib

deb http://security.debian.org/ wheezy/updates main contrib
deb-src http://security.debian.org/ wheezy/updates main contrib

# Webmin
deb http://download.webmin.com/download/repository/  sarge contrib

# varnish
deb http://repo.varnish-cache.org/debian/ wheezy varnish-3.0

# mod security
deb http://ftp.debian.org/debian/ wheezy-backports main

# dotdeb updated LAMP servers
deb http://packages.dotdeb.org wheezy all
deb-src http://packages.dotdeb.org wheezy allCode language: PHP (php)

Etape 3 : lancement de la mise à jour partielle

Mise à jour des fichiers :

apt-get updateCode language: JavaScript (javascript)

Aucune erreur. On continue avec la mise à jour minimale des paquets :

apt-get upgradeCode language: JavaScript (javascript)

Serveur dédié : des paquets LAMP à jour sous Debian

7 April 202203 avril 2013 by Matt Biscay · Lecture: 2 minutes

Problème : des paquets vieillots

Lorsque votre serveur tourne sous Debian, les paquets sont éprouvés mais souvent datés. Ils tournent bien mais on ne peut pas vraiment bénéficier des versions les plus actuelles pour Apache, MySQL ou PHP par exemple.

La solution : ajouter un nouveau dépôt pour LAMP

La solution est tout simple, il suffit d’ajouter un nouveau dépôt, Dotdeb, qui permet de mettre à jour les paquets libmemcached, mysql, nginx, percona-toolkit, php5, php5-pecl, pinba-engine, redis, ruby-passenger, zabbix.

On édite donc notre liste :

nano /etc/apt/sources.listCode language: PHP (php)

et on ajoute les dépôts de Dotdeb, qui sont maintenus à jour par Guillaume Plessis :

deb http://packages.dotdeb.org stable all
deb-src http://packages.dotdeb.org stable allCode language: JavaScript (javascript)

et enfin, on ajoute la clé GPG :

wget http://www.dotdeb.org/dotdeb.gpg
cat dotdeb.gpg | apt-key add -Code language: JavaScript (javascript)

La mise à jour se fait comme d’habitude :

apt update && apt upgrade

Serveur dédié : création d’une seedbox avec Transmission

7 April 202229 janvier 2013 by Matt Biscay · Lecture: 2 minutes

Aujourd’hui, on apprend comment monter une seedbox sur un serveur dédié avec Transmission.

Une seedbox est un serveur privé dédié au téléchargement et à l’émission de fichiers, utilisant le protocole BitTorrent, connecté à des réseaux à très haut débit symétrique, souvent à 100 MBits/s et plus.

Les fichiers sont envoyés à la Seedbox par les autres utilisateurs du réseau BitTorrent, et de là ils peuvent être récupérés depuis un ordinateur personnel, à la vitesse maximale de sa connexion (ADSL, fibre optique, 3G…) et ceci par les protocoles FTP, HTTP, SFTP, rsync, SSH.

Etape 1 : installation de Transmission

Sur le serveur, dans le terminal, on installe Transmission :

apt-get install transmission-daemonCode language: JavaScript (javascript)

Le serveur se lance dès l’installation, on l’arrête :

/etc/init.d/transmission-daemon stop

Etape 2 : configurer Transmission

On édite sa configuration :

nano /etc/transmission-daemon/settings.json

Eléments à modifier selon votre configuration :

“download-dir”: “/home/files”,
“incomplete-dir”: “/home/files/tmp”,
“rpc-password”: “votre-mot-de-passe”,
“rpc-username”: “votre-login”,
“rpc-whitelist”: “254.254.254.254”,

Le mot de passe est hashé au redémarrage du serveur, vous pouvez le rentrer en clair.

Le serveur tourne par défaut sur le port 51413 et le webadmin sur le port 9091. Pensez à whitelister votre adresse IP.

Bash : réparer les tables MySQL en cas de crash

16 November 201520 janvier 2013 by Matt Biscay · Lecture: 1 minute

Bash Il arrive que parfois une table SQL soit complètement plantée, ce qui peut bloquer l’accès à la base de données et donc l’accès au site.

Pour éviter cela, j’ai écrit un petit script bash qui me permet de stopper le serveur MySQL, procéder à la réparation de toutes les tables de toutes les bases de données puis relancer le serveur MySQL, Apache et Varnish.

#!/bin/sh
# MySQL Auto-Repair
# Written by Matt - skyminds.net

# stop the MySQL server
/etc/init.d/mysql stop

# check for errors
myisamchk /var/lib/mysql/*/*.MYI

# ask permission to repair
read -p "Repair tables ? (y/n)" -n 1 -r
if [[ $REPLY =~ ^[Yy]$ ]]
then
	# repair everything
	myisamchk -r /var/lib/mysql/*/*.MYI

	# restart servers
	/etc/init.d/mysql restart
	/etc/init.d/apache2 restart
	/etc/init.d/varnish restart
else
	/etc/init.d/mysql restart
fi

C’est le genre de petit fichier bash à garder au frais sur le serveur, facile à lancer en SSH depuis n’importe quel terminal en cas de besoin.

jQuery : sélectionner un élément dont l'ID ou la classe commence ou finit par une chaîne photo 1

jQuery : script utilisant la fonction toggle pour afficher ou cacher un bloc HTML

1 April 202210 janvier 2013 by Matt Biscay · Lecture: 3 minutes

Il y a quelques mois, je me suis amusé à transformer mon script javascript maison qui me permet d’afficher certaines zones de textes sur le site, notamment dans les articles de la catégorie Music/Séries.

Étant donné que jQuery est présent sur toutes les pages du site, j’ai adapté le script pour qu’il utilise jQuery. Cela fera aussi une librairie maison de moins à maintenir (et à charger).

Important : si vous voulez gérer plusieurs blocs, utilisez le script JQuery toggle pour afficher et cacher de multiples blocs HTML

Un script Javascript répondant à des besoins précis

J’écris pas mal de code afin de répondre à mes besoins sur le site, le but étant de me simplifier la vie au maximum.

Dans certains articles, il existe des zones de textes qui ne sont pas tout public et qui nécessitent une authentification préalable à leur lecture. La zone de texte doit apparaître lorsque l’on clique sur un des liens présents dans l’article.

Démo

Pour voir ce script en action, il suffit de cliquer sur ce lien.

Ce texte apparaît et disparaît grâce à un script javascript
écrit pour jQuery et qui utilise la fonction toggle().

PHP : solution pour l'erreur "preg_match(): Compilation failed: invalid range in character class" photo

PHP : résoudre l’erreur “function eregi() is deprecated”

8 April 202218 décembre 2012 by Matt Biscay · Lecture: 2 minutes

Il vous est peut-être déjà arrivé de tomber sur ce message d’avertissement :

Function eregi() is deprecated.

En fait, “deprecated” signifie que les versions récentes de PHP considèrent cette fonction comme obsolète, c’est un peu comme si la fonction ereg() n’existait plus.

Par conséquent, mieux vaut dorénavant utiliser la fonction preg_match qui a pris sa place.

La fonction ereg() ou eregi() est donc remplacée par la fonction preg_match() depuis PHP 5.3 :

$is_image = eregi( "jpg|gif",$file_type );Code language: PHP (php)

devient donc :

$is_image = preg_match( “~jpg|gif~i”,$file_type );Code language: PHP (php)

Voici la liste des fonctions devenues obsolètes sous PHP 5.3 :

call_user_method() (use call_user_func() instead)
call_user_method_array() (use call_user_func_array() instead)
define_syslog_variables()
dl()
ereg() (use preg_match() instead)
ereg_replace() (use preg_replace() instead)
eregi() (use preg_match() with the ‘i’ modifier instead)
eregi_replace() (use preg_replace() with the ‘i’ modifier instead)
set_magic_quotes_runtime() and its alias, magic_quotes_runtime()
session_register() (use the $_SESSION superglobal instead)
session_unregister() (use the $_SESSION superglobal instead)
session_is_registered() (use the $_SESSION superglobal instead)
set_socket_blocking() (use stream_set_blocking() instead)
split() (use preg_split() instead)
spliti() (use preg_split() with the ‘i’ modifier instead)
sql_regcase()
mysql_db_query() (use mysql_select_db() and mysql_query() instead)
mysql_escape_string() (use mysql_real_escape_string() instead)
Passing locale category names as strings is now deprecated. Use the LC_* family of constants instead.
The is_dst parameter to mktime(). Use the new timezone handling functions instead.Code language: JavaScript (javascript)

HTML5 : corriger l'erreur "The frameborder attribute on the iframe element is obsolete. Use CSS instead." photo

WordPress : valider le code oEmbed Youtube en HTML5

26 September 202428 novembre 2012 by Matt Biscay · Lecture: 2 minutes

Le problème : le code des vidéos n’est pas valide en HTML5

Maintenant que nous avons mis à jour le code des oEmbed Youtube, nous allons rendre le code de l’iframe valide. Voici ce que le code oEmbed de WordPress donne par défaut avec un lien Youtube :

<iframe src="https://www.youtube.com/embed/Gvh2Zo7UL6E" width="660" height="371" frameborder="0" allowfullscreen="allowfullscreen"></iframe>Code language: HTML, XML (xml)

Résultat:

Or le petit problème, c’est que tout cela n’est pas vraiment valide au niveau W3C et je commence à me lasser de voir ces erreurs de validation sur toutes les pages du site avec des vidéos :

Erreur 1 : Attribute allowfullscreen not allowed on element iframe at this point.
Erreur 2 : The frameborder attribute on the iframe element is obsolete. Use CSS instead.Code language: JavaScript (javascript)

La solution : filtrer le rendu oEmbed de WordPress pour purifier le code

Voici donc la solution que j’ai mise en place sur le site : je filtre le code oEmbed de WordPress de manière à retirer le tag allowfullscreen qui n’a rien à faire là et à supprimer l’attribut frameborder, que je remplace par un style="border: none".

Éditez le fichier functions.php de votre thème et ajoutez-y cette fonction:

<?php
/*
|-----------------------------------------------------------------------
| Sky oEmbed Filter by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| The sky_oembed_filter() function attempts to validate WordPress 
| video oEmbeds for HTML5.
| $return is the normal HTML that the oEmbed process would return. 
| $data is the data received from the oEmbed call, in an object format. 
| $url is the original URL being queried for oEmbed info. 
|
*/
add_filter('oembed_dataparse', 'sky_oembed_filter', 90, 3 );
function sky_oembed_filter( $return, $data, $url ) {
 	$return = str_replace('frameborder="0" allowfullscreen', 'style="border: none"', $return);
	return $return;
}Code language: HTML, XML (xml)

Notez que WordPress cache les résultats oEmbed dans la table postmeta donc après avoir installé ce code et si vous voulez vérifier que cela fonctionne, éditez un article pour que le postmeta se mette à jour.

Voilà, vos pages avec vidéos YouTube devraient maintenant être valides.

Linux : joindre plusieurs fichiers avec cat

8 April 202220 novembre 2012 by Matt Biscay · Lecture: 1 minute

Si vous avez besoin de joindre (ou concaténer) plusieurs fichiers qui ont été nommés en ordre alphabétique, comme par exemple file0001.dat, file0002.dat, file0003.dat…. file1000.dat, une commande s’impose sous Linux : cat.

Dans un terminal, vous pouvez juste lancer cat comme ceci pour rassembler tous vos fichiers en un seul :

cat file*.dat >all_files.datCode language: CSS (css)

C’est une commande système, il n’y a rien à installer et c’est plutôt pratique.

HTML5 : résoudre l’erreur “keyword publisher is not registered” (validateur W3C)

8 April 202216 novembre 2012 by Matt Biscay · Lecture: 1 minute

Sur votre site ou blog, vous avez peut-être ajouté le widget ou bouton +1 de Google+, le réseau social de Google. Or le petit problème, c’est que le code fourni empêche la bonne validation du document.

Voici le code fourni par Google :

<a title="Google+" href="https://plus.google.com/114535411372700844744" rel="publisher nofollow">Google+</a>Code language: HTML, XML (xml)

et voici l’erreur renvoyée par le validateur W3C :

Keyword publisher is not registered

HTML5 étant toujours en cours de réalisation, les valeurs de la balise rel sont assez restreintes et on ne peut pas mettre tout ce que l’on veut sans déclencher l’erreur.

La solution est toute simple : il faut ajouter la valeur du rel en argument dans le lien, comme ceci :

<a title="Google+" href="https://plus.google.com/114535411372700844744?rel=publisher" rel="nofollow">Google+</a>Code language: HTML, XML (xml)

Et voilà, plus d’erreur lors de la validation.

← Précédent Suivant →