Un geek social et Linuxien de nature

Vous pouvez les trouver ici: Comment entretenir et utiliser une architecture modulaire et réutilisable CSS.

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.

Je suis en train d’étudier activement Symfony2 et Doctrine2 car j’ai fait le saut du coté développement applicatif a temps plein.

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;
  }
}

… 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

Cette année, comme je l’ai dit je fais partie de l’équipe d’organisation de la conférence web techno ConFoo.

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.