La conférence Paris Web 2018 regroupe plusieurs thèmes autour du web (accessibilité, RGPD, sécurité, UX, IA etc.), les intervenants sont français ou anglophone et travaillent dans des sociétés/organismes plus ou moins important (Mozilla, Google, W3C, IBM etc.).
Les trois jours sont rythmés de conférences et d’ateliers, le tout garni de petits fours et de litres de café.
Voici quelques feedback en vrac sur les grands thèmes présents de l’année 2018.
Accessibilité
Plusieurs handicaps ou situations sont à prendre en compte :
- handicap : visuel, moteur, auditif, cognitif
- situationnel : dans le métro, bras occupé
Notion de design inclusif ou inclusive design : une interface utilisable par tout le monde de façon équitable.
Contraintes à prendre en compte :
- typo :
- police forte
- possibilité de zoomer (hors zoom navigateur)
- 70 caractères maximum par ligne
- hauteur de ligne * 1.5
- éviter les contenus centrer/justifier
- contraste important
- navigation au clavier cohérente (avec la touche tab)
- être indulgent avec la précision sur ce qui est cliquable
- mise en page cohérente
- contenu simple et explicite
- éviter le parallax
- animations subtiles
- être explicite sur les libellés de bouton
- sous-titrer les vidéos
Pour réaliser les tests :
- connexion dégradée
- navigation au clavier
- différent type de device
- liseuse
- avoir un panel varié de testeurs
- kit de test
Ressources intéressantes :
IA
Use case :
- chatbot
- reconnaissance d’image
Outils :
Web Security
SSL
- utiliser TLS 1.3 plus rapide (1 A/R au lieu de 2 pour communiquer)
- HSTS : liste pour le browser des sites accessibles uniquement en HTTPS
- certificats : Let’s Encrypt free, automated, transparent, open source
Cookies
- same-origin policy
- secure cookies vs cookies httponly (pour les données non sensibles)
- samesite cookie
X options
- x-frame-options → deny l’inclusion du site dans une iframe
- x-content-type-options: nosniff → permet au browser de vérifier le mimetype d’un fichier
- x-xss-protection
Content Security Policy
- indique au browser ce qui est autorisé (src, form etc.) → agit comme une firewall
- on peut le générer par le mozilla laboratory addon
- appeler un JS externe avec les attributs crossorigin / integrity
En vrac
- referrer policy
- strict-origin
- CORS
Outils
- https://addons.mozilla.org/en-US/firefox/addon/laboratory-by-mozilla/
- https://www.ssllabs.com/
- https://wiki.mozilla.org/Security/Server_Side_TLS
- https://observatory.mozilla.org/
Web Front-end
Présentation très intéressante et captivante de Charlie Owen
Contenu de la présentation : https://sonniesedge.co.uk/talks/dear-developer
Front-End Playbook : https://github.com/springernature/frontend-playbook
Resource loading
Utiliser HTTP2
Fonctionnalités
- multi request
- preload, priorities
- push (profite du temps de calcul du serveur pour envoyer des ressources)
- cache digest : le browser envoie au serveur ce qu’il a en cache afin qu’il n’envoie que les ressources utiles
- il faut quand même concaténer les ressources à cause de la compression (plus performant sur des grosses ressources)
En vrac
- QUIC
- secondary certificates
- load only what you need
- Brotli compression
- prefetch/async
WebExtensions
Edge/Chrome/Firefox basé sur la même API.
Un plugin = un zip avec du HTML/JS/CSS
Résumé
- promise/callback asynchrones
- sandboxing
- interop à peu près ok pour Chrome/Firefox
- pas sur edge, ni mobile
- une spec existe mais oubliée…
- pas de standard
SVG
Attributs essentielles :
- viewPort (taille)
- preserveAspectRatio
- namespace
SVG en tant qu’image : pas d’event/requête possible → comme une image (static)
SVG interactif : dans une balise object ou iframe → préféré iframe (object non-secure)
Utiliser la puissance du SVG pour faire des sprites → pas besoin d’indiquer les coordonnées de chaque image/picto, seulement un identifiant unique.
Outil SVGO : https://github.com/svg/svgo
