Nouveau serveur Kimsufi SSD pour un hébergement Nginx, PHP-fpm, Varnish et Memcached

Mes sites ont migré sur un nouveau serveur Kimsufi SSD de OVH et les performances sont bien sympathiques grâce à Nginx et Varnish.

Petite évolution du serveur hébergeant feub.net et plusieurs autres sites qui reste chez Kimsufi d’OVH mais en version SSH cette fois-ci. Cela me titillait depuis un moment car il faut bien l’avouer le SSD lorsqu’on en goûte on ne peut plus s’en passer, côté desktop mais coté serveur aussi. Mais il fallait bien avouer que le boulot de la migration me faisait renoncer, je n’avais pas trop envie de passer des heures devant un terminal lorsque je passe déjà mes journées au boulot devant des lignes de code. Après moult réflexion donc, maintenant c’est fait, un Kimsufi moins cher (9.99€/mois) que celui d’avant, avec un couple processeur/mémoires similaire, mais aussi 20% de moins d’espace disque, passant d’1Tb à 40Gb.

Je reste fidèle à Fedora, en passant à la version 23, et le serveur web d’enfer Nginx se voit désormais épaulé par l’accélérateur d’applications web Varnish que je commence à apprivoiser et Memchached pour la mise en cache d’objets PHP. Belle petite équipe qui ne demande qu’à être optimisée ^.^

Je ne vais pas m’attarder sur le détail de mes configurations, mais ce sera certainement l’objet de prochains billets sur ce blog. Pour le moment ça roule, peut-être y’a-t-il quelques couacs à droite à gauche, alors n’hésitez surtout pas à me faire part de tout problème ou anomalie.

Les packages que j’utilise avec l’éditeur Atom de GitHub

Liste régulièrement mise à jour des packages (paquets) que j’utilise avec l’éditeur de texte multiplate-forme Atom de GitHub.

J’ai longtemps utilisé le génial éditeur de texte Sublime Text, mais comme son développement semble vraiment prendre du retard, et comme il n’est pas gratuit, je me suis tourné vers le prometteur Atom. Tout comme avec Sublime Text, je liste dans ce billet les différents packages et thèmes que j’utilise au quotidien pour mes développements.

Packages

Project Manager

Si vous ne travaillez que sur un unique projet, Atom out-of-the-box est amplement suffisant, mais dès lors que vous maintenez plusieurs projets, il est clair qu’un gestionnaire de projets est un outil manquant. C’est ce que fait ce paquet, et il le fait plutôt bien.
https://atom.io/packages/project-manager



Minimap

Les habitués de Sublime Text connaissent cette petite bande sur la droite de l’éditeur représentant l’intégralité du fichier courant et qui permet de très rapidement naviguer / scroller dedans.
https://atom.io/packages/minimap

linter

Atom à la base est un éditeur texte, point, pour lui ajouter des fonctionnalités avancées, il faut utiliser des paquets (plugins) externes. Linter permet de surligner des erreurs de frappe et d’avoir des informations supplémentaires.
https://atom.io/packages/linter

linter PHP

Linter étant une API globale, il faut ajouter le langage à linteriser.
https://atom.io/packages/linter-php

Less Than-Slash

Un simple paquet mais sympa pour ceux qui aiment, il permet juste de fermer une balise dès que l’on frappe inférieur à et slash (</).
https://atom.io/packages/less-than-slash

Git-Plus

Pour les utilisateurs de GIT ce paquet est indispensable et bien fichu.
https://atom.io/packages/git-plus

file-icons

Ce paquet ajoute des (jolies) icônes aux noms de fichiers suivant leur type.
https://atom.io/packages/file-icons

open-recent

Encore un plugin bien sympa pour une fonctionnalité qui semble de base : avoir une liste des derniers fichiers récemment fermés afin de pouvoir les ré-ouvrir rapidement. Par défaut Atom permet de ré-ouvrir le dernier fichier seulement.
https://atom.io/packages/open-recent

color-picker

Comme son nom l’indique, en une rapide combinaison de touche, on peut choisir une couleur facilement.
https://atom.io/packages/color-picker

Highlight Line Package

Certainement le paquet le plus simple qui soit, en effet il surligne la ligne courante du curseur. Personnellement, un gros plus visuellement.
https://atom.io/packages/highlight-line

Todo Show Package

Découverte récente, ce paquet dresse la liste des TODO éparpillés dans les fichiers de votre projet.
https://atom.io/packages/todo-show



Thème

J’utilise le thème Monokai de kevinsawicki
https://atom.io/themes/monokai

Voilà les principaux packages qui me plaisent, faites-moi part des vôtres!

Utiliser Bootstrap pour remplacer la fenêtre de confirmation Javascript

Changer l’aspect de la fenêtre de confirmation Javascript avec une modal Bootstrap.

Souvent dans une application lorsqu’on a une fonction qui va supprimer quelque chose, on demande confirmation par sécurité. Dans le développement web, cela peut se faire par exemple avec confirm() de Javascript, déclenché par le clic sur un lien avec l’attribut onclick de la balise a. Ceci est bien old-school pour plusieurs raisons que je ne parlerai pas ici.

Confirmation dans Google Chrome
Confirmation dans Google Chrome

Ce court billet met en place une boîte de dialogue de confirmation utilisant Bootstrap, apportant un aspect un peu plus joli que la fenêtre système de confirmation.

$(function() {
	$('a[data-confirm]').click(function(ev) {
		var href = $(this).attr('href');
		
		if (!$('#dataConfirmModal').length) {
			$('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Merci de confirmer</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Non</button><a class="btn btn-danger" id="dataConfirmOK">Oui</a></div></div></div></div>');
		}
		$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
		$('#dataConfirmOK').attr('href', href);
		$('#dataConfirmModal').modal({show:true});
		
		return false;
	});
});

Comme on le voit dans le code jQuery, cette action est déclenchée lors d’un clic sur un élément a possédant un attribut data-confirm qui par ailleurs servira de titre à la fenêtre modale. Voici un exemple de lien qui ouvre la modale :

<a href="" data-confirm="Etes-vous certain de vouloir supprimer?">Suppression</a>
Confirmation modale avec Bootstrap
Confirmation modale avec Bootstrap

Testez vous-même avec l’exemple ci-contre : bootstrap-modal.zip

Créer une page d’options de thème dans WordPress

Ajouter une page de configuration de thème Wordpress dans la partie administration.

Il y a quelques temps de cela, ajouter une page de réglages de thème dans la partie administration de WordPress était une tache plutôt difficile, il n’y avait pas beaucoup d’outils, il fallait mettre les mains dans le cambouis. Depuis la version 2.7 de WordPress, les Settings API simplifient grandement la mise en place d’une (ou plusieurs) page d’options. Outre cet énorme avantage d’avoir les outils à portée de main, utiliser les API fournies par WordPress permet d’accroitre la sécurité et l’extensibilité de votre thème.

Continue reading « Créer une page d’options de thème dans WordPress »