Slide 1

Slide 1 text

Amélioration progressive Goulven Champenois – Lyon, BlendWebMix 2015

Slide 2

Slide 2 text

Amélioration progressive Goulven Champenois – Lyon, BlendWebMix 2015 Le Boston Globe en 2011 sur un Apple Newton (1993-1998)

Slide 3

Slide 3 text

Quand ce n'est pas de l’amélioration progressive...

Slide 4

Slide 4 text

Janvier 2014 Sky broadband (FAI anglais) bloque le CDN de jQuery Les abonnés ne peuvent plus utiliser la plupart des sites. Quand ce n'est pas de l’amélioration progressive...

Slide 5

Slide 5 text

Solution : Ne PAS dépendre de JS. Commencer par du HTML qui fonctionne seul. Quand ce n'est pas de l’amélioration progressive...

Slide 6

Slide 6 text

Février 2011 : Lifehacker, Gawker, Gizmodo et d’autres sites n’affichent plus rien. À l'origine : une erreur en JS. http://isolani.co.uk/blog/javascript/ BreakingTheWebWithHashBangs Quand ce n'est pas de l’amélioration progressive...

Slide 7

Slide 7 text

Solution : HTML5 history API Tutoriel sur CSS tricks Attention : pubs et scripts tiers
 peuvent tuer votre site aussi... 11 Steps to protect against third party script failure Quand ce n'est pas de l’amélioration progressive...

Slide 8

Slide 8 text

28 avril 2015 En Chine, tous les sites affichant le bouton « Like » de Facebook deviennent temporairement inaccessibles. http://krebsonsecurity.com/2015/04/china-censors- facebook-net-blocks-sites-with-like-buttons/ Quand ce n'est pas de l’amélioration progressive...

Slide 9

Slide 9 text

Solution : AJAX-include Attendre le chargement de la page pour remplacer un lien vers la page FB par le Javascript du bouton Like. Quand ce n'est pas de l’amélioration progressive...

Slide 10

Slide 10 text

– Désolé de te déranger pendant tes vacances, mais...

Slide 11

Slide 11 text

Partagez vos mots de passe Laissez les intervenants configurer les valeurs non définitives Utilisez les palettes dynamiques, des effets non destructifs... Partagez vos sources (Git) Commentez votre code Nommez vos calques Soignez le texte de vos commits, des tickets et commentaires Configurez les préprocesseurs sur tous les postes Formez vos collègues … Et partez très loin ! Pour sauver vos vacances…

Slide 12

Slide 12 text

Autrement dit : Ne soyez pas une dépendance

Slide 13

Slide 13 text

Votre code non plus

Slide 14

Slide 14 text

« Commencer par la version de base, puis ajouter des améliorations pour ceux qui peuvent les gérer. » — Tommy Olsson, 2007 Dégradation élégante et amélioration progressive (traduction) Amélioration progressive : La théorie

Slide 15

Slide 15 text

1. Écrire le HTML 2. Coder le traitement côté serveur 3. Styler en CSS 4. Dynamiser en JS Amélioration progressive : La théorie

Slide 16

Slide 16 text

Un HTML bien pensé sera : Accessible Facile à styler Facile à dynamiser Amélioration progressive : La théorie

Slide 17

Slide 17 text

Amélioration progressive : Exercices pratiques

Slide 18

Slide 18 text

Autocomplétion https://leaverou.github.io/awesomplete/ + =

Slide 19

Slide 19 text

Styler des inputs radio ou checkbox http://cdpn.io/e/BoKweG Zéro Javascript !

Slide 20

Slide 20 text

En pur CSS, grâce au sélecteur ~ Filtrer une liste cdpn.io/e/YXxxyj/

Slide 21

Slide 21 text

Ajouter un Carrousel http://www.doisjeutiliser.fr/unCarrousel/

Slide 22

Slide 22 text

Carrousel en pur CSS Avec ~
 http://csscience.com/responsiveslidercss3/

Slide 23

Slide 23 text

Carrousel en pur CSS Avec :checked+label 
 http://thecodeplayer.com/walkthrough/css3-image- slider-with-stylized-thumbnails

Slide 24

Slide 24 text

Amélioration progressive : les 4 commandements ๏ Des dépendances tu n’imposeras pas ๏ Par le HTML tu commenceras ๏ Les événements tu captureras ๏ Un retour visuel to donneras

Slide 25

Slide 25 text

Lectures utiles • Everyone has JS, right? http://kryogenix.org/code/browser/ everyonehasjs.html • Myth-Busting Progressive Enhancement http://www.sitepoint.com/javascript- dependency-backlash-myth-busting-progressive-enhancement/ • The True Cost of Progressive Enhancement https://medium.com/ @AaronGustafson/the-true-cost-of-progressive-enhancement-d395b6502979 • I have no idea what the hell I am doing http://bradfrost.com/blog/post/i-have- no-idea-what-the-hell-i-am-doing/ • Sky Broadband mistakenly blocks jQuery, breaks Internet for its users http:// www.theguardian.com/technology/2014/jan/28/sky-broadband-blocks-jquery- web-critical-plugin

Slide 26

Slide 26 text

Crédits photo • Boston Globe responsive website, featuring Apple Newton, Antoine Lefeuvre https://www.flickr.com/photos/ 69797234@N06/7203485148/ • Infinity Pool, Sarah Ackerman : https://www.flickr.com/photos/ sackerman519/5047591825 • Chain expressing freedom, Stephh : https:// commons.wikimedia.org/wiki/File:Chain_expressing_freedom.JPG • SPAM, AJ Cann : https://www.flickr.com/photos/ajc1/519906069 • Merci à Marie-Cécile Paccard pour ses retours !