Mettre en ligne une nouvelle image, corriger un bogue CSS, ajouter une fonctionnalité JavaScript, ou encore mettre à jour un bout de code HTML sont autant de problématiques d'intégration que de nombreux développeurs doivent gérer au quotidien. Mais lorsque les demandes s’amoncellent, il s'agit d'être productif avant tout… Fort heureusement, il existe un certain nombre de bonnes pratiques faciles à appliquer et pléthore d'outils sur lesquels s'appuyer pour déléguer les tâches répétitives chronophages. Cette session se propose de faire le tour de quelques éléments incontournables dans la boîte à outils de l'intégrateur afin de voir comment gagner en qualité sans pour autant faire une croix sur la rapidité d'exécution.

1. Corinne Schillinger
MIX-IT 2015
Intégration web
qualité & productivité FTW

2. Corinne Schillinger
@schillinger

3. Automatiser les
tâches rébarbatives
Les applications
○ mixture [mixture.io] : Mac & Windows - Gratuit
○ prepros [prepros.io] : Linux, Mac & Windows - 29$
○ codekit [incident57.com/codekit] : Mac - 32$
Les outils en ligne de commande
○ grunt [gruntjs.com]
○ gulp [gulpjs.com]
○ brunch [brunch.io]

4. Emmet :
Éditer du code HTML & CSS
Plugin disponible pour 27 éditeurs de code dont
eclipse/aptana, brackets, dreamweaver, editplus,
komodo edit, notepad++, pspad, sublime text,
textmate, vim, webstorm …
!
[emmet.io/download]

5. CSSComb :
Uniformiser du code CSS
[csscomb.com]
plugin disponible pour grunt, brunch & sublime text

6. Autoprefixer :
Appliquer les préfixes vendeurs
[github.com/postcss/autoprefixer]
plugin disponible pour grunt, gulp, brunch & sublime text
!
/! Respecter la dernière syntaxe recommandée par le W3C /!

7. CSSLint :
Analyser la qualité du code CSS
[csslint.net]
plugin disponible pour grunt, gulp & sublime text

8. CSSCSS :
Identifier les règles redondantes
[zmoazeni.github.com/csscss/]
plugin disponible pour grunt & gulp

9. JSHint :
Détecter les erreurs JavaScript
[jshint.com]
plugin disponible pour grunt, gulp, brunch & sublime text

10. Ressources en ligne :
Trouver des infos fiables
○ caniuse [caniuse.com] : Tableau de compatibilité
○ wiki du W3C [w3.org/wiki/HTML & w3.org/wiki/CSS] :
Description des balises HTML & propriétés CSS
○ mdn [developer.mozilla.org] : Documentation collaborative
/!
ne JAMAIS utiliser W3Schools comme ressource

11. Merci !
des questions ?
Corinne Schillinger @schillinger
MIX-IT 2015