La présentation a eu lieu pendant la rencontre d’Avril du HTML5Mtl. Le groupe HTML5Mtl est un sous-projet du W3Québec pour promouvoir la nouvelle norme du W3c. Le HTML5.

Mon expérience sur le sujet est assez forte car depuis 2010 je ne fais que ça, du HTML5. En fait, j’y décrit un sommaire de mes recherches faites dans la dernière année chez Evocatio.

Sommaire de la présentatin

Avec le temps, j’ai envie d’être optimal sur tout ce qui touche le projet, et rendre réutilisable:

• structurer le code de Front-end
• structurer le code Back-end
• le processus de déploiement

Avec tout ça, il y a des avantages qui me semblent très intéressants:

• le processus de conception (wireframes en html) permet de valider toute modification CSS si on brise quelque chose d’autre ailleurs dans l’application
• les programmeurs n’ont pas a inventer de markup html, ils pigent dans le “style-guide”
• au fil du temps, on se retrouve avec le même HTML, et du CSS spécifiquee au projet

Expérience passée

C’était ma 2ème occasion de présenter devant des gens. La première a été durant un devCamp de Microsoft sur le sujet “How to manage big scale HTML/CSS project“. Le même sujet mais avec beaucoup plus de matière.

Finalement

Je crois que je devrais ajouter du contenu et améliorer sa structure. Je compte ajuster ma présentation avec:

• Exemples concrêts pour chaque premeière introduction d’un concept
• Référence cohérente comme hyperlien pour chaque mention
• Ajuster le “ce que j’assume” au début de la présentation, et m’assurer que l’audience sait de quoi je parle
• Donner plus de raisons sur ce que je considère une mauvaise pratique

Vous voulez que je présente?

Je suis disponible pour faire présentation dans votre école, université, groupe. Laissez-moi le savoir.

Mon apprentissage va très bien et j’ai appris beaucoup sur les meilleurs pratiques et je ne me vois plus dutout faire de php sans le Dependency Injection, les pratiques de namespacing et fonctions lambda de PHP 5.3.

Alors, pour étudier, j’ai décidé d’imprimer les pages de la documentation. Malheureusement il y a beaucoup de perte d’espace pour du contenu de navigation et temporel qui se ramasse dans mes PDF.

J’ai converti en PDF plus de cent documents, puis, finalement j’ai repassé les imprimer en ajustant certaines règles CSS.

Je partage ici le CSS que j’ai élaboré pour pouvoir imprimer les documents sans avoir de perte d’espace pour le lecteur tablette.

Comment utiliser

Pour appliquer mon impression, j’ai simplement crée ces blocs CSS, puis inséré ces derniers dans chaque document via l’inspecteur de Google Chrome, puis imprimé.

J’ai aussi contacté les auteurss des sites respectifs pour leur proposer d’y insérer mes règles.

Je pense ne pas être le seul a avoir eu besoin d’imprimer leur documentation.

f

Documentation Doctrine2

Je me suis basé sur les pages de cette section.

J’ai aussi ajusté le fait que les blocs de configuration alternatifs (yml, php, xml) soient tous visible. En imprimé si on veut comparer la syntaxe, on n’a pas javascript pour activer les tabs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

@media print {
  #footer,
  .footer_popout,
  #nav.cls,
  #content .sphinxsidebar,
  #content .related,
  body a[href~="github"] {
     display:none !important;
  }
  #content .bodywrapper {
      margin:0;
  }
  #content .bodywrapper .body {
      max-width:initial;
  }
  #content {
      font-size:120%;
  }
  #content div.body h1,
  #content div.body h2,
  #content div.body h3,
  #content div.body h4,
  #content div.body h5,
  #content div.body h6 {
      background:none;
  }
}

Documentation Symfony2

Sur toutes les sous pages de la documentation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

@media print {
  #content_wrapper .box_download.clear_fix,
  #content_wrapper .main_menu.clear_fix,
  #content_wrapper .main_content .column_01,
  #content_wrapper .main_content .column_02 .navigation,
  #content_wrapper .box_relative_content,
  #content_wrapper .footer .box_menu_footer.clear_fix,
  #content_wrapper .footer h2 img,
  #sln {
      display:none !important;
  }
  #content_wrapper .main_content .column_02 {
      width: 100%;
      padding:0;
      font-size:120%;
  }
  #content_wrapper .footer {
      background-color: #FFF;
  }
  #content_wrapper .footer h2 {
      color: #444;
  }
  #content_wrapper .footer h2:before {
      content: "Symfony";
  }
  #content_wrapper .highlight-jinja {
      font-weight:bold;
      font-size:130%;
      width: 100% !important;
  }
  #content_wrapper .highlight-jinja .hilight {
      background:none;
      border:1px solid #444;
  }
  #content_wrapper .highlight-jinja .hilight:before {
      content: "Code block";
  }
  #content_wrapper .configuration-block.jsactive.clearfix {
 
  }
  #content_wrapper .configuration-block.jsactive ul {
        height:initial !important;
  }
  #content_wrapper .configuration-block.jsactive ul.simple {
        overflow:hidden;
        height:initial !important;
  }
  #content_wrapper div.jsactive div div,
  #content_wrapper div.jsactive div {
        position: relative !important;
  }
  #content_wrapper .configuration-block.jsactive ul.simple li {
        float: none;
  }
  #content_wrapper .configuration-block.jsactive ul.simple li > div{
        display: block !important;
        width: 100% !important;
  }
}

Ça vient de m’arriver. Je vais vous montrer comment j’ai fait.

Ce que j’ai utilisé:

1. Une machine avec OpenSSH que chaque personne à accès (une instance Amazon EC2?)
2. Créer un nouvel utilisateur temporaire pour la personne a aider
3. Ordinateur a réparer roulant Linux/Unix/MacOS/Cygwin (qui a OpenSSH serveur et client)

Ce que j’avait fait avec, en plus de cette procédure, c’est un script RC qui créait une connection permanente, avec une connection SSH qui ne requiert pas de mot de passe.

L’idée étaait que peu importe le lieu ou mon ami se trouve, dès qu’il/elle a un lien à Internet, j’ai accès a son ordinateur portable.

Ma procédure décrit comment créer un lien entre ces deux machines.

L’historique

Il y a quelques années j’ai fait le cadeau a ma mère d’un vieil ordinateur portable. Étant donné qu’il était vieux et qu’elle n’a jamais vraiment utilisé d’ordinateur dans sa vie, j’ai pensé lui configurer un Ubuntu qui avait tout ce qui est nécessaire.

Elle l’a utilisée pendant environ 3 ans. Je crois que ma maman sait maintenant qu’un navigateur web n’est pas nécessairement Internet Explorer. Qu’un document n’est pas obligatoirement un fichier “Word”. Aujourd’hui elle roule sous Windows. Parce que quelqu’un d’autre lui a fait le cadeau et qu’il n’est pas porté a utiliser Linux comme moi.

Toujours est-il que pour l’aider j’utilisait ce processus pour entretenir son ordinateur sans qu’elle ait rien a faire.

0. La machine accessible pour les deux

Surnommons cette machine “vm.somehost.com“.

Il faut que vous et votre ami ayez accès a cette machine sur le port 22. Si c’est votre machine, vous pouvez forcément créer un nouveau compte pour votre ami qu’il utilisera pour initier le tunnel entre sa machine et cet machine.

1. Sur le poste de votre ami

Dans mon exemple, son compte est “user“, sa machine s’appelle “friend-machine“.

Prérequis

1. OpenSSH qui est installé et qui roule.
   En Mac OS, c’est dans Préférences, Partage, il y a une option Accès a distance <rant rel=”windows”>… ah ces changements de noms pour la même chose</rant>.
2. Un compte utilisateur pour vos propres besoins
   … Ou le même que votre ami, s’il vous donne un mot de passe <truc>Pssiiit. passwd sert a changer un mot de passe en terminal!</truc>

Donc, assurez-vous que votre ami…

1. vous fournit un compte pour vous connecter sur sa machine (“friend-machine“)
2. Assurer que OpenSSH  roule

Je vous écrit tout ça de mémoire. Une recherche sur comment activer OpenSSH et créer un utilisateur qui y aura accès sur cette  machine MacOS/Linux vous aidera plus que cet article.

2. Créer le tunnel sur la machine de votre ami

Si tout est fonctionnel, vous avez déjà passé le pire, lui expliquer c’est quoi un utilisateur, si l’accès a distance ou SSH c’est quoi, et pourquoi vous lui demandez d’y accéder.

Expliquez-lui de ne pas utiliesr de mot de passe simple.  Qu’il ne vous donne pas non plus son mot de passe… s’il l’utilise ailleeurs (ou partout, c’est bien d’enseigner ça a ses amis).

Donc… lui faire taper la commande dans un terminal:

Le BUT de cet article, LA commande, UNE LINGE!

1

user@friend-machine$ ssh -nNT -R 1103:localhost:22 friendusername@vm.somehost.com

Ce qui se passera c’est que l’ami (qui a une machine qui s’appelle “friend-machine” dans cet exemple) initie un tunnel SSH silencieux vers “vm.somehost.com” (le serveur accessible par vous et votre ami) qui s’y connecte avec l’usager temporaire (“friendusername”).

Les options utilisés:

• n Sert pour éviter d’afficher des choses sur son terminal n’affiche rien (envoie vers /dev/null)
• N Sert pour préciser de ne pas utiliser la ligne de commande,   une fois connecté, il ne dira rien.
• T Sert à ne pas allouer de pseudo terminal (pseudo-tty)
• R Sert a préciser un Tunnel inversé (Reverse) qui servira a exposer dans (“vm.somehost.com“) au tunnel initié par (“friend-machine“) au port 22 à partir du port 1103 de (“vm.somehost.com“).

3. Vous connecter de VOTRE poste, à la machine commune,  à finalement le poste de votre ami.

Enfin. Il ne reste qu’a vous, vous connecter a cette machine commune, pour accéder au tunnel que vous lui avez fait créer, et utiliser SA machine.

Il ne suffit que de se  connecter  sur vm.somehost.com sous votre compte habituel, initialiser un screen puis vous re-connecter sur le port spécial qui vous donnera accès au poste “friend-machine“.

Facile!!

En ordre:

1
2
3
4
5

renoirb@mon-laptop:~$  ssh vm.somehost.com
renoirb@vm:~$ screen
renoirb@vm: ~$ ssh user@localhost -p 1103
user@friend-machine:~$ uname -a
Darwin friend-machine 10.8.0 Darwin Kernel Version 10.8.0: Tue Jun  7 16:33:36 PDT 2011; root:xnu-1504.15.3~1/RELEASE_I386 i386

En gros, je me connecte a vm.somehost.com, j’y initie une session screen, puis je me re-connecte en SSH sur le port local 1103 ouvert par mon ami user@friend-machine (vous suivez toujours?) et hop! Je suis sur la machine distante.

Screen

Avec Screen, je peut ainsi me détacher du terminal et m’y reconnecter plus tard sans arrêter les choses en cours.

Pour se déconnecter et se reconnecter je fais ainsi

1. Connecter/reconnecter:   screen -dd -R
2. Détacher (combinaison de touches):  ctrl+a d

Finalement

Nous aurons entré quelques lignes de terminal et hop, nous avons accès a la machine de notre ami.  C’est sûr que vous pouvez jouer avec les tunnels et accéder aux autres services, mais je ne vous expliquerai pas comment spécifiquement utiliser chaque cas.

Je vous laisse imaginer les cas de figure possible:

• Faire une mise a jour de paquets
• Réinstaller des programmes
• Accéder a un service qu’il a localement, comme un serveur web, etc.

… J’aime linux!

Sources

1. TechRepublic article Setting up a reverse SSH tunnel
2. HowTo Forge: Reverse SSH Tunneling
3. LinuxJournal: Power sessions with Screen

Ça m’est arrivé une fois de trop cet après midi. Ma solution est simple, utiliser le concept du yaml de symfony qui accepte du PHP, puis de faire UNE switch qu’on peut “flipper” pour pouvoir consulter le log.

Sans interruptions de serveur, ni pertes dangeureuses de performances **

Comment j’ai fait

J’ai ajouté a mon projet un simple bloc conditionnel qui va comme suit.

1. Fichier factories.yml

Ajouter cette condition dans le bloc prod:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

prod:
< ?php 
/**
 * En cas de besoin debug, flipper 0/1 pour pouvoir accéder aux logs.
 *
 * 0 = Pas de debug
 *
 * Ne pas oublier de faire un ./symfony cc :)
 **/
if(0){  
echo'
 
  logging_enabled: true
  logger:
    class: sfAggregateLogger
    param:
      level: debug
      loggers:
        sf_file_degug:
          class: sfFileLogger
          param:
            level: debug
            file: %SF_LOG_DIR%%SF_APP%%SF_ENVIRONMENT%.log
 
';
} else {
echo'
 
  logger:
    class:   sfNoLogger
    param:
      level:   err
      loggers: ~
 
';
} ?>

2. Nettoyer la cache

Tout simplement.

1

./symfony cc

3. Suivre le log

1

tail -f log/frontend_prod.log

Bonsoir!!

… et mis a jour dans une structure différente

Après plusieurs fois a travailler dans Open Office et/ou Word pour faire un beau curriculum vitae. Je dois l’avouer. J’aime pas ça faire du styling a bras.

Mes requis

Il doit surement avoir une méthode web app pour ça. C’est donc avec ce désir que j’ai monté mon requis minimum:

• Web app facile
• Possibilité de switcher le style
• Avoir d’lair d’un CV imprimable, pas d’un microsite… si je voudrait ça, je ferait mon CSS pour ça sur mon propre site
• Pouvoir importer dans plein de formats (word, pdf, text, xml, rtf)
• Avoir un peu de stats
• Pouvoir avoir des variantes

Finalement j’ai tombé par hasard sur la webapp fait par AOL (eh oui, ils ont au moins ça de bien fait semble t’il). J’ai aussi décidé d’ajouter a mon sidebar le badge de téléchargement. De cette façon si il est nécessaire de prendre mon CV, les gens n’auront qu’a se servir.

Mon CV

Curriculum Vitae de Renoir Boulanger sur Emurse

Changements de structure

Étant donné que je parle de mon CV, j’ai décidé de le remanier d’une façon plus orientée ce qui a été fait que les menus détails et technos de chaque projet.

J’ai tenté de couvrir des thèmes comme Implémentation, l’innovation et les sections spécifiques au poste.

Nouvelles sections

J’ai aussi décidé d’ajouter une nouvelle section intitulée “Talents“. Contrairement a Sommaire qui dit ce que j’ai concrètement fait, Talents sert a dire les forces que je crois avoir pour les positions que j’occupe.

Votre avis

Étant dans le monde des TI, et assez polyvalent, est-ce que vous croyez que c’est une bonne approche ma nouvelle structure. Vous avez des suggestions?

Une note rapide de comment j’ai installé Ruby

Procédure

• Créer le dossier de travail et y exécuter le script d’installation RVM

  1 2 3

  mkdir -p ~/work/ruby-install cd ~/work/ruby-install bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head )

• Ajouter au .bashrc

  1	[[ -s "$HOME/.rvm/src/rvm/scripts/rvm" ]] && . "$HOME/.rvm/src/rvm/scripts/rvm"

• Execute rvm and specify the version you want to use

  1	.rvm/bin/rvm install 1.9.2

• Will return:

  1	Installing Ruby from source to: ~/.rvm/rubies/ruby-1.9.2-p180, this may take a while depending on your cpu(s)...

• Set the lastely installed rvm as the default

  1	rvm --default 1.9.2

• Verify the version of Ruby

  1 2	ruby -v ruby 1.9.2p180 (2011-02-18 revision 30909) [x86_64-linux]

• Verify the version of Gem

  1 2	gem -v 1.6.2

Source

• http://www.giantflyingsaucer.com/
• "Using RVM on Ubuntu 10.10", écrit le 19 Octobre, 2010 sur ProductionScale

Pour moi il s’agit d’une toute nouvelle expérience. J’ai jamais organisé de conférence de cette ampleur. J’ai déjà aidé a l’organisation du site web (Americana 2011 fait en Tiki.org) mais de participer activement a sa promotion c’est une toute autre chose.

Joignez-vous à nous du 7 au 11 mars pour un évènement rempli de présentations techniques qui élargiront votre champ d’expertise ainsi que de nombreuses opportunités de réseautage.

Parmis les 150 présentations que propose ConFoo, voici un petit échantillon que nous jugeons fort intéressant:
- Build powerful and smart web applications with Symfony2 – Scalable Architecture 101
- HTML5 – Moving from hacks to solutions
- Develop mobile applications with Flex
- Security 202 - Are you sure your site is secure?
- My $1.8 million dollar startup education
- Et bien d’autres

Notez qu’il reste encore quelques places pour les formations “Démarrer avec Symfony2″ ainsi que “HTML5 Avancé”.

Les formations sont une occasion unique pour bénificer de l’expertise de professionnels au sein d’un petit groupe de 15 passionés du Web.

Enregistrez-vous avant lundi le 28 et épargnez 100$.

Pour plus d’informations consultez le site de confoo: http://ConFoo.ca/

Au plaisir de vous-y voir.

Je l’avait annoncé. Nous avons particié a des événements, joints d’autres. Maintenant, depuis Janvier 2011, à tous les mercredis, nous vous invitons a vous joindre a nos rencontres. Donc,depuis cinq semaines maintenant nous hébergeons au public nos ateliers de travail qu’on appelait nos GeekNights maintenant surnommé devLAB.

Comment devLAB a commencé?

Tout a commencé en 2006. Le besoin est né après plusieurs mois à discuter de technologie a deux (avec Etienne) a prendre une bière au 3Brasseurs et de parler de binaire, netmask… vous savez, des trucs de Geeks. Nous avons joins notre  vieil ami Stephan et nous avons officialisé le pacte que nous avons tenu de 2006-2009. Une fois par semaine tous les Mercredis soir nous suivions ce concept:

1. Se rencontrer peu importe la charge de travail au bureau
2. Faire avancer une idée
3. Utiliser quelque chose qu’on a jamais utilisé avant
4. Pratiquer les méthodologies pour prendre les plis qu’on ne pouvait pas toujours prendre au bureau

Parfois nous en faisions des CodeFests qui duraient une fin de semaine complète. D’autres fois nous invitions des amis a jouer avec nous sur des sujets divers.

Quelques sujets que nous avons couverts

Nous discutions d’a peu près tout ce qui nous tentait. Parfois nous étions inspirés par ce que nous faisions au bureau, d’autres fois, des amis venaient nous montrer leus trucs qui les “faisaient tripper”  (!)

Entre autres…

1. Le Test Driven Development avec Visual Studio
2. Environnement généré en Javascript avec ExtJS
3. Des processus d’auto installation avec CentOS 5 (Kick start)
4. Monter un serveur SMTP avec Debian Etch et Exim connecté avec un backend MySQL
5. Faire des routines de déploiement en XML avec Apache Ant
6. Monter une librairie de migration de base de donnée d’un serveur a l’autre
7. Monter un “Une VM Linux qui sert au développement” et utiliser un tunnel X pour afficher localement ce qui est exécuté dans la VM
8. Monter une sandbox…  sous Mac OS X
9. Un projet de gestion de parc informatique
10. Un projet de gestion de menu utilisant le “Fichier canadien sur les éléments nutrritifs“
11. … et plusieurs autres.

Pourquoi avons nous lancé un autre événement a Montréal

Étant donné qu’aucun événement a Montréal n’avait ce type de concept, nous l’avons ouverts au public. Surtout que les gens autour de nous aimaient  l’idée de nos rencontres.

Notre objectif est clair:

devLAB est  une occasion de partager avec d’autres passsionnés en faisant des rencontres hebdomadaires de travail ou on “met la main à la pâte”.

Parceque ce qu’on veut depuis toujours c’est un endroit ou essayer des trucs. Peu importe la techno. Des chose qu’on peut pas nécessairement faire au bureau, ou chez soi. C’est de se donner une occasion d’améliorer ses capacités.

Evocatio : L’oeuf ou la Poule?

Pour les gens qui se le demandent. Evocatio a commencé A CAUSE des GeekNights.

Pas le contraire.

En fait, nous sommes ouverts a l’aide pour en faire une entité a part entière.

La direction de devLAB

… notre manifeste, en quelque sorte. Pas nécessairement officiel mais va comme suit:

1. Rencontre tous les mercredis 18h30-22h00
2. Avancer un projet de logiciel Libre
3. Ne pas se coincer qu’a une seule technologie ou langage de programmation
4. Travailler en équipe (code pairing) pour apprendre des interventions de son pair
5. Ajouter des facteurs d’inconnus coté technologique
6. Tout le monde est là pour apprendre et jouer a la technologie
7. But non lucratif. Aucune entreprise ne peut être promu par devLAB. Le contraire n’est pas interdit par contre.
8. Bilinguisme from the ground up (Except that my blog is for a french only audience. sorry)

C’est quand?

CE Mercredi, ou le prochain!

Le détail des annonces sur Techentreprise (voir le lien devLAB Montréal), Twitter via @devLABmtl et dans le groupe Facebook.  Vous pouvez aussi être fan de la Page Facebook.

Vous pouvez aussi  devlabmtl.org et qui n’est pas aussi à jour mais qui le sera éventuellement.

Vous voulez vous joindre a nous? Pas de problème! Si vous avez des questions vous pouvez envoyer un courriel a info A dev LAB mtl POINT org

Au plaisir de vous y croiser.

Journée de formation PHP ConFoo 2010

Qu’est-ce que ConFoo: C’est la continuation des conférences annuelles de PHPQuébec avec la participation des autres communautés de passionnés de programmation et de web telles que Python Montreal, W3Québec, l’OWASP Chapitre de Montréal (sécurité logicielle), le MJUG (Montreal Java Usergroup), et Montreal.rb (Ruby Montréal). A chaque an, plus d’une centaine d’experts viennent partager leur experrise sur une semaine complète de formation et de conférence.

Quelques conférenciers cette année

Nous avons invité des gens d’expérience d’un peu partout dans le monde et qui sont impliqués dans la communauté du libre de leur région respective. Pour n’en nommer que quelques uns:

• Fabien Potencier (le créateur de symfony)
• Derick Rethans (contributeur à PHP)
• Alexis Moussine-Pouchkine (Oracle)
• Andy McKay (Mozilla)
• Jackson Harper (Novell, Inc)
• Joshua Hull (Twitter)
• Newman Hunter (Disney)
• Paul Robbins (The New York Times)
• Scott MacVicar (Facebook)

Voir la liste complète des conférenciers.

Quelques conférences

Parmi les présentations, celles qui ont retenu personnellement mon attention.

Pour voir la liste complète des sessions, elle est disponible et a  jour sur le site.

Configure console-data

J’était en train de me monter une Machine Virtuelle minimale de développement (j’en parle ici, ici, ici, ici, et finalement ici aussi).

Toujours est-il que mon Mac commence a être vieux et même s’il est maximisé a 3GB de RAM sur un processeur 1.66 Ghz Core Duo et 500GiB d’espace disque, lorsque je roule Eclipse, c’est lourd! Alors je me suis crée une nouvelle machine virtuelle. Par erreur j’ai mis le mauvais clavier. Imagine essayer de faire une commande terminal sans savoir comment trouver tes touches spéciales (vous savez: |,`’”).

Je sais pas si vous êtes comme moi. J’aime avoir le bon clavier pour pouvoir bien écrire en français et en anglais. Alors je n’ai pas le choix.

… à moins que j’apprenne le Dvorak (un jour!)

Ma solution

J’ai trouvé cet article dans le Wiki de Ubuntu Linux qui portait un nom très peu évocateur («LocaleConf»).

En gros c’est simple, il faut:

• console-tools
• console-data
• localeconf

Installer

apt-get install console-data console-tools
Puis configurer avec dpkg-reconfigure

dpkg-reconfigure console-data

J’ai suivi:

1. «Select keymap from arch list»
2. «Qwerty»
3. «Canadian»
4. «French»

]]> http://renoirboulanger.com/blog/2010/12/comment-configurer-son-clavier-%c2%abkeymap%c2%bb-sous-ubuntu-linux-en-mode-terminal-seulement/feed/ 0