Préprocesseurs CSS et remote editing
Quelles solutions ?
Romain SAUGER
Chef de projet WEB
MEDIAPILOTE - Laval
Sommaire
● Que sont les préprocesseurs CSS ?
● Comment intégrer les préprocesseurs CSS à son workflow
en Remote Editing ?
Que sont les préprocesseurs CSS ?
Les préprocesseurs CSS
● Ce sont des outils permettant de transformer un langage
(avec une syntaxe semblable à CSS), en CS...
Encore trop peu utilisés
1. Nouvelle syntaxe à apprendre
2. La résistance au changement
3. Workflow inadapté
Une nouvelle syntaxe
Ce dont on dispose en plus (par rapport aux CSS)
● Variables
● Mixins
● Règles imbriquées (Nested rules)
● Calcul (Operati...
Variables
Less Sass
Mixins
Règles imbriquées (Nested rules)
Less Sass
Calcul (Operation)
Portée (Scope)
Conditions (Conditional Statement)
Sources
http://www.hongkiat.com/blog/less-basic/
http://www.hongkiat.com/blog/getting-started-saas/
Less VS Sass, lequel choisir ?
● Réponse courte : Sass
● Réponse légèrement plus longue : Sass est meilleur par bien
des a...
Constat
Malgré toutes leurs qualités, les préprocesseurs peinent parfois
à s’imposer en production, pour 2 raisons* :
● Ré...
Le résistance au changement
Ce qu’il faudrait (au moins) éviter :
● Des outils propres à un seul OS
● Imposer un nouvel éd...
le Remote editing, mais pourquoi au juste ?
● Une seule version à maintenir
● Pas de maintenance d’un serveur local.
● Imm...
Workflow “full remote”
● Editeur de texte λ associé à Transmit, WinSCP ou Filezilla.
● Dreamweaver, Coda & notepad ++ : ge...
Workflow “half remote”
On travail sur une copie locale, mais on upload les fichiers
modifié après chaque sauvegarde.
● Sub...
Workflow half remote
Fichier locaux
Liberté du choix de préprocesseur
Comment gérer l’upload lors de la sauvegarde ?
Comment intégrer
les préprocesseurs à son workflow
en remote editing ?
Surtout si en plus c’est sur du mutualisé,
donc san...
Prérequis
● Les fichiers devront être présent en local.
● Il faut trouver un moyen d’envoyer sur le FTP les fichiers
compi...
Cahier des charges (anti-résistance au changement)
● Pas d’OS Spécifique
● Pas de ligne de commande
● Pas de nouvel éditeu...
Solution n°1
Sublime Text + Packages
Sublime Text + Packages
Node.js + Less + Package Lessc
et aussi l’installation des preprocesseurs
Ruby puis les gem Sass, Compass, Susy, etc.
et aussi l’installation des preprocesseurs
Sublime Text + Package SFTP
Avantages :
Solution multi OS
Workflow presque sans faille.
Sublime Text
Sublime Text + Package SFTP
Inconvénients :
● Pas mal de chose à installer, dont parfois en ligne de
commande.
● Et si j’a...
Solution n°2
Editeur de texte λ + Task runner (Grunt, Gulp)
Editeur de texte λ + Task runner (Grunt, Gulp)
Avantage :
Liberté du choix de l’éditeur (même Dreamweaver !)
Accès à tout un tas de fonctionnalités complémentaires, dont...
Inconvénients :
● Courbe d’apprentissage importante
● Ligne de commande là encore quasi indispensable
● Upload FTP “Build ...
Solution n°3
Les outils “tout en un”
Livereload
Codekit
Mixture
Prepros
Les Outils “tout en un”
Livereload
Support très complet
Pas de gestion FTP
Codekit
Mac OS uniquement
Support ultra complet
Pas de gestion FTP
Mixture
Support ultra complet
Pas d’upload FTP “on save”
● Win & Mac
● Liberté de choix d’éditeur de texte
● Richesse des bibliothèques :
o CSS : LESS, SASS, Stylus
o HTML : jade,...
Conclusion
Conclusion
Ne (presque) rien changer : Prepros + n’importe quel editeur
Si déjà sous Sublime Text : pas besoin de task run...
Ouverture
Les fichiers sont de retour en local…
…et si on se mettait à Git ?
2 OS utilisés à égalité
2 vieux outils encore très utilisés
Merci de votre attention
romain.sauger@gmail.com
Préprocesseurs CSS et remote editing : Quelles solutions ? - Human talks Laval
Préprocesseurs CSS et remote editing : Quelles solutions ? - Human talks Laval
Préprocesseurs CSS et remote editing : Quelles solutions ? - Human talks Laval
Préprocesseurs CSS et remote editing : Quelles solutions ? - Human talks Laval
Préprocesseurs CSS et remote editing : Quelles solutions ? - Human talks Laval
Préprocesseurs CSS et remote editing : Quelles solutions ? - Human talks Laval
Préprocesseurs CSS et remote editing : Quelles solutions ? - Human talks Laval
Prochain SlideShare
Chargement dans…5
×

Préprocesseurs CSS et remote editing : Quelles solutions ? - Human talks Laval

411 vues

Publié le

Vous êtes peut-être habitué à travailler directement sur le FTP, sans copie locale des fichiers.

C'est peut-être par choix (une seule version à maintenir, peu de maintenance locale) ou par contrainte (travail en équipe, impossibilité d’installer une version locale du site pour des raisons techniques et de licence).

Quel que soit votre cas, l'accès aux préprocesseurs CSS (et les autres) doit vous sembler bien compliqués.

Il existant pourtant des solutions, sans pour autant changer d'IDE ou d'éditeur de texte (même avec Dreamweaver) !

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
411
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Préprocesseurs CSS et remote editing : Quelles solutions ? - Human talks Laval

  1. 1. Préprocesseurs CSS et remote editing Quelles solutions ?
  2. 2. Romain SAUGER Chef de projet WEB MEDIAPILOTE - Laval
  3. 3. Sommaire ● Que sont les préprocesseurs CSS ? ● Comment intégrer les préprocesseurs CSS à son workflow en Remote Editing ?
  4. 4. Que sont les préprocesseurs CSS ?
  5. 5. Les préprocesseurs CSS ● Ce sont des outils permettant de transformer un langage (avec une syntaxe semblable à CSS), en CSS valide. ● Les deux préprocesseurs les plus utilisés sont Sass et Less. ● Les préprocesseurs apportent une aide à l’écriture de vos feuilles de styles (Gain de temps : DRY) A lire sur humancoders.com : Les idées reçues sur les préprocesseurs CSS (Sass, Less…)
  6. 6. Encore trop peu utilisés 1. Nouvelle syntaxe à apprendre 2. La résistance au changement 3. Workflow inadapté
  7. 7. Une nouvelle syntaxe
  8. 8. Ce dont on dispose en plus (par rapport aux CSS) ● Variables ● Mixins ● Règles imbriquées (Nested rules) ● Calcul (Operation) ● Portée (Scope) ● Conditions (Conditional Statement)
  9. 9. Variables Less Sass
  10. 10. Mixins
  11. 11. Règles imbriquées (Nested rules) Less Sass
  12. 12. Calcul (Operation)
  13. 13. Portée (Scope)
  14. 14. Conditions (Conditional Statement)
  15. 15. Sources http://www.hongkiat.com/blog/less-basic/ http://www.hongkiat.com/blog/getting-started-saas/
  16. 16. Less VS Sass, lequel choisir ? ● Réponse courte : Sass ● Réponse légèrement plus longue : Sass est meilleur par bien des aspects, mais si vous êtes content de Less, pas de problème, c’est déjà une très bonne chose d’utiliser un préprocesseur. ● Réponse détaillée (EN) : https://css-tricks.com/sass-vs-less/
  17. 17. Constat Malgré toutes leurs qualités, les préprocesseurs peinent parfois à s’imposer en production, pour 2 raisons* : ● Résistance au changement ● Workflow inadapté : le remote editing *d’après une étude empirique sur un panel pas représentatif, mais que je côtoie :)
  18. 18. Le résistance au changement Ce qu’il faudrait (au moins) éviter : ● Des outils propres à un seul OS ● Imposer un nouvel éditeur de texte ● Être obligé d’utiliser les lignes de commande Ce qui n’est parfois pas négociable : le remote editing
  19. 19. le Remote editing, mais pourquoi au juste ? ● Une seule version à maintenir ● Pas de maintenance d’un serveur local. ● Immédiateté des interventions en prod. MAIS AUSSI : il est parfois impossible d’installer une version locale du site pour des raisons technique et de licence.
  20. 20. Workflow “full remote” ● Editeur de texte λ associé à Transmit, WinSCP ou Filezilla. ● Dreamweaver, Coda & notepad ++ : gestionnaire de site et FTP intégré. Incompatible avec des outils de préprocessing “en local” Solution : installer le préprocesseur sur le serveur, compilation à la demande : LessPHP ou Sass si le serveur le permet…
  21. 21. Workflow “half remote” On travail sur une copie locale, mais on upload les fichiers modifié après chaque sauvegarde. ● Sublime Text + Package SFTP ● Dreamweaver et son gestionnaire FTP intégré ● Editeur de texte λ + Task runner (Grunt, Gulp) Solution idéale mais incomplête selon l’éditeur : Recours à un preprocesseur externe
  22. 22. Workflow half remote Fichier locaux Liberté du choix de préprocesseur Comment gérer l’upload lors de la sauvegarde ?
  23. 23. Comment intégrer les préprocesseurs à son workflow en remote editing ? Surtout si en plus c’est sur du mutualisé, donc sans librairies exotiques sur le serveur…
  24. 24. Prérequis ● Les fichiers devront être présent en local. ● Il faut trouver un moyen d’envoyer sur le FTP les fichiers compilés (CSS) aussitôt après qu’ils aient été généré.
  25. 25. Cahier des charges (anti-résistance au changement) ● Pas d’OS Spécifique ● Pas de ligne de commande ● Pas de nouvel éditeur ● Pas de nouveau workflow
  26. 26. Solution n°1 Sublime Text + Packages
  27. 27. Sublime Text + Packages
  28. 28. Node.js + Less + Package Lessc et aussi l’installation des preprocesseurs
  29. 29. Ruby puis les gem Sass, Compass, Susy, etc. et aussi l’installation des preprocesseurs
  30. 30. Sublime Text + Package SFTP Avantages : Solution multi OS Workflow presque sans faille. Sublime Text
  31. 31. Sublime Text + Package SFTP Inconvénients : ● Pas mal de chose à installer, dont parfois en ligne de commande. ● Et si j’aime pas Sublime Text ?
  32. 32. Solution n°2 Editeur de texte λ + Task runner (Grunt, Gulp)
  33. 33. Editeur de texte λ + Task runner (Grunt, Gulp)
  34. 34. Avantage : Liberté du choix de l’éditeur (même Dreamweaver !) Accès à tout un tas de fonctionnalités complémentaires, dont : ● Compression ● Concaténation ● Upload FTP Editeur de texte λ + Task runner (Grunt, Gulp)
  35. 35. Inconvénients : ● Courbe d’apprentissage importante ● Ligne de commande là encore quasi indispensable ● Upload FTP “Build & save” moins stable que ST + SFTP Editeur de texte λ + Task runner (Grunt, Gulp)
  36. 36. Solution n°3 Les outils “tout en un”
  37. 37. Livereload Codekit Mixture Prepros Les Outils “tout en un”
  38. 38. Livereload Support très complet Pas de gestion FTP
  39. 39. Codekit Mac OS uniquement Support ultra complet Pas de gestion FTP
  40. 40. Mixture Support ultra complet Pas d’upload FTP “on save”
  41. 41. ● Win & Mac ● Liberté de choix d’éditeur de texte ● Richesse des bibliothèques : o CSS : LESS, SASS, Stylus o HTML : jade, haml, slim, markdown, kit o JS : Coffeescript, Livescript ● FTP intégré : o Build & Upload on save o File filters Prepros
  42. 42. Conclusion
  43. 43. Conclusion Ne (presque) rien changer : Prepros + n’importe quel editeur Si déjà sous Sublime Text : pas besoin de task runners : package Less, Sass et SFTP.
  44. 44. Ouverture Les fichiers sont de retour en local… …et si on se mettait à Git ?
  45. 45. 2 OS utilisés à égalité
  46. 46. 2 vieux outils encore très utilisés
  47. 47. Merci de votre attention romain.sauger@gmail.com

×