Amélioration progressive

Goulven Champenois – Lyon, BlendWebMix 2015

Amélioration progressive

Goulven Champenois – Lyon, BlendWebMix 2015

Le Boston Globe en 2011

sur un Apple Newton (1993-1998)

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

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...

Solution :

Ne PAS dépendre de JS.

Commencer par du HTML qui fonctionne seul.

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

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...

Solution :

HTML5 history API

Tutoriel sur CSS tricks

Attention : pubs et scripts tierspeuvent tuer votre site aussi...

11 Steps to protect against third party script failure

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

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...

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...

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

Partagez vos mots de passeLaissez les intervenants configurer les valeurs non définitivesUtilisez les palettes dynamiques, des effets non destructifs...Partagez vos sources (Git)Commentez votre codeNommez vos calquesSoignez le texte de vos commits, des tickets et commentairesConfigurez les préprocesseurs sur tous les postesFormez vos collègues…Et partez très loin !

Pour sauver vos vacances…

Autrement dit : Ne soyez pas une dépendance

Votre code non plus

« Commencer par la version de base, puis ajouter des améliorations pour ceux qui peuvent les gérer. »

— Tommy Olsson, 2007Dégradation élégante et amélioration progressive (traduction)

Amélioration progressive : La théorie

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

Un HTML bien pensé sera :

Accessible

Facile à styler

Facile à dynamiser

Amélioration progressive : La théorie

Amélioration progressive : Exercices pratiques

Autocomplétion

https://leaverou.github.io/awesomplete/

+=

Styler des inputs radio ou checkbox

http://cdpn.io/e/BoKweG

Zéro Javascript !

En pur CSS, grâce au sélecteur ~

Filtrer une liste

cdpn.io/e/YXxxyj/

Ajouter un Carrousel

http://www.doisjeutiliser.fr/unCarrousel/

Carrousel en pur CSS

Avec ~http://csscience.com/responsiveslidercss3/

Carrousel en pur CSS

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

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

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

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 !