{
	"title": "Bulletin de la Web Academy no 23",
	"summary": "Sortie de Chrome 77, partenariat entre MDN et Can I Use et nouveau site de compatibilité pour les courriels",
	"date_published": "2019-09-23",
	"authors": [
		{
			"name": "PolariTOON"
		}
	],
	"tags": [],
	"external_url": "https://polaritoon.github.io/web-academy/news/23-2019-09-23/",
	"id": "web-academy-news-no-23",
	"image": "./*.svg",
	"content_html": "<p><strong>Cet article a initialement été publié sur <em>Discord</em> avant d'être archivé ici et sur <a href=\"//polaritoon.github.io/web-academy/news/23-2019-09-23/\"><em>GitHub</em></a>.</strong></p>\n<div lang=\"fr\">\n\t<ul>\n\t\t<li>\n\t\t\t<p><em>Chrome 77</em> est sorti mardi 10 septembre (oui j'ai un peu de retard) avec quelques changements :</p>\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<p>Du côté du <em>HTML</em> :</p>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<p>Les formulaires <code>&lt;form&gt;&lt;/form&gt;</code> émettent désormais un nouveau type d'évènement, <code>&quot;formdata&quot;</code>, lors de leur soumission, ce qui permet à la fois d'accéder aux paires de clés et de valeurs générées par le formulaire et d'en ajouter à la volée en évitant le recours à l'instanciation <code>new FormData(...)</code> ou l'élément <code>&lt;input type=&quot;hidden&quot;/&gt;</code>, et en particulier dans le cadre des <em>custom elements</em></p>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<p>Le nouvel attribut <code>loading</code> a été introduit et permet avec la valeur <code>&quot;lazy&quot;</code> de différer le chargement des images <code>&lt;img/&gt;</code> et des <em>frames</em> <code>&lt;iframe/&gt;</code> ; celles-ci ne sont pas chargées tant qu'elles sont placées en dehors de l'écran par exemple</p>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<p>L'objet <code>TextMetrics</code> permettant de mesurer du texte à afficher sur un <code>&lt;canvas&gt;</code> et retourné par la méthode <code>CanvasRenderingContext2D.measureText()</code> a été étendu et ne se limite plus seulement à une unique propriété <code>width</code>, mais dispose désormais également des propriétés <code>actualBoundingBoxAscent</code>, <code>actualBoundingBoxDescent</code>, <code>actualBoundingBoxLeft</code>, <code>actualBoundingBoxRight</code>, <code>alphabeticBaseline</code>, <code>emHeightAscent</code>, <code>emHeightDescent</code>, <code>fontBoundingBoxAscent</code>, <code>fontBoundingBoxDescent</code>, <code>hangingBaseline</code>, <code>ideographicBaseline</code> par exemple</p>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<p>Du côté du <em>JS</em> :</p>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<p>L'implémentation de la proposition en stage 3 d'API unifiée <code>Intl.NumberFormat</code> a été étendue et permet de formater des chaînes de caractères localisées pour les devises, les unités, la notation scientifique et la notation ingénieur par exemple</p>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<p>Du côté des <em>CSS</em> :</p>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<p>La propriété <code>content</code>, qui permet notamment de spécifier le contenu (texte, image) générant les pseudo-éléments <code>::before</code> ou <code>::after</code> a été étendue et accepte désormais un texte alternatif (à l'instar de l'attribut <code>alt</code> des éléments <code>&lt;img/&gt;</code>) ; ces pseudo-éléments vont donc désormais pouvoir être lus par les lecteurs d'écrans par exemple</p>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<p>Les propriétés logiques <code>overscroll-behavior-inline</code> et <code>overscroll-behavior-block</code>, versions longues de la propriété <code>overscroll-behavior</code>, ont été implémentées</p>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<p>La propriété <code>tab-size</code> qui définit la taille des tabulations supporte désormais des valeurs non entières</p>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<p>Pour plus d'informations, consultez les pages <a href=\"https://developers.google.com/web/updates/2019/09/nic77,\">https://developers.google.com/web/updates/2019/09/nic77,</a> <a href=\"https://developers.google.com/web/updates/2019/07/devtools\">https://developers.google.com/web/updates/2019/07/devtools</a> et <a href=\"https://v8.dev/blog/v8-release-77\">https://v8.dev/blog/v8-release-77</a></p>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</li>\n\t\t<li>\n\t\t\t<p>Les sites <em>MDN</em> (la référence en termes de documentation pour le <em>web</em>) et <em>Can I Use</em> (le site de compatibilité <em>web</em> le plus connu) ont annoncé un partenariat : désormais les informations de compatibilité du <em>MDN</em> seront affichées lors d'une recherche sur le moteur de recherche <em>Can I Use</em>, portant ainsi le nombre de résultats indexés de 500 à environ 10500 ! l'annonce en détails : <a href=\"https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-data-collaboration/\">https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-data-collaboration/</a></p>\n\t\t</li>\n\t\t<li>\n\t\t\t<p>Si vous ne le saviez pas déjà, sachez qu'un des formats de courriels les plus utilisés est <em>HTML</em> (oui oui on peut coder ses courriels en <em>HTML</em>) ; si vous le saviez déjà, alors vous savez aussi que c'est LE PIRE CALVAIRE pour un développeur de s'assurer de la compatibilité d'un courriel avec les différentes applications de messageries (la cause étant, aussi étonnant que ça puisse paraître, l'absence complète de standard en la matière) ; dans la pratique, il faut ignorer tous les conseils qu'on a pu vous donner pour un coder un site <em>web</em> et tout bricoler à l'aide de tableaux <code>&lt;table&gt;&lt;/table&gt;</code> et d'images <code>&lt;img/&gt;</code> ; eh bien, bonne nouvelle : le nouveau site <em>Can I Email</em>, justement inspiré de <em>Can I Use</em>, recense désormais un certain nombre de données sur l'interopérabilité des différents clients <em>mail</em> ; direction <a href=\"https://www.caniemail.com/\">https://www.caniemail.com/</a> toute ! l'annonce en question : <a href=\"https://www.caniemail.com/news/2019-09-09-introducing-caniemail/\">https://www.caniemail.com/news/2019-09-09-introducing-caniemail/</a></p>\n\t\t</li>\n\t</ul>\n</div>\n",
	"banner_image": "./*.png"
}