Vous connaissez peut-être le site de gif : les joies du code mais voici en un qui m’a fait assez rire.

quand je connais la procedure de mise en prod sur le bout des doigts

Pour tout les developpeurs et les fans de ski ;)

L’architecture serveur et applicative de Tumblr

Récemment, je suis tombé sur un fabuleux article décrivant toute l’architecture de tumblr. Bien que je ne suis pas un utilisateur de tumblr, j’ai été rapidement fasciné par la quantité de machine !

  • 500 serveurs web
  • 200 serveurs MySQL
  • 30 serveurs memcache
  • 22 serveurs redis
  • 15 serveurs varnish

Je vous laisse apprécier l’article sur le site HighScalability.com

Je reviendrais plus tard avec un article sur la configuration et utilisation de Memcache mais aussi de nginx.

Librairie de gestion du CSS et du JS pour Code Igniter : SmartLoader

SmartLoader

Voici une librairie pour Code igniter, qui vous permettra de gérer facilement votre css et js sur votre site.

En effet, lorsque vous commencez à avoir beaucoup de “controller”, pas mal de css et de js, il vous faut dans un soucis d’optimisation n’inclure que le code js et css nécessaire. C’est pourquoi cette librairie a été développée pour aider le développeur à gérer l’inclusion des fichiers css et js mais aussi le code javascript.

Pour ceux qui connaissent un peu le développement WordPress, cette librairie fonctionne un peu comme la fonction wp_enqueue. Tout on long de votre controlleur, vous pouvez inclure des fichiers js et lors de l’affichage dans le footer par exemple, vous affichez la liste des liens dans des balises <script>.

Description des méthodes

L’objet “smartloader” possède deux objets : “js” et “css”, ces deux attributs représentent les gestionnaires respectifs des CSS et du JS

Voici la décomposition des objets

JS

public function add($args);

Ajoute des liens dans la liste des scripts à inclure, $args peut être un array ou une string (chaque lien doit avoir le http://)

public function jquery($data);

Ajoute du script javascript dans jQuery. Il sera affiché comme ceci

jQuery(document).ready(function($){
... code here ...
});
public function js($data);

Ajoute du javascript entre deux balises <script>. (Javascript classique)

public function loadLinks();

Affiche la liste des liens que vous avez ajouté à la liste.

public function loadJavascript();

Affiche tout le code javascript

CSS

public function add($args);

Ajoute des liens dans la liste des fichiers css à inclure, $args peut être un array ou une string (chaque lien doit avoir le http://)

public function loadLinks();

Affiche la liste des liens que vous avez ajouté à la liste.

Configuration

Il existe un fichier de configuration conf/smartloader.php
Où vous trouverez notamment la configuration de l’autoload de fichier css. En effet, la librairie CSS permet de préchargement automatiquement au lancement du site un dossier complet de css. Les fichiers seront triés en fonction de leurs noms. Renommez les donc 0-base.css, 1-style.css, etc.

Utilisation

Vous trouverez en bas de cet article un lien pour télécharger un projet Code igniter de base, avec la librairie afin de vous donner une idée du résultat rapidement.

Voici les différentes étapes d’installation:

  1. Configurer les paramètres de la librairie dans “conf/smartloader.php”
  2. Mettre la librairie en chargement automatique dans “conf/autoload.php”
  3. Modifier MY_Controller pour charger vos js et css par défaut

Ensuite à l’utilisation, voici un Controller d’exemple:

class Welcome extends MY_Controller {

 public function index()
 {
  /* want to load a js plugin with css */

  $this->smartloader->js->add("http://localhost/js/myplugin.js");

  $this->smartloader->css->add("http://localhost/css/button.css");

  $this->smartloader->js->jquery('$("#body").css("background-color","red");');

  $this->load->view('welcome_message');
 }

}

Et voici la vue associée au controlleur:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>
	<?php echo $this->smartloader->css->loadLinks(); ?>
</head>
<body>

<div id="container">
	<h1>Welcome to CodeIgniter!</h1>

	<div id="body">
		<p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

		<p>If you would like to edit this page you'll find it located at:</p>
		<code>application/views/welcome_message.php</code>

		<p>The corresponding controller for this page is found at:</p>
		<code>application/controllers/welcome.php</code>

		<p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
	</div>

	<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

<?php echo $this->smartloader->js->loadLinks(); ?>
<?php echo $this->smartloader->js->LoadJavascript(); ?>
</body>
</html>

Téléchargement

SmartLoader-1.0.rar

Installer un serveur Subversion sur Mac OS 10.5

Cela fait bien longtemps que je n’avais pas écrit d’article sur mon blog. Voici donc un article sur l’installation et la configuration d’un serveur svn sur Mac OS 10.5 accessible d’internet grâce à apache.

Tout d’abord assurez vous d’avoir activer le partage web dans votre panneau de configuration système.

Ensuite ouvrez votre terminal, pour ceux qui y sont allergiques, je suis désolé je n’ai pas encore trouvé d’applications permettant de gérer tout ça avec une belle interface utilisateur.

Et tapez

sudo apachectl restart

Cela va redémarrer Apache afin de vérifier s’il est bien fonctionnel.

Si oui, vous pouvez passer à la suite, sinon essayez de poser vos questions j’essaierai d’y répondre.

Donc première étape, il faut créer le répertoire qui va recevoir vos référentiels svn (repository).

mkdir /Library/WebServer/svn

Maintenant il faut créer un référentiel :

cd /Library/WebServer/svn
svnadmin create Projet
sudo chown -R www:www ./Projet

Ensuite configurer les droits d’accès à votre repository.
Tout d’abord, nous allons créer un fichier qui contiendra tous les utilisateurs.

htpasswd -c deny.htpasswd 

Voilà si dans l’avenir vous souhaitez y ajouter d’autres utilisateurs, enlever l’option “-c”

 

Ensuite, il faut créer un fichier qui configure les “ACL” de vos référentiels svn, c’est à dire les droits utilisateurs sur chaque projet.

Éditez le fichier /Library/WebServer/svn/deny.htaccesspolicy avec vim.

Tapez “i” pour entrer en mode édition du fichier, et inscrivez le code ci-dessous en modifiant les lignes nécessaires.

[groups]
admins = login
[Projet:/]
@admins = rw

Appuyez sur “echap” pour quitter le mode édition de vim et ensuite :wq pour “write & quit”.

Le groupe admin a le droit d’écriture et de lecture sur le référentiel Projet.
Si vous souhaitez ne mettre qu’un utilisateur sans passer par un groupe, enlever le @ et inscrivez seulement le login de l’utilisateur et ses droits.

Tout cela étant fait, votre svn est configuré. Cependant, il n’est pas joignable de l’exterieur.

Ils faut donc configurer Apache.

Nous allons activer le module svn pour Apache.

Il faut aller modifier le fichier /etc/apache2/httpd.conf

et décommentez les lignes

LoadModule dav_svn_module	libexec/apache2/mod_dav_svn.so
LoadModule authz_svn_module	libexec/apache2/mod_authz_svn.so

Si elles n’existent pas, c’est que vos extensions ne sont pas présentes dans votre version. Pour cela rajouter les deux lignes – la suite de tout les LoadModule.
et copier les deux fichiers dans le dossier /usr/libexec/apache2, vous les trouverez en téléchargement ici

Maintenant, modifier le fichier /etc/apache2/others/subversion.conf

sudo vim /etc/apache2/others/subversion.conf

Tapez “i” pour rentrer en mode édition du fichier, et inscrire le code ci-dessous en modifiant les lignes nécessaires :


<IfModule dav_module>
 <IfModule dav_fs_module>
  <IfModule dav_svn_module>
   <IfModule authz_svn_module>
   <Location /svn>
      DAV svn
      SVNParentPath /Library/WebServer/svn
      AuthzSVNAccessFile /Library/WebServer/svn/deny.htaccesspolicy
      AuthType Basic
      AuthName "Subversion : espace de travail"
      AuthUserFile /Library/WebServer/svn/deny.htpasswd
      Require valid-user
   </Location>

   </IfModule>
  </IfModule>
 </IfModule>
</IfModule>

Appuyez sur “echap” pour quitter le mode d’édition de vim et ensuite :wq pour “write & quit”

Redémarrez Apache et le tour est joué

sudo apachectl restart

Il est maintenant temps de faire le premier import dans votre svn, afin d’y créer la structure globale.

sudo mkdir -p /tmp/projet/{trunk,branches,tags}
svn import /tmp/projet http://localhost/svn/Projet -m "init"

Voila tout est configuré.
Pour gérer ces repos svn pour mac os, j’ai trouvé un logiciel, si cela vous intéresse : Cornerstone

J’espère que cet article à pu vous aider. Bien évidemment, cela n’est pas forcément très “secure” en effet, la connexion passe par le protocole HTTP. Il faudrait, si les données de votre svn sont très sensibles, passer le svn par ssh grâce au protocole svn+ssh://

Installer un environnement de développement Ruby on Rails sur Mac OSX

Récemment, j’ai voulu me mettre au développement Ruby on Rails. Cependant, je n’ai pas réussi du premier coup à installer tout correctement surtout parce que j’avais MAMP d’installé du coup je m’emmêlais les pinceaux entre mes deux apaches, mes chemins d’accées, etc.
Du coup, voici un tutoriel qui vous permettra de configurer correctement un environnement de travail avec Ruby on Rails et Mac OS X Snow Leopard.

Installation de MySQL

Pour cela, allez sur le site de MySQL afin de télécharger le package qui vous permettra de l’installer.

http://www.mysql.com/downloads/mysql/

Personnelement, je préfere les DMG donc une fois téléchargé, vous avez 4 fichiers.

L’installation de MySQL, l’installation du panneau dans les Préférences Systèmes, le daemon pour le lancement automatique et le ReadMe.

Installez donc le serveur MySQL, puis le PrefPane.

Une fois tout installé, vous pouvez utiliser Sequel Pro pour gérer votre base de donnée via un GUI, même si la ligne de commande c’est bien, une belle interface graphique sera parfaite.

Pour cela, allez sur le site de Sequel Pro

Une fois installé, vous pourrez vous connecter à votre serveur. N’oubliez surtout pas de changer le mot de passe root ;)

 

Voilà votre base de donnée est prête à recevoir vos tables et vos projets.

Installation de Ruby

Tout d’abord, il vous faudra installer xcode afin d’avoir tout les outils nécessaires à Ruby. C’est la solution la plus pratique car installer une à une les librairies serait beaucoup trop fastidieux.

Ensuite il faudra mettre à jour  votre programme de gestion de paquet de Ruby : “gem”

Pour cela ouvrez votre terminal:

sudo gem update --system


puis

sudo gem update

Ensuite installer le Framework Rails:

sudo gem install rails

Et maintenant installer le gem mysql2 qui vous permettra de se connecter à votre serveur.

sudo gem install mysql2

Voilà tout est bon pour que vous puissez créer votre premier projet. Pour cela je vous conseille un site :
Normalement, vous aurez une erreur lors du
rake db:create
Cette commande va vous afficher:
rake aborted !
uninitialized constant Mysql2
Voici la solution qui a fonctionné pour moi:
Tout d’abord dessinstallez le gem mysql
sudo gem uninstall mysql2
Ré-installer le gem afin qu’il soit à jour.
gem install mysql2
Maintenant, modifiez votre Gemfile dans le dossier de votre projet. En faite, il faut rajouter la liaison entre le projet et le gem mysql2.
#gem 'sqlite3'
gem 'mysql2'
Voilà, retester votre
rake db:create

tout devrait fonctionner.

WP Social Posts

Sur une idée original de Yoann Marie, j’ai développé un plugin WordPress qui permet de trier ces articles en fonction de leur popularité sur Facebook.

En faites, ce plugin contient plusieurs choses:

  • Un widget qui affiche la liste des articles les plus “liké” sur facebook.
  • Un plugin qui affiche un bouton “j’aime” custom afin de mettre un calback sur le bouton original fournis par facebook. Afin d’incrémenter ou décrémenter un post_meta.

Bien évidemment, tout est paramétrable. Que ce soit le widget ou le style du bouton “j’aime”.

Revenons plus précisèment sur le fonctionnement du plugin.

A l’activation, le plugin va aller récupérer via l’API FQL de Facebook le nombre total de “like” et ainsi créer un post_meta “socialpost_likecount” pour chaque articles.

FQL permet de créer des requêtes SQL dans les tables de Facebook, voici un exemple de requête:

http://api.facebook.com/method/fql.query?query=select%20%20like_count,%20total_count,%20share_count,%20click_count%20from%20link_stat%20where%20url=%22http://www.remiheens.fr%22

Cette requête FQL va donc nous retourner un fichier xml avec les différentes informations demander dans le “select”


<fql_query_response list="true">

<link_stat>

<like_count>2</like_count>

<total_count>3</total_count>

<share_count>1</share_count>

<click_count>0</click_count>

</link_stat>

</fql_query_response>

Ensuite lors de l’utilisation normal, le plugin va afficher le bouton “j’aime” dans une div que vous aurez décider (Via une option du plugin).

Il existe sur ce bouton, deux fonctions de callback, une pour le “like” et une autre pour le “unlike”. C’est deux fonctions vont faire un appel ajax vers le plugin qui lui se chargera d’incrémenter ou de décrémenter la valeur du post_meta “socialposts_likecount”.

Concernant, les différentes options du plugin, vous pourrez modifier entièrement le style du widget.

Je m’explique, vous avez la possibilité de spécifier:

  • une balise html pour l’ouverture de la boucle par exemple un “<ul>”
  • une balise html fermante de boucle “</ul>”
  • un morceau d’html pour afficher chaque résultats, chaque variables comme le permaliens, le titre de l’article seront à ajouter sous forme de marqueurs comme %POST_NAME% pour le titre de l’article. Vous pourrez donc faire “<li>%POST_NAME%</li>”

Ensuite, vous avez la possibilité de modifier le bouton “j’aime”, voici une liste des différentes options:

  • Le type de bouton (juste le compteur, ou un affichage sur une ligne,etc )
  • La langue utilisée pour l’affichage du texte
  • Le “theme” (dark ou light)
  • Si vous souhaitez ou non afficher les avatars des personnes ayant “aimé” votre articles
  • La taille de la balise

Je vais certainement rajouter twitter dans le lot afin de croiser les résultats entre facebook et twitter et ainsi avoir des résultats plus représentatif de la popularité de l’article.

Voici le lien pour télécharger le plugin: WP-SocialPosts

Si vous avez des retours je suis tout à fait preneur, j’essaierai d’y répondre le plus rapidement possible.