Recette du succès en quelques règles simples

Je copie pas souvent du contenu trouvé sur le web, mais cette publication est tellement bien faite que je n’ai pu me retenir!

Recette du succès.

  1. Si tu ne fais jamais d’erreurs, tu ne prends pas assez de risques
  2. Attends-toi à être patient pour obtenir quoi que ce soit qui a de la valeur
  3. Travaille très dur
  4. Recherche et demande des opportunités
  5. Réponds «oui et», à presque tout
    6 Assure toi de remplir tes promesses lorsque tu dis «oui» (!)
  6. Être «Occupé» est une décision en soi
  7. Ne censure pas tes rêves avant d’avoir vraiment tenté de les réaliser
  8. Apprends et construit à partir des rejets que tu as vécu
  9. Un réel échec arrive seulement si tu as l’a acceptée

J’ai trouvé la recette à partir de ce tweet, j’ai pris la liberté de le traduire et d’en conserver une copie sur mon blogue. Aussi j’ai ajouté une règle personnelle après celle du «oui».

Processus de création d’une VM faisant partie d’un parc géré par Salt Stack

A mon emploi actuel je gère un parc de machines virtuelles (VMs) qui est automatisé par un système de gestion de configuration appelé Salt Stack.

Salt stack est un outil permettant de décrire quel est l’état désiré d’un serveur. Comme d’autres outils avec une utilité similaire, Salt Stack peut être utilisé dans des environnements hétérogènes sous GNU/Linux, Mac OS, et Windows, FreeBSD, etc.

L’environment que nous utilisons est un serveur avec des «blades». Chaque «blade» fournit les services créant un cluster OpenStack. Dans le futur, nous risquons d’avoir plus d’un fournisseur OpenStack. Pour automatiser comme nous l’aimons, nous utilisons grandement la ligne de commande avec le paquet python-novaclient.

Chaque machine virtuelle roule une version LTS («Long Term Support») de Ubuntu.

Absolument toutes les configurations sont appliqués via Salt Stack, la seule chose qui est fait manuellement en
ce moment est de créer la nouvelle instance, et de l’ajouter au «master» de Salt Stack.

Même là, ça risque de changer lorsque nous aurons déployé Salt Cloud.

Procédure

Mise à jour Mars 2015: Un nouvel article sur le même sujet a été écrit (en anglais) et illustre comment faire une nouvelle VM avec encore moins d’étapes

  1. Boot une nouvelle node avec Nova

    [email protected]:~$ nova boot --image lucid-minion-template --flavor wpdn.large --key-name renoirb app6
    
  2. Donner un nom en fonction du type de serveur a déployer avec un numéro à la fin. Exemple: app6

    NOTE Dans mon cas, j’ai notamment: app, db, memcached, etc.

  3. Ajoute l’adresse floating dans /srv/pillar/nodes/init.sls comme les autres

    nodes:
      master:
        public:  ####IP PUBLIQUE CACHÉE####
        private: 10.0.0.1
    
      app1:
        public:  ####IP PUBLIQUE CACHÉE####
        private: 10.0.0.7
    
      memcache2:
        public:  ####IP PUBLIQUE CACHÉE####
        private: 10.0.0.4
    
      app5:
        public:  ####IP PUBLIQUE CACHÉE####
        private: 10.0.0.3
    
  4. Prend le fichier /home/ubuntu/runme de n’importe quel autre serveur et colle le dans la nouvelle machine. Puis execute (sudo /bin/bash runme)

  5. Ajouter une ligne dans le nouveau serveir dans /etc/salt/minion.d/master.conf

    id: app6
    

    … Voir les autres nodes

  6. Restart salt-minion

    [email protected]:~$ sudo service salt-minion restart
    
  7. Ajoute la clée au master

    [email protected]:~$ sudo salt-key -a app6
    

    … Le ‘-a foo’ est optionnel et tu peux lister Les nodes.

  8. Run state.highstate

    [email protected]:~$ sudo salt app6 state.highstate
    
  9. Uploader le code via rsync dans la nouvelle app node, puis re-rouler state.highstate (certains scripts prennent pour aquis que le code est déjà déployé)

    [email protected]:~$ sudo salt app6 state.sls code.node_app
    [email protected]:~$ sudo salt app6 state.highstate
    

    Comme je disais, parfois, le premier state.highstate ne marche pas a cause du code pas déployé.

  10. Rafraichir les autorisations pour storage

    [email protected]:~$ sudo salt 'storage*' state.highstate
    [email protected]:~$ sudo salt 'monitor*' state.highstate
    
  11. Updater le hosts file de quelque nodes

    [email protected]:~$ sudo salt 'app*' state.sls hosts
    [email protected]:~$ sudo salt 'db*' state.sls hosts
    [email protected]:~$ sudo salt 'memcache*' state.sls hosts
    

Project idea: Creating a home made OpenStack cluster for development purposes

Think about it. How about using spare computers to create a homemade OpenStack cluster for development.

We can do that from our cloud provider, or create a separate project or even use Wikimedia’s OpenStack infrastructure allowance for the project.

With such setup, one could work locally with his Salt stack (or Puppet, or Ansible) deployment schemes, try them, trash VMs, rebuild.

The beauty of it would be that it could be made in a fashion that would not even modify the computer running the VMs. The cluster member running OpenStack hypervisor would be installed seeded through net boot. Not booting from the network would revert the computer back as if it never been used.

Here is what I think would require to make this happen.

Limitations

  • Not use Computer/Laptop local hard drive
  • Rely only on net boot

Material

  • 1..n Computers/laptop supporting netboot
  • 1 Storage device supporting one or more storage protocol (nfs, samba, sshfs)

Hardware requirements

  • 1 VM providing tftp, dhcp, dns to serve as net boot server that should run outide of the cluster (“Networking node”)
  • 1 VM image of OpenStack controller (“OpS controller”)
  • 1 LiveCD+persistent image with OpenStack preinstalled, configured to use storage device credentials as it’s root filesystem (“OpS Hypervisor”)

Distribution choice factors

  • Networking node can be the smallest Linux possible, on a RaspberryPI, or a modified Router or Network Attached storage device?
  • OpS Hypervisor to be among the supported OpenStack distributions (I think a Ubuntu precise 12.04 LTS or a variant such as Puppy Linux might work too)

To be continued…

I will keep you posted whenever possible on the outcome of my research.

Did you ever do this in your infra. Leave a comment.

How to create a patch and ensure it is applied within Salt Stack

Quick tutorial on how to create a patch and ensure it is applied using salt stack.

Procedure

Creating a patch

  1. Create a copy of original file

    cp file file.orig

  2. Modify file, and test

  3. Create a md5 sum of the modified file for later use

    cat file | md5sum

  4. Revert modification, then prepare patch
    mv file file.mod
    cp file.orig file

  5. Create diff

    diff -Naur file file.mod > file.patch
    

Create Salt stack manifest block in appropriate state file

Add a block similar to this as a patch state definition. Make sure it is refered at least in your top.sls

    /usr/share/ganglia-webfrontend/auth.php:
      file.patch:
        - source: salt://monitor/auth.php.patch
        - hash: md5=480ef2ae17fdfee85585ab887fa1ae5f

References

Procedure to create a re-usable configuration export script to move a virtual machine configuration to a new one

The following procedure is about deprecating an old Linux server, and
move crucial configuration to a new fresh install that has the desired
configuration by cloning it, then applying the Old VM‘s configuration.

The steps will go as follows:

  1. Grab the original machine’s configuration
  2. Clone the New VM that will replace the Old
  3. Disable the Old VM web application

1. Grab the original machine’s configuration

The steps will create a tar file with the configurations.

  • Connect to the production vm (morpheus) through the cloud provider console (e.g. vSphere client, or VCloud director webapp or Open Stack console)
    • Connect through Putty, or your local development VM terminal the follwing lines (the console do not share the clipboard)
ssh [email protected]
  • Create this file
vi ~/make-migrate.sh
  • Enter in vim paste mode
:set paste
  • Paste this content
#!/bin/bash 
cd ~ 
mkdir -p ~/migrate/etc/network 
sudo cp /etc/network/interfaces ~/migrate/etc/network/ 
sudo cp /etc/hostname ~/migrate/etc/ 
sudo cp /etc/resolv.conf ~/migrate/etc/ 
mkdir -p ~/migrate/etc/ssh 
sudo cp /etc/ssh/ssh_host* ~/migrate/etc/ssh/ 
mkdir -p ~/migrate/home/username/.ssh 
cp ~/.ssh/* ~/migrate/home/username/.ssh/ 
mkdir -p ~/migrate/home/username/_prod/app/config 
cp ~/_prod/app/config/parameters.ini ~/migrate/home/username/_prod/app/config 
mkdir -p ~/migrate/etc/apache2/sites-available 
sudo cp /etc/apache2/sites-available/* ~/migrate/etc/apache2/sites-available/ 
sudo cp /etc/resolv.conf ~/migrate/etc/ 
sudo chown -R username:username ~/migrate 
tar cfz ~/migrate.tar.gz ~/migrate 
mv migrate.tar.gz _prod/web/
  • Execute it
/bin/bash ~/make-migrate.sh
  • The latter moves into the
  • Download https://morpheus.networkname.net/migrate.tar.gz

2. Clone the New VM that will replace the Old

This step is about cloning the functionnal VM.

Since it is specific to your cloud management system, I will not describe any way to do so.

Important points to consider while doing so, ensure that you:

  • disable or isolate networking
  • have access to an alternate console

Otherwise you might just create conflicts.

2. Render the production machine unavailable

You should have a copy of the original VM (e.g. morpheus-stg) with the config working the way you want.

This step is specific to the way you might commission or decomission your web app.

You may even not need to decomission it if you have multiple database servers not on the same host.

3. Prepare the New VM to use the Original VM

  • Start the cloned VM
  • Connect through the vCenter console
  • Download the file, sorry, no cut in paste in the cloud provider console :(
  • Assuming you are in /home/username
pwd
/home/username
wget --no-check-certificate https://morpheus.networkname.net/migrate.tar.gz
  • Get the migrate folder from the extracted archive (it will be in a ‘home’ folder after extracting)
tar xfz migrate.tar.gz
mv home/username/migrate .
rm -rf home
  • Disable the network configuration
  sudo /etc/init.d/networking stop
  • Run the following commands:
    • Echo the content of the files inside the migrate/ folder, into their original locations
    • See the file listing:
find migrate/ -type f
  • Create the migrate file original contents
cd migrate
find . -type f > prepare.sh
  • Warning, the following commands we will be using vim to prepare our import script, follow the keyboard types in that sequence:
vim prepare.sh
  • (in the top left corner, where it starts), do:
  • NOTE: FOLLOW BLINDLY THOSE VIM COMMANDS … they written in the form of {modifier key}+{letter}, such as: CTRL+v, SHIFT+A, means the key combination like you would on a Graphical user interface, the + in this list is only to mean together.
dd
CTRL+v
100j
$
y
SHIFT+A
  • Add a few spaces, to make the cursor go further than the longest line
ESC
p
  • The following commands, you have to be in ESC mode, and press ENTER when finished:
:%s/  \./ /
:%s/\./cp \./
  • All is done, write and quit
:wq
  • Check the file
cat prepare.sh
  • You will end up with a file similar to
cp ./home/username/_prod/app/config/parameters.ini    /home/username/_prod/app/config/parameters.ini  
cp ./home/username/.ssh/id_rsa                        /home/username/.ssh/id_rsa  
cp ./home/username/.ssh/geritt_dsa.pub                /home/username/.ssh/geritt_dsa.pub  
cp ./home/username/.ssh/geritt_dsa                    /home/username/.ssh/geritt_dsa  
cp ./home/username/.ssh/authorized_keys2              /home/username/.ssh/authorized_keys2  
cp ./home/username/.ssh/config                        /home/username/.ssh/config  
cp ./home/username/.ssh/known_hosts                   /home/username/.ssh/known_hosts 
cp ./home/username/.ssh/id_rsa.pub                    /home/username/.ssh/id_rsa.pub 
cp ./etc/ssh/ssh_host_rsa_key.pub                     /etc/ssh/ssh_host_rsa_key.pub  
cp ./etc/ssh/ssh_host_dsa_key                         /etc/ssh/ssh_host_dsa_key 
cp ./etc/ssh/ssh_host_dsa_key.pub                     /etc/ssh/ssh_host_dsa_key.pub  
cp ./etc/ssh/ssh_host_ecdsa_key.pub                   /etc/ssh/ssh_host_ecdsa_key.pub 
cp ./etc/ssh/ssh_host_rsa_key                         /etc/ssh/ssh_host_rsa_key  
cp ./etc/ssh/ssh_host_ecdsa_key                       /etc/ssh/ssh_host_ecdsa_key 
cp ./etc/hostname                                     /etc/hostname  
cp ./etc/resolv.conf                                  /etc/resolv.conf  
cp ./etc/network/interfaces                           /etc/network/interfaces
  • Execute that newly created script, first check you are in /home/username/migrate
pwd
/home/username/migrate
  • We’ll run as root
sudo -s
  • Echo a file or two, to test BEFORE->AFTER
cat /etc/network/interfaces
...
cat /etc/hostname
morpheus-stg
  • Now, run the file
/bin/bash ./prepare.sh
  • they should be different :)
cat /etc/network/interfaces
...
cat /etc/hostname
morpheus.networkname.net
  • Make sure the /etc/hosts file reflects, and points at 127.0.0.1
127.0.0.1   localhost morpheus.networkname.net morpheus
  • You can use vim regex like so:
sudo vim /etc/hosts
:%s/morpheus-stg/morpheus/
:wq
  • Use apache command tools to disable the old site and enable the prod ones:
sudo ll /etc/apache/sites-available
...
-rw-r--r-- 1 root root 1052 Feb 20 19:19 /etc/apache2/sites-available/default
-rw-r--r-- 1 root root 7469 Feb  6  2012 /etc/apache2/sites-available/default-ssl
-rw-r--r-- 1 root root 1917 Feb 20 15:48 /etc/apache2/sites-available/ssl
  • Enable only ssl, and default (NOT ‘default-ssl‘)
sudo a2dissite
10-project.local.conf
sudo a2ensite
default ssl
  • Restart the server
sudo service apache2 restart

3. Decomission the original, use the new VM as the new Production

This is, again, specific to the way you might commission or decomission your web app

I am joining W3C to work on the WebPlatform project!

webplatform.org

In a recent post, I was explaining that I resigned my position.

The new exciting project that I was referring to is the WebPlatform project at the W3C.

For people who do not know what the W3C is, it is the main international standards organization for the World Wide Web.

The WebPlatform project is a rapidly growing web development collaborative documentation website.

I would even call it the Web developer’s missing manual for web developers to build quality web applications using the latest techniques.

As for the sponsors, it is backed by well known companies, that we refer to as stewards, such as Adobe, Google, Mozilla, and Microsoft to name a few.

I will contribute to the site as a Developer Operations engineer. My work will be basically to enhance the features and manage the server infrastructure of the site as much as continuing what I already do as a hobbyist speaker.

Roughly, it consist of everything I always did or dreamed of:

  • Work on a flagship site with heavy traffic usage, with and for respected professionals around all the world
  • Use my favourite operating system and tools in System Administration
  • Technical liaison with Open-source communities
  • Develop and maintain the community platform, with web development, ensuring application performance, and implement continuous deployment
  • Speak and participate at conferences related to web standards
  • Contribute to moving the web forward, full-time (!)

If you are living in Montreal and you would like me to share with you on how to participate in this exciting project, just send me an e-mail (my first-name AT w3 dot org) and I’ll gladly answer.

I have just resigned from my new job to start on an exciting project!

In the last months, many things happened to me.

First, I worked for almost two years in a contract at Ericsson, but it ended. Therefore, I started searching for a new job. I had some offers and I had a hard time to pick one.

However, after all, I have just received a new offer to work for the W3C; something I cannot that I could not turn down.

I am very excited to have this opportunity. I would even say more: it is a honour.

I will explain more about it in another moment.

For now, I would just like to thank TEKsystems‘ team and to mention the many good things about working there:

TEKsystems

TEKsystems is a company based in the USA and their main solution development center is located in Montreal Downtown. Most of the projects are web based business applications serving many customers in the united states.

Among the things I enjoyed most were:

  • The management team uses Agile methodologies wherever applicable;
  • The leadership is strong, and the team leads are skillful;
  • The multiple coding technologies in one place: Java, PHP, Frontend, iOS, Android, .NET,
  • The multidisciplinary team: Architecture, Business Analysis, User experience;
  • The members of the team, at the end of the project, get shuffled in the office to start a new one;
  • The internal structure to create mini-projects so we can learn and contribute from other employes;
  • The fact that the office is located in Montreal Downtown, and right beside McGill University where I am starting a Continuing Studies Courses certificate

I worked there for the last month and a half, and it is amazingly well organized company. Based on my own experience in different work contexts, I can say that working with them for web development projects was enjoyable.

If it wasn’t because of my new opportunity, I would have stayed there for a long while.

I am joining W3C to work on the WebPlatform project!

In a recent post, I was explaining that I resigned my position.

The new exciting project that I was referring to is the WebPlatform project at the W3C.

For people who do not know what the W3C is, it is the main international standards organization for the World Wide Web.

The WebPlatform project is a rapidly growing web development collaborative documentation website.

I would even call it the Web developer’s missing manual for web developers to build quality web applications using the latest techniques.

Continue reading

Procédure pour avoir un environnement de dévelopement local facile à configurer avec Apache

Je ne sais pour vous, mais je ne peut plus programmer sans avoir l’environement serveur localement sur ma machine. Changer ou ajouter un fichier VirtualHost pour chaque nouveau projet est assez répétitif. Il doit y avoir une façon automatique de le faire?

Oui.

Ça s’appelle VirtualDocumentRoot

J’ai ce tutoriel qui traîne dans mon Wiki personnel depuis des lustres, et c’est maintenant que je commence a migrer mes projets sous NGINX que je décide de le mettre en ligne. Il n’est jamais trop tard pour publier.

Cette méthode de configuration répond exactement au besoin précis de ne pas avoir a configurer un hôte virtuel apache pour chaque projet.

Avec cette procédure, vous n’aurez qu’a maintenir votre fichier hosts, le reste suivra tout seul.

Vous pouvez appliquer cette technique avec n’importe quelle version du serveur http “Apache”. Cette procédure peut même être faite si vous développez sous Windows ou Mac OS avec les distributions du serveur HTTP Apache sous Windows telles que MAMP, XAMPP, et EasyPHP.

Pourtant avec un serveur web local, ce type de configuration est possible depuis longtemps, il faut simplement savoir comment ça s’appelle: VirtualDocumentRoot.

Voici comment je configure mon environnement LAMP depuis quelques temps.

Procédure

Établissement du standard

Tout commence par une certaine convention. Avec celle-ci, tout devrait suivre automatiquement.

L’idée est de pouvoir accéder a un l’espace de travail du projet A du client B sur ma machine locale. L’adresse locale n’est plus localhost, mais quelque chose de plus explicite.

Ce que j’apprécie le plus de cette méthode car elle permet de conserver dans un dossier parent tout ce qui est spécifique pour le projet et le client. Le code a exécuter qui soit dans un sous-dossier ne feait que du sens.

Par exemple, un projet appelé projectname du client client serait classé dans un dossier sous le chemin /home/renoirb/workspace/client/projectname.

Le code du projet web serait accessible via le serveur web à l’adresse http://projectname.client.dev/ qui pointe vers l’adresse IP de la station de travail locale.

L’espace de travail du projet

IMPORTANT
Il faut que les noms de dossiers soient en minuscule et aucun espace, ni caractères accentués, sinon le serveur Apache risque de ne pas trouver le dossier. Principalement parce que l’adresse entrée dans le navigateur est convertie en bas de case, et que généralement un système d’exploitation qui se respecte fait une différence entre, par exemple ‘Allo’ et ‘allo’.

La convention suggérée va comme suit:

  • chaque projet est classé dans un chemin prévisible, similaire à /home/renoirb/workspace/client/projectname
  • le projet a un dossier web/
  • les autres dossiers au même niveau que web/ peuvent être n’importe quoi d’autre.

Idéalement, la logique applicative ne devrait pas être visible publiquement de toute façon. Seulement le fichier principal appelle l'”autoloader” en dehors du DocumentRoot.

De cette façon le vous pouvez classer tout vos projets du même client, et séparer par projets.

La procédure tient aussi en compte
* L’utilisateur courrant puisse écrire dans son dossier workspace/ avec Apache2 comme s’il était son propre utilisateur avec mpm-itk
* Le nom de domaine utilisé définit dans quel dossier de l’utilisateur chercher

Procédure

  • Assurer que les modules sont chargés
     sudo a2enmod vhost_alias
  • Ajouter le fichier default a la config de apache
     sudo vi /etc/apache2/ports.conf
  • Vérifier qu’il y a ceci:
    NameVirtualHost *:80 
    Listen 80 
    UseCanonicalName Off
  • Modifier le fichier de config du VirtualHost par défaut
  • Fichier de configuration par magique
    sudo vi /etc/apache2/sites-available/default
  • Verifier qu’il y a ce bloc dans <VirtualHost ...>:
    <IfModule mpm_itk_module>
        AssignUserId renoirb users
    </IfModule>
  • Remplacer la mention DocumentRoot par ce format:
    VirtualDocumentRoot /home/renoirb/workspaces/%1/%0/web

Sources

Astuce concernant le rafraîchissement du contenu des pages avec utilisation d’AJAX en exemple

Parmi les listes de courriels que je suis, Accesstech, une question a attiré mon attention et j’ai pensé partager ici la réponse que j’ai donnée avec un exemple en appui.

Concernant le rafraîchissement du contenu des pages avec utilisation d’AJAX, a-t-on trouvé une solution pour
qu’un lecteur d’écran le détecte et retourne l’information à l’utilisateur ?

Si non, quelles solutions alternatives avez-vous trouvées ( en dehors de recharger la page intégralement) ?

Ce que j’ai répondu

Je ne suis pas expert, mais je pense que ce qui arrive et modifie le DOM de façon asynchrone en regard de l’accessibilité, demande au minimum:

1. Faire une ecriture en creeant les elements DOM, puis les inserer

Avec jQuery, par exemple, il est possible de créer un élément DOM de cette façon. Mais attention, l’élément existe dans le document qu’au moment de son insertion via la commande element.append().

<script>
// dom ready...
var newNode = JQuery('<div id=patate>Allo</div>');
</script>

2. Assurer de donner le focus sur le nouvel element inséré

Une fois l’élément construit, il est possible d’ajouter des attributs et évidemment de l’introduire, comme suit:

<script>
// ...
newNode.appendTo('body');
newNode.trigger('focus');
// ...
</script>

Ici, l’élément est inséré à l’intérieur du body, puis un événement focus est appelé. Notez ici que lancer un événement de cette façon peut être fait pour a peu près n’importe quel type d’événement, on peut même créer nos propres événements

3. Bonus: Faire la muse a jour de façon Asynchrone avec jQuery 1.7+ avec le concept de ‘promise’:

Étant donné la nature d’AJAX; dans le sens que la resource demandée n’est pas nécessairement disponible à l’exact moment où la requête est faite. jQuery a instauré un concept qui permet de travailler avec l’objet demandé, et agir au moment de son arrivée: promise.

Dans ce sens, il est maintenant recommandé d’utiliser un callback et le déclarer a la fin de l’action ajax, comme suit:

<script>
var promiseCallback = function(data){   jQuery('#patate').replaceWith(jQuery(data)).trigger('focus');   };
// assumant que c'est du html reçu de /allo.html
var configObj ={dataType: 'html'};
jQuery.ajax('/allo.html', configObj).done( promiseCallback );
</script>

Finalement

Ce qui est souvent oublié c’est que $.ajax.done() est executé après avoir reçu ses donnees.

De cette facon, le refraichissement se fait quand elle est prete et le focus suivra.

Par-contre il y a des precautions a prendre: Assurez-vous que ce code est executé apres un action de l’utilisateur et non pas n’importe quand car l’evenement risque de deplacer le focus du lecteur d’ecran et perdre l’utilisateur.

Espérant que j’ai connecté quelques fils :)

Enfin! J’ai refait mon site

Après plusieurs mois a avoir une partie du projet de fait, et laissé là. J’ai mis en ligne.

C’est la saison des refontes de sites personnels à ce qu’il paraît, beaucoup de monde l’ont refait.

Il n’est pas parfait. Il n’est pas final. Mais il est utilisable et en meilleur état que la version précédente.

Pourtant ça faisait un bon moment que j’avait déjà de quoi de fait. Mais je voulait faire plus grand!

Comme je disait, l’intégration était déjà faite avec mon espace de travail sous Yeoman (Grunt), les patterns de RoughDraft.js et Twitter Bootstrap, tout était prêt sous forme statique (voir le styleguide).

Avant de publier, je voulait en plus;

Puis un moment donné je me suis dit:

Je veut juste publier!

Deux soirs de travail plus tard, tout a été intégré dans WordPress!

C’est une leçon de vie: apprendre en utilisant de nouvelles techniques, mais c’est important aussi de livrer.

Même pour des projets personnels.

Fonctionnalités

  • Écriture sous format Markdown
  • Servi via SSL seulement
  • Caching du contenu avec Memcached
  • Billets balisés avec micro-format RDFa

Outils de travail utilisé

  • Thème enfant de Roots, adapté
  • Twitter Bootstrap, avec mon propre thème utilisant LESS

J’ai aussi crée une maquette statique spécifiquement pour le balisage HTML. Tout ceci dans le but de me concentrer sur l’aspect intégration web du projet, à coté de la partie blogue, base de donnée ou serveur.

Pour ceux que ça intéresse, j’ai commencé a utiliser intensivement Yeoman et RoughDraft.js.

Voir le Styleguide statique de mon site web

À venir

Maintenant que le site est en ligne, j’ai déjà prévu d’autres choses pour l’améliorer.

Notamment:

  • Migration du serveur web sous NGINX avec module SPDY (au lieu d’Apache)
  • Caching HTTP seulement (Varnish ou Memcached, a déterminer)
  • Quelques effets Javascript chargés progressivement
  • Relire, et corriger tout le contenu (ce billet n’a pas été révisé, je l’ai écrit rapidement)
  • Ajouter de nouvelles vues

Mercis

Je voulait donner un beau merci à Gabriela Viana qui est la responsable du design de mon site.

Who else is using feature flipping thing on their web applications?

I am currently reading and collecting ideas on how to present and propose an implementation in my projects.

I want to use:

  • Continuous integration
  • Automated builds
  • Feature flipping

And make all of this quick and easy for anybody in the team.

Feature flipping

This is fairly new to me, but I like the idea. The concept is that the code declares in their own components which features they are contributing to.

This way, we can then totally hide it from sight from the users.

Source control branching

I am currently searching and preparing to introduce to my client ways to work with a few elements in our project.

The idea is that instead of managing a complex branch scheme, and skim to the essential.

A trend was to use GitFlow, then, the project grows, developers do not have all the time to manage everything, and things get out of hands.

It may then look like something similar to that:

Quoting a slide from Zach Holman about branching

It doesn’t seem bad in the first place, but even though Git gives an easy way to do so, if you want to adapt quickly, it can bring overhead.

At least, that’s what Flikr, Github, Twitter, Facebook (so I heard) does.

I’ll keep you posted on what I find on the idea soon-ish.

References

Encapsulate a LDAP DN string using Arrays in PHP

During a project I had to fork privileges assignation logic with information coming from an LDAP server. Since the DN string representing users can be very different for each user: their affiliations and roles. I had to find ways to interpret sub-parts of that string to figure out what privileges to attach to them.

My snippet’s purpose is to get the capability to get a subset of that LDAP DN string, assuming that the first index is more precise than the last, but concatenated would give the full context.

While I was trying to find already made function that explodes that string into manageable arrays in PHP, I realized that there was none. I then decided to contribute it as a comment on the PHP.net website.

Continue reading “Encapsulate a LDAP DN string using Arrays in PHP”

Creating and using Javascript events while combining events on two separates behaviors

I discovered something that chocked me: Did you know that the ‘click’ event is only a string and you can create any event name you may want? Here is an experimentation example.

During web development, it often happens you want to attach events handler on something in your page. A common usage could be you want to flip a plus sign to a minus sign when you click on a button.

<a href="/some/url/324" class="flip-icon" data-target="#generated-324"><i class="icon-plus"></i></a>

Later in a script you may be compelled to do something similar to the following (assuming you are using jQuery):

$(document).ready(function(){
// Rest of the document in document.ready
// DO NOT USE AS-IS, SEE LAST EXAMPLE

    $('.flip-icon.).click(function(event){  
        event.preventDefault(); 
        var clicked = $(this);
        var flipElement = clicked.find('i');
        if (flipElement.hasClass('icon-plus')) {
            flipElement.removeClass('icon-plus').addClass('icon-minus');
        } else {
            flipElement.removeClass('icon-minus').addClass('icon-plus');
        }
    });
});

But what happens if you want to add other events such as, for example, activating an accordion. You may end up with duplicating events and get some collisions.

Did you know that the ‘click’ event is only a string and you can create any event name you may want?

To describe what I am refering to, I have a add an other behavior that will also, in part, require the previous example.

Imagine we have an accordion managed already grabbing the element’s a[data-target] click event handler.

$(document).ready(function(){
// Rest of the document in document.ready
// DO NOT USE AS-IS, SEE LAST EXAMPLE

    $('a[data-target]').click(function(event){
        // do the accordion stuff
    });
});

But, what if for some reason, our page has to reload some sections and our event handler managing the a[data-target] click gets lost

Instead, of creating a click specific event handler (what if we want to change) and be potentially lost with the element to attach event onto.

You can use jQuery’s on method and attach an event to the <body>, a safe element that every document has.

Things to note about the on method:

  • First parameter is an event name, can be ANYTHING (yes, you read it), space separated
  • Second element is on what to listen, can be null
  • a Function object to handle the event

Also, there is nice thing about bubbling.

When an event happens, the event crawls the DOM up to the body (called ‘catch’) then gets back to the triggerer element (called ‘bubbling’) and firing in that order all event handlers.

Knowing all of this now, instead of attaching a single event type handler to a specific element, let’s take advantage of our new knowledge.

'use strict';
$(document).ready(function(){
// Rest of your document

    // Look at the 'flip-my-icon-event', we just made-up that one. See below.
    $('body').on('click flip-my-icon-event', '.flip-icon', function(){
/* Look here     *************************                                       */
        // Let's put it also in a self-executing anonymous, to isolate scope
        (function(triggered){

            // Same as earlier.
            var clicked = $(this);
            var flipElement = clicked.find('i');
            if (flipElement.hasClass('icon-plus')) {
                flipElement.removeClass('icon-plus').addClass('icon-minus');
            } else {
                flipElement.removeClass('icon-minus').addClass('icon-plus');
            }
            // End same as earlier

        })($(this)); // this fires the self-executing.
    });

    $('body').on('click', 'a[data-target]', function(event){
        event.preventDefault();

        // do the accordion stuff
        var collapsible = $($(this).attr('data-target'));
        if (typeof collapsible.attr('data-collapsible') === 'undefined')  {
            collapsible
                .collapse()
                .attr('data-collapsible', 'applied')
                .on('show', function(){
                    jQuery(this).parent().removeClass('is-hidden');
                })
                .on('hide', function(){
                    jQuery(this).parent().addClass('is-hidden');
                });
        // End do the accordion stuff

        jQuery(this).trigger('click').trigger('flip-my-icon-event');
/* Look here                         *******************************        */
        }
    });
});

The following works, because of the following trigger html pattern, as from the begining:

<a href="/some/url/324" class="flip-icon" data-target="#generated-324"><i class="icon-plus"></i></a>

And of the following:

  • We have an icon for .icon-plus and .icon-minus class names
  • The a[data-target] attribute has ALSO a .flip-icon class name
  • The a[data-target] triggers our made-up flip-my-icon-event event to an element that also matches (see the two ‘look here’ comments)

References

Conférence: Comment évaluer le niveau de qualité d’un site web selon les techniques d’intégration web d’actualité

Sur scène durant ma présentation donnée au Web-In 2013 quelques mois avant le WAQ

Cette semaine, je fait une conférence pour la deuxième fois de ma présentation qui décrit les pratiques en intégration web qui sont d’actualités.

La première fois que j’ai présenté c’était pendant le WebIn 2012, et cette-semaine c’est à Québec pendant la conférence Web à Québec 2013 (WAQ).

Cette fois-ci, j’aurai l’honneur de présenter tout juste avant une personne que j’admire; Jonathan Snook.

Audience

L’audience de cette présentation est principalement les gens qui travaillent avec le web, qui engagent des programmeurs/intégrateurs et qui veulent comprendre les dernières tendances et le pourquoi elles sont populaires.

Comme une valeur ajoutée, j’illustre avec des exemples concrêts et compare les outils vis à vis leur utilité.

 

Synopsis

La façon de concevoir des sites Web a beaucoup évolué au cours des deux dernières années. Concevez-vous encore vos sites comme en 2009? Trouvez-vous vos sites lents? Êtes-vous web-responsable? Imaginez si vous étiez capable de gagner du temps.

Comment pouvez-vous être certain que votre pigiste, employé ou fournisseur fait un travail de qualité?

Nous allons couvrir des techniques clé qui permettent d’optimiser le travail, comment être plus efficace avec votre équipe technique et savoir jauger le son niveau d’expérience.

L’objectif de la séance est de donner des outils pour évaluer le niveau de qualité d’un site web; des pistes pour en améliorer la performance et s’assurer de pouvoir en entretenir le code après plusieurs révisions.

 

Trois questions qui seront répondues dans la conférence

  1. Que faire pour optimiser la communication lors de l’établissement du cahier de charge
  2. Quelles techniques ont été découvertes pour éviter le gaspillage lors de la réalisation
  3. Indicateurs de qualité qu’on peut retrouver dans le HTML/CSS

 

Les «slides»


Télécharger en format PDF

 

Réception

Je ne m’attendait pas vraiment au succès de ma présentation durant la conférence, c’était une belle surprise.

Mon ami François Légaré a pris cette photo:

Il y avait foule lors de ma présentation au Web à Québec

 

Merci à

  1. @gabiviana: Gabi Viana pour les visuels
  2. @joplam: Josée Plamondon pour la révision
  3. @cybik: Renaud Lepage pour la révision
  4. @vivrass: Martin Provencher pour l’inspiration de l’angle technique à couvrir.

J’ai décidé d’arrêter de participer au Conseil d’administration du W3Qc

J’annonce ma démission au conseil d’administration du W3Québec et a mes fonctions attachées.

La raison de ma démission est pour me permettre de me concentrer sur des aspects professionnels et personnels. Outre le fait que j’ai commencé des cours à l’université, j’ai aussi décidé d’alléger mes engagements, car je n’ai su répondre a tous les engagements passés et je désire avoir l’esprit tranquille sur le niveau de ma performance en réduisant ces derniers.

Je voudrais remercier tous les membres, car j’ai vraiment aimé faire partie du conseil d’administration du W3Qc et j’en garde de bons souvenirs.

Why would I NOT use my own framework and how I sell usage of Symfony2 and other current PHP 5.3+ goodies to my client

Sometimes, in a mailing list I am following and in real life. People are sometimes explaining their choices in technology to create an e-commerce site using a CMS (“Content Management system”) or their own “homemade” framework. As if there is no good PHP ones out there nowadays.

A CMS is a web application to manage content and when specialized requirements (as in managing other things than pages of content) we have to extend outside of the CMS part. A framework is thus a good friend.

In either case. My opinion is to use the right tool for the right task.

I wrote on the subject because I recently had to defend my technological choice of Symfony2 at my (very-large) client. You can see on these two posts.

I tend to believe that everybody who can program can work with a well architectured CMS/framework whatever software architecture patterns it is following. The priority is that we, programmer, fills the client’s requirements and use what is existing to make us efficient.

Creating a “just for this project”-“super custom”-framework and saying it is using [a buzzword-compliant] architecture principle, doesn’t PROVE IT well made.

Don’t get me wrong. It is not that creating a framework is bad. It is quite an educative hobby. Creating a framework requires a lot of work, dedication and ideally a quantity of skilled people to work to improve, review, test and document. A full time job by itself alone.

My feeling is that the client probably did not asked to create a “framework”.

My problem is more precisely about using it as production-code for their business application, make them pay for it AND what they explicitly asked for. Should they only pay for the features they asked for?

But if you used a well known, documented, framework with an active community. You can use it as a good selling argument in front of the client. It even reassures them that other people can take on your work.

So a question lingers in my mind. If one has the skillset to create his own framework. Why doesn’t he contribute to an existing one?

Personally, all my choices follows the NIH approach. NIH as in “not invented here” see Derek Strobe’s blog post about NIH, a much inspiring read.

The overall idea is that Instead of charging for my time implementing dependency injection, i’ll use an existing one.

Maturity

Talking about maturity. Symfony2 is 2 years old already (compared to Zf2 few month of age).

If it is not only about maturity. Think that the PSR (levels 0, 12)  recommendation is written by a group community leaders who decided to standardize the way to structure libraries so they are inter-operable, PHP FIG was created for this.

I think everything changed since the PHP-FIG group created the PSR* standard and the use of composer to manage dependencies. CMS and other framework projects have to follow the lead, otherwise they may get left behind.

CMSes

I have the feeling that someday CMS will be only a GUI, with full edition capability (see Mercury Editor, or Createjs) using HTML5’s  ContentEditable property. And persisting inside a Storage engine known as “Content Repository”.

This trend is also what some calls “Decoupled Content Management” (also explained here), a VERY promising concept that will give some more chances for us to actually re-use code.

The prospect may even make us be able to really create easily semantic-friendly pages. Created by editors. Regarding semantic web, you should look at “VIE” over here.

The trend is more than mere theory. Many project spawned already. Most notably the Symfony-CMF, Midgard and even known CMS-es such as Drupal and Joomla are currently re-evaluating their projects and following the trend.

Dependencies

A common problem is how can I make sure the project uses proper libraries and a compatible version number.

Many stacks has their own implementations of it. It comes as a simple file stating which version you want, and it takes care of getting the proper version from any configured package we may think of.

The concept is now new and many web development stack has their own implementations. Have a look at package.json (for Javascript), Bundler (for Ruby).

PHP has it’s own now, it’s called Composer, here is how you would declare your dependencies:

{
   "require": {
       "myown/vendor": "master",
       "external/lib": "3.1.*",
       "external2/template": "master"
   }
 }

See: Introduction to composer using Packagist

Add to that any cache management, deployment configuration and other build librariescompilation and protection you may wish to use.

All in all

Nowadays. If you are still:

  • Manually using require_once(…)
  • Adding database queries in your view (WordPress? x_X)
  • Using loops and query hidden in a … templating engine (ExpressionEngine “loops” x_X)

You may need to see the reference I made in this post.

My argument goes as following, mostly for what my (our) clients pays us for:

  • Learn and make good use of framework that has a reputation, good architecture, modular, inter-operable with other, in PHP is not a chimera anymore.
  • NIH please
  • Build functionality for the client who pays you. not maintain the serializer service mechanism… framework do that stuff. client do not care about it
  • SOLID principles?
  • Scaling? (only one database? what if I need to go deploy on a PaaS solution?)

A list of quality indicators we could find on an application or web site

When we write a project specification document, we write functionnal and non-functionnal and other sections. As I want to communicate to my peers and sponsors the level of quality, I thought of creating this list of indicators.

 

Web application quality attributes

  • Frontend should adjust to the user browser (tablet, computer, phone) “Responsive” (already partially in place)
  • Frontend URIs should express what they represent for future/possible conversion to REST service endpoint
  • Frontend response time should be as quick as possible using optimization techniques such as assets minification and non-blocking javascript
  • Code “Domain” (language) should illustrate user intent
  • Frontend to use W3C valid markup following HTML5 recommendations in a “Progressive enhancement” manner;
  • Logging system should declare application state and intents and provide helpful feedback (e.g. “User jshmoe logged in from… Montreal Quebec.”)
  • Front-end error message should be using terms that speaks to the end user
  • Error message and notices should not break layout
  • All message and user read text should be without spelling mistakes or bad translation

 

Frontend as quick to load as possible

Among most recommendations and references about common user frustrations is the time a web page loads.

The idea is to basically push to the queue and forget returning a page back as soon as possible.

Other key aspects are graceful degradation of javascript, functional site even with javascript errors.

Most importantly. The portal frontend can be deployed in any number of instances, with only one address, and be completely transparent to the user.

 

Your opinion

What else should we also include in such a list? I agree that it is not complete as much as a W3C recommendation is. But I believe it is much good in a context of a project outline to explain details you are taking into account while evaluating.

 

Reference

Introduction to the Hypermedia

I was reading around about how to architect in a scalable fashion a web service. You know, the concept of remote procedure call?

At work, I had a conversation about implementing SOAP with an other service, It struck me that they did not talk about REST. Mostly in today’s distributed system, you may want to think twice about if there is something newer that solves better than a solution designed 20 years ago… there must be things learned

So, I wrote this small introduction to what is REST, and the Hypermedia.

Beware, I am not an expert, just a curious that found a nice video and some links about it and trying to learn and apply it properly.

Actually, I heard it for the first time from Darrell Miller in an impressive presentation that blew my mind. Unfortunately I did not pursue up until a few months ago.

Now, I am at a state where I am starting a project and we have to talk to many nodes, I would like to take this opportunity of starting from scratch and use it’s concepts. I am anxious on how it is going to look like.

As for the difference this post started for; I discussed with my colleagues, I compiled these two descriptions with code example in PHP to illustrate.

Continue reading “Introduction to the Hypermedia”

Réflexion a voix-haute: La réalité frustrante des développeurs dans l’industrie du web

Je suis conscient que cette situation n’arrive pas qu’au développeurs web. Je raconte ici ce que j’ai vécu pour illustrer comment je trouve que c’est un non-sens. Je doute qu’il y ait réellement de solution autre que de s’armer d’argumentaires et la pratique.

Parmi les efforts que je trouve admirable est celui fait par l’Alliance Numérique avec son guide des bonnes pratiques.

Résumé d’une histoire de réalisation web

Une personne du monde marketing a une idée. Elle veut que ce soit super beau. Toutes les vues sont faites sur 40 pages faites par Photoshop et doivent être respectés au pixel parfait sur IE6 à Firefox 3. Il y a 70 pages de descriptions de comment javascript doit faire sortir des étoiles partout. Ensuite, pendant la réalisation, la compagnie a pas de budget, généralement elle fait couper les coins ronds aux endroits cruciaux et le site sera bon seulement pour changer ton adresse et inutilisable.