4. 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...
5. Solution :
Ne PAS dépendre de JS.
Commencer par du HTML qui fonctionne seul.
Quand ce n'est pas de
l’amélioration progressive...
6. 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...
7. 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...
8. 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...
9. 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...
10. – Désolé de te déranger pendant tes vacances, mais...
11. 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…
14. « 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
15. 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
16. Un HTML bien pensé sera :
Accessible
Facile à styler
Facile à dynamiser
Amélioration progressive :
La théorie
22. Carrousel en pur CSS
Avec ~
http://csscience.com/responsiveslidercss3/
23. Carrousel en pur CSS
Avec :checked+label
http://thecodeplayer.com/walkthrough/css3-image-
slider-with-stylized-thumbnails
24. 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
25. 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
26. 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 !