Cet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nCe mardi est sorti Firefox 75 et les nouveautés sont au rendez-vous :
\n\t\t\tDu côté des outils de développement :
\n\t\t\t\t\tÀ l'instar de celle de Chrome, la console de Firefox propose désormais une évaluation instantanée des expressions qui y sont saisies, du moment qu'elle ne provoquent pas d'effet de bord ; les objets ECMAScript, les élements HTML ou encore les erreurs disposent chacun de leur propre prévisualisation
\n\t\t\t\t\t\tL'outil de mesure d'aires et de distances propose désormais le redimensionnement de la zone mesurée ; c'est bien plus pratique que de s'y reprendre à plusieurs fois ; malheureusement il est pour l'instant pas possible de déplacer cette zone sans la redimensionner
\n\t\t\t\t\t\tLa barre de recherche de l'inspecteur HTML accepte désormais des requêtes de type XPath, pratique si on a besoin de rechercher un élément en particulier au milieu d'une page
\n\t\t\t\t\t\tDu côté de HTML :
\n\t\t\t\t\tLe chargement paresseux des images, tout juste standardisé, est à présent disponible ; en spécifiant l'attribut loading="lazy" sur un élément <img/>, le chargement de l'image n'est opéré que lorsque l'image rentre dans le scrollport (la zone visible d'un élément défilant)
Les nouvelles annotations ARIA aria-description, role="comment", role="mark", role="suggestion" sont disponibles sous Windows et Linux ; il n'y a plus qu'à attendre leur support par les lecteurs d'écrans
Du côté du JS :
\n\t\t\t\t\tLes champs de classes publics et statiques sont maintenant pris en charge ; la syntaxe est la même que pour les champs de classes publics et non statiques, à part que la déclaration doit être précédée du mot-clé static
Le constructeur Intl.Locale a été ajouté et permet d'instancier une locale Unicode pré-configurée
Les éléments <form></form> disposent désormais d'une méthode requestSubmit() qui, contrairement à la méthode submit(), permet d'émuler le clic sur un bouton de soumission de formulaire tout en vérifiant sa validité ; par ailleurs l'évènement "submit" déclenché est désormais de type SubmitEvent avec une propriété submitter dont la valeur correspond à l'élément en question
L'API Web Animations se dote d'une myriade de nouvelles fonctionnalités : valeur initiale et valeur finale implicites, les nouvelles classes AnimationTimeline et DocumentTimeline, la nouvelle propriété timeline des instances de Animation et Document, la nouvelles méthode getAnimations() des classes Animation et Document entre autres
Du côté des CSS :
\n\t\t\t\t\tLes fonctions clamp(), max() et min() ont été ajoutées ; utilisable partout où la fonction calc() pouvait déjà être utilisée, ces nouvelles fonctions permettent de placer des points de rupture sans avoir recours à des media queries portant sur les dimensions, aux propriétés max-height, max-width, min-height et min-width ou encore la technique des CSS Locks
La propriété text-decoration-skip-ink accepte désormais la valeur all
Pour plus d'informations, consultez les pages https://hacks.mozilla.org/2020/04/firefox-75-ambitions-for-april/, https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/75 et https://www.fxsitecompat.dev/en-CA/versions/75/
\n\t\t\t\tSafari 13.1 est en cours de déploiement et apporte aussi ses nouveautés ; comme j'ai oublié de vous faire le point sur Safari 13 en décembre dernier, je vous fait un petit récapitulatif des deux versions :
\n\t\t\tDu côté des outils de développement :
\n\t\t\t\t\tUn nouvel outil permet de visualiser la chronologie des animations CSS
\n\t\t\t\t\t\tLe nouvel onglet "Sources" combine désormais les anciens onglets "Resources" et "Debugger"
\n\t\t\t\t\t\tLe nouvel onglet "Layers" permet de visualiser en 3 dimensions le rendu de la page ; ça me rappelle beaucoup la vue 3D de Firefox, retirée dans la versions 47
\n\t\t\t\t\t\tLe sélecteur de couleur a été refait pour supporter d'autres espaces de couleurs plus étendus que sRGB ; il permet entre autres de comparer les couleurs sRGB aux couleurs Display-P3 (eh oui, en utilisant les bonnes vieilles couleurs sRGB, vous n'avez accès qu'à une partie des couleurs que peut afficher votre ordinateur !)
\n\t\t\t\t\t\tDu côté de HTML :
\n\t\t\t\t\tL'attribut enterkeyhint="" peut être utilisé dans iOS sur les champs de formulaires pour spécifier l'apparence du bouton "Entrée" du clavier virtuel
Du côté du JS :
\n\t\t\t\t\tLa proposition en stage 3 String.prototype.replaceAll() est supportée et permet de remplacer toutes les occurrences d'une chaîne de caractère au sein d'une autre
L'opérateur de fusion nulle ?? a été ajouté
L'API ResizeObserver, alternative moderne à l'évènement "resize" a été ajoutée
L'API Async Clipboard et notamment la propriété navigator.clipboard a été ajoutée
L'API Web Animations a été implémentée
\n\t\t\t\t\t\tL'API Visual Viewport a été ajoutée
\n\t\t\t\t\t\tLes évènements de pointeur sont désormais supportés
\n\t\t\t\t\t\tLes évènement de souris ont aussi été ajoutés sur iPadOS
\n\t\t\t\t\t\tSur iOS et iPadOS, la méthode historique document.execCommand() accepte désormais la valeur "paste" qui permet comme sont nom l'indique de coller le contenu du presse-papier
Du côté des CSS :
\n\t\t\t\t\tLe mode sombre a été ajouté et est détectable avec les media queries appropriées
\n\t\t\t\t\t\tLe module CSS Shadow Parts est désormais supporté et permet de réaliser des composants CSS
\n\t\t\t\t\t\tL'unité de longueur q (le quart de millimètre, très utilisé au Japon) a été ajoutée
La propriété font-family accepte les nouvelles valeurs système ui-monospace, ui-rounded, ui-serif et ui-sans-serif
La propriété line-break accepte la nouvelle valeur anywhere
La nouvelle media query dynamic-range a été ajoutée et permet de tester le support de HDR sur les différents appareils
Du côté de WebDriver :
\n\t\t\t\t\tL'API est désormais supportée sous iOS
\n\t\t\t\t\t\tPour plus d'informations, consultez les pages https://webkit.org/blog/9674/new-webkit-features-in-safari-13/ et https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/ et je vous rappelle que si vous n'avez pas d'appareil Apple et que vous êtes sous Linux (plus exactement sous une distribution intégrant Gnome, comme Ubuntu) vous pouvez quand même tester ces fonctionnalités en installant Gnome Web (encore appelé Epiphany) qui est basé sur Webkit, comme Safari
\n\t\t\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nCette semaine se « réunissait » à nouveau le TC39 pour spécifier JavaScript et pour la toute première fois complètement à distance ! on notera l'addition suivante :
\n\t\t\tLa proposition import.meta a été standardisée en atteignant le stage 4 du processus de standardisation du TC39 ; dans tous les cas, cet objet un peu spécial, disponible uniquement dans les modules, était déjà supporté depuis quelques temps par Node.js, Deno et l'ensemble des navigateurs ; les plus attentifs auront noté l'utilisation d'une notation étrange, puisqu'import est un mot-clé du langage (mais ce n'est pas la première fois en JS, il y avait déjà new.target dans ce genre-là avant !) ; mais à quoi sert cet objet ? la spécification ECMAScript le définit (quasiment) comme un objet vide, mais les spécification de langages hôtes peuvent lui définir des propriétés supplémentaires ; c'est le cas de HTML qui définit import.meta.url qui donne l'URL du module courant (c'est en quelque sorte l'équivalent de __filename des modules CommonJS de Node.js) ; Deno lui ajoute aussi une propriété import.meta.main qui indique si le module est le point d'entrée du programme ; pour plus d'informations, consultez la proposition https://github.com/tc39/proposal-import-meta et la documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta
Bert Bos, ancien éditeur de la spécification css, s'est prononcé sur le nommage des prochaines versions du langage ; d'un point de vue marketing, CSS4 sonnerait bien, mais n'aurait en fait pas trop de sens puisque CSS3 est un standard évolutif et donc en lui-même plus versionné (ses modules le sont bien par contre), tout comme HTML ; alors que les avis divergent encore au sein du CSSWG quant à sa responsabilité de définir des versions du langage, un groupe communautaire W3C s'est formé pour tenter de définir CSS4 ; lisez le billet de blog : https://www.w3.org/blog/2020/03/css-x/
\n\t\tGoogle avait annoncé le 18 mars, que les mises à jour majeures de Chrome était stoppée jusqu'à nouvel ordre, repoussant ainsi la sortie de Chrome 81 initialement prévue le jour-même; le 26 mars, la date du 7 avril a été donnée pour Chrome 81 et la version 82 a été annulée ; dans les prochaines semaines, ce sont donc les versions 81 puis 83 qui seront déployées ; par ailleurs, les autres navigateurs basés sur Chromium semblent se conformer à la décision de Google ; l'annonce en détails : https://chromereleases.googleblog.com/2020/03/chrome-and-chrome-os-release-updates.html
\n\t\tChrome 81 a donc été repoussé, et c'est donc le retrait de TLS 1.0 et de TLS 1.1 au profit de TLS 1.2 qui a été repoussé également ; auparavant, Mozilla avait pris la même décision en annulant leur retrait de Firefox 74 sorti le 10 mars ; la raison évoquée est de ne pas bloquer l'accès aux sites gouvernementaux et à la plateforme de visio-conférence Jitsi qui s'avèrent être des ressources critiques ces temps-ci ; voici la note de Mozilla en question : https://www.mozilla.org/en-US/firefox/74.0/releasenotes/#note-788289
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nDepuis quelques années déjà, npm, la société qui gère le principal gestionnaire de paquets éponyme inclus dans Node.js ainsi que le principal registre de paquets, faisait parler d'elle plus en mal qu'en bien : changement de gouvernance, démissions, licenciements... à tel point qu'une bonne partie de la communauté s'était mise à appeler à son rachat par des entreprises au but... moins lucratif, telles que Mozilla ; de son côté, GitHub a plus récemment lancé son propre registre de paquets multi-langages, y compris compatible avec le gestionnaire de paquets npm ; aujourd'hui, npm annonce finalement son rachat par GitHub, son concurrent en quelque sorte ; c'est donc bien Microsoft qui joue une nouvelle fois la carte de l'ouverture à l'open source ; voici l'annonce de npm : https://blog.npmjs.org/post/612764866888007680/next-phase-montage et celle de GitHub : https://github.blog/2020-03-16-npm-is-joining-github/
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nAllen Wirfs-Brock, éditeur de ECMAScript 6 / 2015, avec la participation de Brendan Eich, le créateur de JavaScript lui-même, a publié la première version de JavaScript: The First 20 Years son papier pour HOPL-IV, la tant attendue 4e conférence sur l'histoire des langages de programmation prévue en juin 2020 (rappelons que les éditions précédentes datent de 1978, 1993 et 2007) ; dans ce document de 190 pages, il retrace la naissance, l'évolution de JavaScript :js dans les navigateurs ainsi que le travail de spécification du langage au TC39, et en particulier l'échec de ECMAScript 4 avant l'essor qu'a connu Harmony ; voici le lien vers la version pré-imprimée du papier en question : https://zenodo.org/record/3707008 ; si vous voulez un avant-goût, vous pouvez lire le making of ici : http://www.wirfs-brock.com/allen/posts/866 ou pour commencer l'introduction ici : http://www.wirfs-brock.com/allen/posts/855 ; et si vous souhaitez plus d'informations sur la conférence elle-même (car JavaScript ne sera pas le seul langage abordé !), voici le lien vers le site officiel : https://hopl4.sigplan.org/ ; bonne lecture !
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nFirefox 74 est sorti hier et apporte les nouveautés suivantes :
\n\t\t\tDu côté de HTTP :
\n\t\t\t\t\tTLS 1.0 et TLS 1.1 sont désormais désactivés par défaut (au profit des nouvelles version TLS 1.2 et TLS 1.3), dans le cadre d'un effort commun des différents navigateurs
\n\t\t\t\t\t\tCORP et FP sont désormais supportés via l'en-tête Cross-Origin-Resource-Policy et un sous-ensemble de valeurs de l'en-tête Feature-Policy respectivement
Du côté de HTML :
\n\t\t\t\t\tL'attribut allow="" et la propriété allow des éléments <iframe></iframe> sont désormais supportés et permettent de contrôler finement les permissions d'une page embarquée ; à noter que la géolocalisation, le plein-écran, l'accès à la caméra et au micro et l'enregistrement de l'écran depuis une page embarquée d'une autre origine sont désormais désactivés par défaut
Du côté des CSS :
\n\t\t\t\t\tLa propriété text-underline-position, qui permet de spécifier où dessiner la ligne de soulignage, a été implémentée
Les propriétés text-underline-offset et text-decoration-thickness acceptent désormais des pourcentages (relatifs à une valeur de 1em de la fonte)
La propriété outline-style accepte désormais la valeur auto, qui correspond au style d'outline natif du navigateur ou bien du système ; dans le futur, elle pourrait devenir la nouvelle valeur initiale de la propriété
Les propriétés préfixées -moz-columns, -moz-column-count, -moz-column-fill, -moz-column-gap, -moz-column-rule, -moz-column-rule-color, -moz-column-rule-style, -moz-column-rule-width, -moz-column-span et -moz-column-width, non nécessaires pour la rétro-compatibilité, ont été retirées car leur versions non préfixées ont terminé d'être implémentées dans Firefox 71
Du côté du JS :
\n\t\t\t\t\tÀ l'instar de Chrome 80 le mois dernier, Firefox 74 supporte désormais les opérateurs de chaînage optionnel ?., ?.[] et ?.()
Les fonctions de décompilation Object.prototype.toSource() et uneval(), qui datent de l'époque de Netscape, ont pu être retirées
La méthode IDBTransaction.prototype.commit() a été ajoutée
L'évènement languagechange est désormais supporté dans les Workers
L'objet TextMetrics retourné par la méthode CanvasRenderingContext2D.prototype.measureText() dispose désormais des nouvelles propriétés actualBoundingBoxAscent, actualBoundingBoxDescent, actualBoundingBoxLeft et actualBoundingBoxRight et non plus seulement width
Au niveau de la gestion des fichiers, les méthodes HTMLCanvasElement.prototype.mozGetAsFile , IDBDatabase.prototype.mozCreateFileHandle() et IDBMutableFile.prototype.getFile() ont été retirées
La propriété isReload des évènements de type FetchEvent a été retirée, conformément à la dernière version de la spécification
La méthode document.createEvent() ne permet plus de créer les évènements de types non-standards KeyEvents, MouseScrollEvents, ScrollAreaEvent et TimeEvent
Pour plus d'informations, consultez les pages https://hacks.mozilla.org/2020/03/security-means-more-with-firefox-74-2/, https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/74 et https://www.fxsitecompat.dev/en-CA/versions/74/
\n\t\t\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nLa semaine dernière est sorti Firefox 73 ; rapide tour des nouveautés :
\n\t\t\tDu côté des CSS :
\n\t\t\t\t\tLes propriétés logiques overscroll-behavior-block et overscroll-behavior-inlinesont désormais suportées
Les propriétés letter-spacing et word-spacing ne fonctionnent plus seulement en HTML mais aussi en SVG
Du côté du JS :
\n\t\t\t\t\tLa méthode Intl.DateTimeFormat.prototype.formatToParts() supporte désormais les options relatedYear et yearName
Du côté de MathML :
\n\t\t\t\t\tL'élément <mfenced></mfenced> a été retiré
Du côté de WebDriver (vous ai-je déjà parlé de WebDriver ? c'est une des APIs standardisées par le W3C qui permettent de contrôler un navigateur ; à noter que des alternatives émergentes sont puppeteer de Google et playwright de Microsoft) :
\n\t\t\t\t\tWebDriver:Print a été implémenté et permet d'imprimer un document dans un PDF ; il est donc par exemple possible de convertir automatiquement un document HTML en PDF, comme par exemple les cours de la WebAcademy ! (jusqu'à maintenant je devais le faire à la main)
Pour plus d'informations, consultez les pages https://hacks.mozilla.org/2020/02/firefox-73-is-upon-us/, https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/73 et https://www.fxsitecompat.dev/en-CA/versions/73/
\n\t\t\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nMardi dernier est sorti Chrome 80 (et vendredi dernier Edge 80, qui suit le même cycle de développement), version symbolique pour son moteur JavaScript V8 qui atteint sa version... v8 ; il s'agit pour le navigateur d'une version qui ne brille pas que par l'ajout de nouvelles fonctionnalités, mais aussi par les nombreux retraits, notamment du côté des web components, et c'est somme toute une bonne nouvelle !
\n\t\t\tDu côté des outils de développements :
\n\t\t\t\t\tLa console supporte désormais les rédéclarations d'identifiants avec let et class, ce qui facilite énormément la réexécution du code précédent ; attention, il s'agit bien là d'une liberté prise vis-à-vis du standard ECMAScript ; ce n'est en aucun cas possible dans vos scripts !
Dans l'onglet Sources, il est désormais possible de déboguer les sources des programmes compilés en WebAssembly, et non plus seulement les instructions machine WebAssembly elles-mêmes, grâce au standard DWARF ; autrement dit, si vous écrivez votre code en C par exemple, vous pourrez déboguer le code C lui-même
\n\t\t\t\t\t\tDu côté de HTML :
\n\t\t\t\t\tLa version v0 des custom elements et du shadow DOM n'est désormais plus supportée, la version v1 étant désormais approuvée et supportée par tous les navigateurs majeurs
\n\t\t\t\t\t\tLes imports HTML ont également été retirés ; la voie actuellement explorée par Microsoft pour permettre ce genre de fonctionnalité est de passer par des modules HTML importables en tant que modules ECMAScript, mais pour ça il faudra d'abord très certainement une standardisation auprès du TC39 des attributs de modules ECMAScript
\n\t\t\t\t\t\tLa recherche programmatique dans une page d'un terme particulier n'est plus une peine, grâce à la nouvelle fonctionnalité Scroll To Text Fragment ; par exemple si vous cherchez le terme documents dans la page https://example.org/, vous pouvez vous rendre à l'adresse https://example.org/#:~:text=documents ; la syntaxe, plutôt étrange au premier abord, résulte en fait d'une étude minutieuse des options disponibles préservant la rétro-compatibilité
Du côté des CSS :
\n\t\t\t\t\tLa valeur anywhere des propriétés line-break et overflow-wrap est désormais supportée et peut constituer une bonne alternative aux valeurs break-all et break-word de la propriété word-break
Du côté des JS :
\n\t\t\t\t\tL'opérateur de fusion nulle ?? est désormais supporté, et fonctionne comme l'opérateur ||, en n'évaluant l'opérande droit que si l'opérande gauche est null ou undefined
Les opérateurs ?., ?.[] et ?.(), qui permettent de chaîner optionnellement des accès à des propriétés ou bien des appels de fonctions, ont aussi été ajoutés
Les Workers acceptent désormais un argument optionnel {type: "module"} permettant de les interpréter comme des modules ECMAScript, ce qui permet donc d'avoir recours à l'instruction import ! les Service Workers ne sont pas encore concernés par cet ajout
Les constructeurs CompressionStream et DecompressionStream permettent désormais, comme leurs noms l'indiquent, de faire de la compression et décompression (gzip et deflate pour le moment)
Du côté de SVG :
\n\t\t\t\t\tChrome supporte enfin les favicons SVG (vous savez, l'icône qui apparaît dans l'onglet du navigateur) ; ça ouvre de nouvelles possibilités dans tous les navigateurs : qualité conservée quelque soit la résolution de l'écran, mais aussi icône adaptative en fonction des media queries CSS (par exemple une icône différente selon que le thème du navigateur est clair ou sombre)
\n\t\t\t\t\t\tPour plus d'informations, consultez les pages https://developers.google.com/web/updates/2020/02/nic80, https://developers.google.com/web/updates/2019/12/devtools et https://v8.dev/blog/v8-release-80
\n\t\t\t\tDe mardi à jeudi dernier se réunissait à nouveau le TC39 pour spécifier JavaScript ; lors de la réunion, deux propositions relatives à l'internationalisation ont été standardisées :
\n\t\t\tLe constructeur Intl.Locale permet d'analyser une chaîne de caractères spécifiant une locale Unicode ; consultez la proposition https://github.com/tc39/proposal-intl-locale ou bien la documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Locale
Le constructeur Intl.NumberFormat permet de manipuler des formats de nombres avec des unités physiques ou des devises, éventuellement en notation scientifique et en spécifiant des règles de signes ; consultez la proposition https://github.com/tc39/proposal-unified-intl-numberformat ou bien la documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
Evelyn Woods nous raconte dans un article de blog l'évolution de la mise en page web et des CSS durant ces 30 dernières années du point de vue des développeurs ; c'est un peu long, mais c'est à lire absolument ! et sans oublier les premiers commentaires qui sont assez incroyables ! c'est par ici : https://eev.ee/blog/2020/02/01/old-css-new-css/ !
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\n13 mois après avoir été annoncée par Microsoft, la nouvelle version d'Edge basée sur Chromium 79 est sortie mercredi dernier ; après l'arrêt en 2013 de Presto, l'ancien moteur de rendu derrière Opera, c'est donc au tour de EdgeHTML de s'éteindre ; l'ancien moteur JavaScript Chakra, bien que toujours en développement, n'est pas non plus dans cette nouvelle mouture du navigateur ; si d'un côté il s'agit d'une nouvelle perte cruciale pour la diversité du web, d'un autre côté cela apporte un élan de modernisation dans le paysage des navigateurs ; petit tour des nouveautés qui sont donc très nombreuses :
\n\t\t\tLa nouvelle version, qui ne vient apparemment pas avec la mise à jour de Windows 10, est disponible au téléchargement pour Windows 7+ (d'ailleurs Windows 7 ne reçoit plus de mises à jour de sécurité depuis mardi), pour Mac et il se dit que ça ne saurait tarder pour Linux ; rappelons que jusque là, le dernier navigateur Microsoft à avoir été disponible pour Mac était Internet Explorer 5 de 2000 à 2006 ; c'étaient alors encore les débuts d'HTML 4, de CSS 2 et de ECMAScript 3 ; Firefox, Safari et Chrome n'existaient pas...
\n\t\t\t\tDu côté de HTTP :
\n\t\t\t\t\tAjout du support de CSP 3, HTTP Client Hints, Network Error Logging, Origin-Signed HTTP Exchanges, Preconnect Resource Hints, Public Key Pinning Extension for HTTP, SPDY/3, TLS 1.3...
\n\t\t\t\t\t\tDu côté du HTML :
\n\t\t\t\t\tAjout du support des éléments <details></details>, <dialog></dialog>, <summary></summary>...
Ajout du support des attributs accept="", inputmode="", preload="", reversed="", srcdoc=""...
Ajout du support des images APNG, des Custom Elements, du Shadow DOM, du manifeste Web App...
\n\t\t\t\t\t\tDu côté du JS :
\n\t\t\t\t\tAjout du support des itérateurs et générateurs asynchrones, de la boucle for await (... of ...) {}), de l'opérateur ... pour les objets, de Array.prototype.flat() et Array.prototype.flatMap(), des BigInts, de l'import dynamique import(), de Shared Memory and Atomics...
Ajout du support de requestIdleCallback(), HTMLCanvasElement.prototype.toBlob(), SVGElement.prototype.dataset, de EventSource, de TextDecoder, de TextEncoder, du drag and wrop de dossiers, du cinquième paramètre pour l'évènement "error" dans les Workers, des Shared Web Workers...
Ajout du support des APIs Accelerometer, Background Sync, Battery Status, CSS Font Loading, CSSOM View smooth scroll, CSS Paint, File Writer, Geometry Interfaces, Gyroscope, IndexedDB Arrays and MultiEntry, Mangetometer, Media Capture, Media Fragments, Media Recorder, Media Session, Orientation Sensor, Payment Handler, Performance Observer, Picture in Picture, Quota Management, Resize Observer, RTC Data Channels, Screen Orientation, Speech Recognition, SVG+SMIL Animation, Vibration, Web Animations, Web Bluetooth, Web Crypto, Web MIDI, Web Share, Web Speech, Web SQL Database, Web USB...
\n\t\t\t\t\t\tDu côté des CSS :
\n\t\t\t\t\tAjout du support des propriétés all, background-blend-mode, caret-color, contain, image-rendering, font-variant-*, mix-blend-mode, resize, object-fit et object-position, offset-*, scroll-margin-*, scroll-padding-*, scroll-snap-*, shape-* tab-size, text-orientation, will-change, -webkit-text-stroke, de la plupart des propriétés logiques...
Ajout du support du sélecteur [ i]...
Ajout du support des pseudo-classes :default, :focus-within, :placeholder-shown, :scope...
Ajout du support des pseudo-éléments ::placeholder, ::-webkit-scrollbar...
Ajout du support des valeurs contents, flow-root, min-content, max-content, pan-down, pan-left, pan-right, pan-up, system-ui...
Ajout du support des fonctions clamp(), conic-gradient(), env(), filter(url()), image-set(), max(), min(), repeating-conic-gradient()...
Ajout du support des couleurs #rgba, #rrggbbaa..
Ajout du support des media queries prefers-color-scheme, prefers-reduced-motion...
Du côté de WebGL :
\n\t\t\t\t\tAjout du support de WebGL 2.0
\n\t\t\t\t\t\tLa plupart des informations ci-dessus proviennent d'un croisement d'informations entre https://developer.microsoft.com/en-us/microsoft-edge/status/ et https://caniuse.com/#compare=edge+18,edge+79 et sont sans doute pour certaines inexactes, car je n'ai pas trouvé d'annonce officielle des changements entre Edge 18 et Edge 79 (notez le saut de version)
\n\t\t\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nFirefox est sorti en version 72 aujourd'hui :
\n\t\t\tLes cycles de développement passent de 6 à 8 semaines à 4 semaines ; les versions sortiront donc plus souvent
\n\t\t\t\tDu côté des outils de développement :
\n\t\t\t\t\tLe bloc-notes JavaScript a été retiré ; la console multiligne constitue un bon remplacement si vous aviez l'habitude d'utiliser cette fonctionnalité
\n\t\t\t\t\t\tDu côté d'HTTP (c'est rare !) :
\n\t\t\t\t\tLe type image/webp, initialement enlevé de l'en-tête Accept des requêtes dans Firefox 66, a été réintroduit pour des raisons d'interopérabilité avec Chrome ; la valeur redevient donc text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Du côté du JS :
\n\t\t\t\t\tL'opérateur Nullish coalescing Operator (??), dont je vous parlais il y a deux mois, a été introduit
À l'instar de Chrome il y a quatre mois, les formulaires <form></form> émettent désormais un évènement "formdata" lors de leur soumission
Du côté des CSS :
\n\t\t\t\t\tLes propriétés rotate, scale et translate, désormais stables, sont désormais exposées et permettent de spécifier indépendamment la rotation, l'échelle et la translation d'un élément, sans avoir systématiquement recours à la propriété transform
Les propriétés offset, offset-anchor, offset-distance, offset-path et offset-rotate (anciennement désignées motion-*) ont été ajoutées et permettent de définir la trajectoire exacte d'un élément ; le cas d'utilisation récurrent est l'animation des éléments mouvants
L'attribut part="" et le pseudo-élément ::part() sont désormais supportés et permettent d'appliquer des styles spécifiques à des descendants donnés des shadow hosts
Pour plus d'informations, consultez les pages https://hacks.mozilla.org/2020/01/firefox-72-our-first-song-of-2020/, https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/72 et https://www.fxsitecompat.dev/en-CA/versions/72/
\n\t\t\t\tQuickJS, le moteur JavaScript de Fabrice Bellard (https://bellard.org/quickjs/) supporte d'ores et déjà les décimaux BigDecimal, avant même que le travail de spécification ait véritablement commencé de la part du TC39 ! la proposition initiale (https://github.com/littledan/proposal-bigdecimal) devrait être présentée le mois prochain (mais on en a encore pour quelques années avant de voir arriver ça dans les navigateurs)
Cet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nChrome est sorti en version 79 mardi et apporte les nouveautés suivantes :
\n\t\t\tDu côté des outils de développement :
\n\t\t\t\t\tLa valeur des cookies peut désormais être inspectée et il est possible de vérifier si un cookie a été envoyé, stocké ou bloqué
\n\t\t\t\t\t\tLes media queries prefers-color-scheme et prefers-reduced-motion peuvent désormais être simulées ; vous pouvez donc tester plus facilement les directives de thème clair, de thème sombre et de réduction d'animation sans changer de navigateur ou d'ordinateur
Du côté du HTML :
\n\t\t\t\t\tL'attribut autofocus="", qui permet de donner le focus à un élément au chargement de la page, devient un attribut universel et ne se limite plus seulement aux contrôles de formulaires (ma seule ligne de JS sur le site de TGD devient donc inutile dans Chrome !)
De la même manière que la version 71 de Firefox sortie la semaine dernière, Chrome calcule désormais le ratio d'aspect des images à partir des attributs width="" et height="" avant qu'elles ne chargent, ce qui prévient les sauts de l'ascenseur lors du chargement effectif de l'image ; c'est bon de voir une telle coordination entre navigateurs de temps en temps ! on n'attend plus que l'ajout de la propriété aspect-ratio désormais
L'attribut universel rendersubtree="" a été ajouté et permet selon sa valeur (invisible ou activatable) d'indiquer au navigateur que le rendu du contenu de l'élément peut être différé (j'ai personnellement un gros doute sur la pertinence d'un tel attribut, mais bon...)
Du côté du JS :
\n\t\t\t\t\t\tL'API WebXR a été exposée et permet d'accéder à de nouvelles fonctionnalités en lien avec la réalité augmentée et la réalité virtuelle ; en particulier les ancres, mais aussi les appareils et les manettes dédiées à de domaines sont supportés
\n\t\t\t\t\t\tDu côté des CSS :
\n\t\t\t\t\tLes fonctions min(), max() et clamp() qui permettent de contenir une valeur dans un intervalle ont été ajoutées ; dans le futur, on n'aura peut-être plus besoin d'avoir recours à des media queries dédiées ou aux propriétés min-width, max-width, min-height, max-height pour faire du responsive design (sachant que certaines techniques permettaient déjà de s'en passer)
La propriété quasi-standard -webkit-appearance a été modifiée pour ne fonctionner que sur un nombre restreint d'éléments HTML afin de réduire les risques de futurs problèmes de rétro-compatibilité ; on se rapproche un peu plus de l'ajout de la propriété standard appearance dont -webkit-appearance devrait progressivement devenir un alias !
La propriété font-optical-sizing, qui permet de contrôler l'activation des optimisations de l'interpolation du rendu des fontes, a été ajoutée
La propriété list-style-type, qui correspond à la manière historique de définir l'apparence des puces d'une liste (en attendant le pseudo-élément ::marker), accepte désormais des chaînes de caractères quelconques et non plus seulement des mots-clés prédéfinis
C'est tout, mais c'est sans doute parce que les ingénieurs de Chrome travaillent sur une nouvelle variante de leur moteur de rendu Blink : LayoutNG (à l'instar des ingénieurs de Firefox qui travaillent sur Gecko, WebRender et GeckoView) ; celle-ci devrait permettre le support du pseudo-élément ::marker par exemple !
Pour plus d'informations, consultez les pages https://developers.google.com/web/updates/2019/12/nic79, https://developers.google.com/web/updates/2019/10/devtools et https://v8.dev/blog/v8-release-79
\n\t\t\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nUn truc que j'avais laissé passer :
\n\tWebAssembly, le langage d'assemblage pour le web a été officiellement promu "Recommandation W3C", autrement dit standard du web : consultez l'annonce https://www.w3.org/2019/12/pressrelease-wasm-rec.html.en, et les trois composantes du standard en question https://www.w3.org/TR/wasm-core-1/, https://www.w3.org/TR/wasm-web-api-1/, https://www.w3.org/TR/wasm-js-api-1/
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nLes nouvelles de la semaine :
\n\tFirefox est sorti mardi dernier en version 71 avec comme d'habitude pas mal de changements :
\n\t\t\tDu côté des outils de développement :
\n\t\t\t\t\tLa console se dote d'un éditeur multi-ligne qui vous permet d'exécuter plus facilement un ensemble d'instructions JavaScript et éventuellement à partir d'un fichier
\n\t\t\t\t\t\tLes messages Web Socket ont désormais un onglet dédié pour les inspecter
\n\t\t\t\t\t\tParmi les autres changements, l'onglet "Réseau"" possède désormais une barre de recherche, un simulateur de requêtes bloquées et l'onglet "Débogueur" permet quant à lui de visualiser les valeurs des variables à n'importe quelle ligne arrivent de placer un point d'arrêt lors d'un évènement
\n\t\t\t\t\t\tL'inspecteur de grille a été amélioré pour tenir des comptes des nouvelles capacités des grilles CSS (voir ci-dessous)
\n\t\t\t\t\t\tDu coté du JS :
\n\t\t\t\t\tLa méthode Promise.allSettled() a été ajoutée et permet d'attendre qu'un ensemble de promesses soit traité (settled), peut importe qu'elles soient accomplies ou rejetées
Les méthodes génériques statiques non-standard d'Array introduites en novembre 2005 dans Firefox 1.5 ont enfin pu être retirées, malgré les problèmes de rétro-compatibilité que cela posait initialement ; voici la liste complète des méthodes supprimées : Array.concat(), Array.every(), Array.filter(), Array.forEach(), Array.indexOf(), Array.lastIndexOf(), Array.map(), Array.pop(), Array.push(), Array.reduce(), Array.reduceRight(), Array.reverse, Array.shift(), Array.slice(), Array.some(), Array.sort(), Array.splice() et Array.unshift()
Les méthodes et propriétés non-standard de l'API DataTransfer (qui sert lorsque l'on fait du Drag & Drop) ont été retirées également : mozGetDataAt(), mozSetDataAt(), mozClearDataAt() and mozTypesAt() et mozItemCount
Le constructeur StaticRange() a été ajouté
WebGL supporte désormais les extensions OVR_multiview2 et OES_fbo_render_mipmap (je ne sais pas ce que c'est)
L'API Media Session a été partiellement implémentée
\n\t\t\t\t\t\tDu côté des CSS :
\n\t\t\t\t\tVous connaissiez FlexBox et Grid et ça ne vous suffisait pas ? dites bonjour à subgrid, la nouvelle valeur des propriétés grid-template-columns et grid-template-rows qui permet à une grille de réutiliser les colonnes et / ou les lignes de la grille parente ; avec cette valeur, un certain nombre de designs qui ne pouvait jusqu'à être réalisés qu'avec des tableaux (ouh c'est pas bien) ou avec du JS sont désormais réalisables facilement ! à mon avis, cette grâce à cette valeur que la mise en page en CSS va devenir réellement puissante (mais c'est uniquement dans Firefox actuellement)
Firefox rattrape enfin son retard quant aux colonnes CSS en ajoutant la propriété column-span qui permet à un élément de s'étendre sur plusieurs colonnes comme les chapeaux ou les sous-titres dans les journaux par exemple
La propriété clip-path (l'alternative moderne à la propriété clip) supporte enfin comme valeur la fonction path() qui permet de spécifier un chemin SVG quelconque pour rogner un élément
Nouveauté qui peur sembler insignifiante mais qui pourtant devrait avoir de formidables conséquences pour les utilisateurs : les attributs height="" et width="" des éléments <img/> participent désormais au calcul de la propriété aspect-ratio (non exposée et interne à Firefox pour l'instant seulement, mais qui sera standardisée à terme) ; autrement dit, une image, même pas encore chargée, devrait respecter le ratio d'aspect spécifié et ne plus provoquer de sauts dans la page au moment effectif de son chargement ; il est donc désormais à nouveau recommandé de toujours spécifier les attributs width="" et height="" sur une image (et pas seulement les attributs src="" et alt="")
Du côté de MathML :
\n\t\t\t\t\tIl y avait bien longtemps que MathML n'avait pas reçu de modifications dans Firefox, mais avec l'implémentation en cours de MathML dans Chrome et la rédaction (en cours également) de la spécification qui devrait devenir MathML 4, tout ceci va changer !
\n\t\t\t\t\t\tPour commencer, le DOM des éléments MathML obtient désormais la même structure que HTML et SVG ; autrement dit la propriété style et les gestionnaires d'évènements sont désormais disponibles sur ces éléments par exemple !
Ensuite, dans la perspective de les retirer prochainement, sont dépréciés : les attributs align="" sur les éléments <munderover></munderover>, <munder></munder> et <mover></mover>, bevelled="", les attributs denomalign="" et numalign="" sur l'élément <mfrac></mfrac>, l'attribut radical="" sur l'élément <menclose></menclose>, les attributs subscriptshift="" et superscriptshift="" sur les éléments <msubsup></msubsup>, <msub></msub> et <msup></msup>, l'élément <mfenced></mfenced> et les attributs XLink xlink:actuate="", xlink:href="", xlink:show="" et xlink:type=""
Pour plus d'informations, consultez les pages https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/71, https://hacks.mozilla.org/2019/12/firefox-71-a-year-end-arrival/ et https://www.fxsitecompat.dev/en-CA/versions/71/
\n\t\t\t\tDe mardi à jeudi se déroulait la réunion bimestrielle du TC39 qui standardise JavaScript et comment souvent, un certain nombre de fonctionnalités sont venues rejoindre la onzième édition de la spécification du langage, ES2020 :
\n\t\t\tLa proposition Nullish coalescing Operator, c'est-à-dire l'opérateur ??, a été standardisée ; à l'instar des opérateurs || et && qui travaillent sur true et false, ce nouvel opérateur permet de court-circuiter l'évaluation de l'opérande droit si l'opérande gauche n'est ni null ni undefined ; l'idée est de pouvoir donner une valeur par défaut à une expression : const articleTitle = article.title ?? "Pas de titre"; ; consultez la proposition https://github.com/tc39/proposal-nullish-coalescing elle-même ou bien la documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
La proposition Optional Chaining a également été standardisée ; elle apporte trois opérateurs : ?., ?.[] et ?.(), versions "court-circuitantes" (non, non, aucun néologisme) des opérateurs . (accès à une propriété), [] (accès à une propriété au nom calculé) et () (appel de fonction) ; autrement dit, si l'opérande gauche est null ou undefined, l'accès à la propriété ou bien l'appel de fonction n'est pas réalisé et l'expression retourne undefined (en gros, si on avait été en Java, on aurait pu dire : "Le NullPointerException est mort, vive le NullPointerException !") consultez la proposition https://github.com/tc39/proposal-optional-chaining ou bien la documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
Si vous connaissez bien JavaScript et JSON, alors vous savez que les objets sont des collections non-ordonnées de paires de clés et de valeurs (non-ordonnées, vous avez vu ?) ; en pratique ce n'est pas complètement le cas car lors du parcours d'un objet avec une boucle for (... in ...) ..., les navigateurs sont d'accord sur une partie de l'ordre d'énumération des clés ; eh bien la proposition for-in mechanics tout juste standardisée décrit et standardise désormais ce dénominateur commun de l'énumération avec une boucle for (... in ...) ... ; pour les développeurs ça ne change rien, à part apporter une bonne piqûre de rappel : ne vous reposez pas sur l'ordre d'énumération des clés d'un objet avec la boucle for (... in ...) ..., c'est globalement imprévisible ! consultez la proposition https://github.com/tc39/proposal-for-in-order ou bien la documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
Dernière nouveauté : l'API Intl.RelativeTimeFormat a été standardisée et permet, comme son nom l'indique, de formater des dates relativement au moment présent ("il y a un jour", "demain", "le mois dernier", "dans 2 minutes", "maintenant"...), le genre de truc qui serait super fastidieux à implémenter pour un développeur lambda, et ce surtout dans n'importe quelle locale (en gros dans n'importe langue) ; consultez la proposition https://github.com/tc39/proposal-intl-relative-time ou bien la documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat
Cet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nL'Europe, le Moyen-Orient et l'Asie centrale sont désormais à court d'IPv4 : https://www.ripe.net/publications/news/about-ripe-ncc-and-ripe/the-ripe-ncc-has-run-out-of-ipv4-addresses
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nNode.js 13.2 est sorti à l'instant ! vous le savez désormais, cette version permet pour la première fois d'utiliser les modules ECMAScript standard sans flag dans Node.js (néanmoins cela reste expérimental) ; je vous invite franchement à lire l'annonce officielle, car c'est le futur de JavaScript ! que dis-je ? le présent ! voici le lien : https://medium.com/@nodejs/announcing-core-node-js-support-for-ecmascript-modules-c5d6dc29b663
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nVous connaissez JQuery ? c'est bon là je ne parle pas d'un truc fantasmagorique ? eh bien, JQuery vient de migrer vers les modules ECMAScript standard : https://twitter.com/m_gol/status/1196893162859573250 ; maintenant vous pouvez faire directement import $ from "./jquery/src/jquery.js"; !
Cet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nC'est confirmé : les modules ECMAScript, supportés depuis mai 2018 dans tous les navigateurs (cf. https://caniuse.com/#feat=es6-module ), arrivent dans Node.js 13.2 la semaine prochaine ! https://twitter.com/MylesBorins/status/1194375751774064647
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nYouhou ! après 1 an et demi de travail, le groupe de travail Modules de Node.js a atteint un consensus hier pour unflag dans la version 13 les modules ECMAScript standardisés dès 2015 :
\n\t\t\ton pourra sans doute les utiliser sans le flag --experimental-modules dès la semaine prochaine dans la version 13.1 en utilisant la propriété "type": "module" dans le fichier package.json ; plus question de développer des modules CommonJS à coups de require() dans le futur !
la fonctionnalité sera sans doute rétroportée vers la version 12 LTS dans les mois prochains
\n\t\t\t\ten attendant (je suis impatient !), voici un lien vers l'annonce de Myles Borins : https://twitter.com/MylesBorins/status/1189618753065144322 et un autre vers la résolution prise hier : https://github.com/nodejs/modules/issues/408#issuecomment-548209785
\n\t\t\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nPas mal de nouvelles aujourd'hui avec trois sorties importantes :
\n\tFirefox est sorti hier en version 70 avec un nouveau logo et quelques nouveautés :
\n\t\t\tDu côté des outils de développement :
\n\t\t\t\t\tLes propriétés sans effet sont désormais signalées dans le panneau des règles CSS
\n\t\t\t\t\t\tLe colorpicker indique désormais le niveau d'accessibilité du contraste (enfin il paraît parce que j'ai pas ça dans ma version)
\n\t\t\t\t\t\tL'onglet d'inspection de l'accessibilité signale désormais trois types de problèmes d'accessibilité (manque de contraste, absence d'étiquette, ou inaccessibilité au clavier)
\n\t\t\t\t\t\tL'onglet Network permet désormais d'inspecter les Web sockets
\n\t\t\t\t\t\tDu côté du JS :
\n\t\t\t\t\tLa proposition en stage 3 Numeric separators a été implémentée ; il est désormais possible d'insérer des caractères soulignés (_) au milieu des nombres pour les rendre plus lisibles (1_000 au lieu de 1000 par exemple)
Plusieurs APIs relatives à l'internationalisation ont été améliorées ; BigInt.prototype.toLocaleString() accepte désormais les paramètres locales et options, Intl.NumberFormat.format() et Intl.NumberFormat.formatToParts() acceptent des BigInt et Intl.RelativeTimeFormat.formatToParts() a été ajoutée
La navigation induite par les méthodes History.back(), History.forward() et History.go() est désormais asynchrone
Les méthodes getTransform() et setTransform() ont été ajoutées aux contextes 2D des éléments <canvas></canvas> pour obtenir et saisir directement les transformations absolues sous forme de matrices
Les événements "ontouchstart" et "ontouchmove" sont désormais passifs, comme dans Chrome (ça avait cassé mes sites d'ailleurs à l'époque où Chrome avait ajouté ça sans tester)
Du côté des CSS :
\n\t\t\t\t\tPour les amateurs de typographie, les propriétés text-decoration-thickness, text-underline-offset et text-decoration-skip-ink ont été ajoutées ; sans même les utiliser explicitement, vous pourrez constater que le jambage des lettres n'est par défaut plus traversé par la barre de soulignage
Vous croyiez que la propriété display ne prenait qu'un seul mot-clé ? désormais ce n'est plus le cas ; Firefox introduit la possibilité de spécifier indépendamment le comportement interne et externe de la boîte d'un élément ; certains mots-clés historiques deviennent des alias pour la syntaxe à deux (voire trois) mots-clés (block devient synonyme de block flow, inline devient synonyme de inline flow, inline-block devient synonyme de inline flow-root...) mais la valeur run-in n'est toujours pas supportée malheureusement
Bonne nouvelle pour ceux qui utilisent les grilles CSS ; les propriétés grid-auto-columns et grid-auto-rows acceptent désormais plusieurs pistes, ce qui permet de réaliser certains designs qui n'étaient pas possibles avant (mais attendez, subgrid arrive dans la prochaine version !)
La propriété font-size accepte désormais la valeur xxx-large pour des raisons de compatibilité (sans commentaire)
La propriété quotes accepte désormais la valeur auto qui constitue sa nouvelle valeur initiale
L'opacité peut désormais être spécifiée comme un pourcentage et plus seulement un nombre dans différentes propriétés (opacity, stop-opacity, flood-opacity, fill-opacity, stroke-opacity, -moz-window-opacity, shape-image-threshold...)
Pour plus d'informations, consultez les pages https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/70, https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/ et https://www.fxsitecompat.dev/en-CA/versions/70/
\n\t\t\t\tChrome est arrivé en version 78 hier également avec les changements suivants :
\n\t\t\tDu côté des CSS :
\n\t\t\t\t\tL'opacité peut également être spécifiée via un pourcentage
\n\t\t\t\t\t\tConnaissez-vous Houdini ? c'est un ensemble d'APIs en développement dont le but est de permettre au développeur de contrôler directement le moteur de rendu du navigateur ; dans ce cadre et dans cette version de Chrome, il est désormais possible de spécifier ses propres propriétés CSS (nom, syntaxe, héritage, valeur initiale...) grâce à la méthode CSS.registerProperty() (si vous voulez voir le potentiel d'Houdini, consultez les pages https://developers.google.com/web/updates/2016/05/houdini et https://ishoudinireadyyet.com/ )
Du côté du JS :
\n\t\t\t\t\tUn certain nombre de fonctionnalités sont désormais disponibles derrière un flag ou en tant qu'origin trial : la proposition en stage 3 Optional Chaining qui apporte les nouveaux opérateurs ?., ?.(...) et ?.[...] ; l'API SMS Receiver ou l'API Native File System par exemple
Pour plus d'informations, consultez les pages https://developers.google.com/web/updates/2019/10/nic78, https://developers.google.com/web/updates/2019/09/devtools et https://v8.dev/blog/v8-release-78
\n\t\t\t\tUn nouveau cycle de développement démarre pour Node.js :
\n\t\t\tNode.js 12.13 "Erbium" constitue depuis lundi la nouvelle version à support étendu (LTS) et devient donc la version recommandée pour développer sous Node.js
\n\t\t\t\tLa version 13 est sortie hier :
\n\t\t\t\t\tDe nombreuses locales sont désormais disponibles et plus seulement l'anglais ce qui rend enfin utiles les APIs d'internationalisation (l'espace de noms Intl en JavaScript), et d'autant plus lorsqu'on fait des interfaces en français !
Les Workers sont désormais considérés stables
\n\t\t\t\t\t\tMalheureusement, les modules ECMAScript (qui visent à remplacer le système de modules CommonJS à base de require), prévus pour la version 12.13 LTS, ne sont pas exactement prêts et ont donc été plus ou moins repoussés à une prochaine version imminente
Pour plus d'informations, consultez l'annonce offcielle https://medium.com/@nodejs/node-js-12-to-lts-and-node-js-13-is-here-e28d6a4a2bd, la progression de l'implantation des modules https://github.com/nodejs/node/pull/29866 ou simplement la documentation https://nodejs.org/dist/latest-v13.x/docs/api/
\n\t\t\t\tAprès le partenariat de CanIUse avec MDN, c'est au tour de Bocoup de s'y associer en intégrant les résultats de la suite de test d'ECMAScript, Test 262, directement dans les pages de documentation du MDN ; c'est donc désormais plus de fiabilité pour les développeurs pour évaluer la compatibilité des moteurs JavaScript ; lisez l'annonce en détails : https://bocoup.com/blog/launching-test262-results-on-mdn
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nLe WhatWG, qui spécifie HTML nous explique en détails sur son blog l'effort de standardisation qui a été fait tout au long des derniers mois sur le mécanisme de focus (clicks, attributs tabindex et autofocus, interaction avec le shadow DOM...) : https://blog.whatwg.org/focusing-on-focus (promis, je ne tape pas sur Vivaldi pour son implémentation absolument non conforme)
TypeScript 3.7 est en bêta, avec plusieurs breaking changes ; voici un petit thread Twitter qui nous explique en quoi l'équipe de TypeScript a participé à l'élaboration des prochaines fonctionnalités d'ECMAScript et comment on en est arrivé là : https://mobile.twitter.com/wycats/status/1183503530524475392
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nComme tous les deux mois, le TC39 se réunit pour faire évoluer ECMAScript et il y a quelques minutes, une des plus anciennes propositions vient d'être standardisée, globalThis ! avant, l'objet global portait un nom différent selon l'environnement (~ window sur le web, self dans les workers ou encore global dans Node.js) ce qui rendait l'écriture de code portable (et notamment de polyfills) difficile, d'où la volonté de le standardiser ; mais paradoxalement c'est aussi ce qui a ralenti l'adoption de cette proposition car un certain nombre de choix de noms pour cette variable (global par exemple) cassait une très grande partie du web existant, à tel point que le nom final a été gardé secret un certain temps... désormais le nom de l'objet global est fixé et implémenté par tous les navigateurs et Node.js ! voici la proposition en détails : https://github.com/tc39/proposal-global et si vous voulez comprendre les défis qu'ont posés cette standardisation et comment on en est arrivé là, je vous invite à lire https://github.com/tc39/proposal-global/blob/master/NAMING.md
Cet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nChrome 77 est sorti mardi 10 septembre (oui j'ai un peu de retard) avec quelques changements :
\n\t\t\tDu côté du HTML :
\n\t\t\t\t\tLes formulaires <form></form> émettent désormais un nouveau type d'évènement, "formdata", 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 new FormData(...) ou l'élément <input type="hidden"/>, et en particulier dans le cadre des custom elements
Le nouvel attribut loading a été introduit et permet avec la valeur "lazy" de différer le chargement des images <img/> et des frames <iframe/> ; celles-ci ne sont pas chargées tant qu'elles sont placées en dehors de l'écran par exemple
L'objet TextMetrics permettant de mesurer du texte à afficher sur un <canvas> et retourné par la méthode CanvasRenderingContext2D.measureText() a été étendu et ne se limite plus seulement à une unique propriété width, mais dispose désormais également des propriétés actualBoundingBoxAscent, actualBoundingBoxDescent, actualBoundingBoxLeft, actualBoundingBoxRight, alphabeticBaseline, emHeightAscent, emHeightDescent, fontBoundingBoxAscent, fontBoundingBoxDescent, hangingBaseline, ideographicBaseline par exemple
Du côté du JS :
\n\t\t\t\t\tL'implémentation de la proposition en stage 3 d'API unifiée Intl.NumberFormat 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
Du côté des CSS :
\n\t\t\t\t\tLa propriété content, qui permet notamment de spécifier le contenu (texte, image) générant les pseudo-éléments ::before ou ::after a été étendue et accepte désormais un texte alternatif (à l'instar de l'attribut alt des éléments <img/>) ; ces pseudo-éléments vont donc désormais pouvoir être lus par les lecteurs d'écrans par exemple
Les propriétés logiques overscroll-behavior-inline et overscroll-behavior-block, versions longues de la propriété overscroll-behavior, ont été implémentées
La propriété tab-size qui définit la taille des tabulations supporte désormais des valeurs non entières
Pour plus d'informations, consultez les pages https://developers.google.com/web/updates/2019/09/nic77, https://developers.google.com/web/updates/2019/07/devtools et https://v8.dev/blog/v8-release-77
\n\t\t\t\tLes sites MDN (la référence en termes de documentation pour le web) et Can I Use (le site de compatibilité web le plus connu) ont annoncé un partenariat : désormais les informations de compatibilité du MDN seront affichées lors d'une recherche sur le moteur de recherche Can I Use, portant ainsi le nombre de résultats indexés de 500 à environ 10500 ! l'annonce en détails : https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-data-collaboration/
\n\t\tSi vous ne le saviez pas déjà, sachez qu'un des formats de courriels les plus utilisés est HTML (oui oui on peut coder ses courriels en HTML) ; 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 web et tout bricoler à l'aide de tableaux <table></table> et d'images <img/> ; eh bien, bonne nouvelle : le nouveau site Can I Email, justement inspiré de Can I Use, recense désormais un certain nombre de données sur l'interopérabilité des différents clients mail ; direction https://www.caniemail.com/ toute ! l'annonce en question : https://www.caniemail.com/news/2019-09-09-introducing-caniemail/
Cet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nFirefox 69 sort aujourd'hui et comme d'habitude avec un paquet de nouveautés :
\n\t\t\tDu côté des outils de développement :
\n\t\t\t\t\tL'outil d'accessibilité est désormais capable de vérifier certains problèmes ou manquements comme l'absence d'étiquettes (noms de boutons, titres, textes alternatifs...)
\n\t\t\t\t\t\tDu côté de Flash (encore lui ?) :
\n\t\t\t\t\tEmboîtant le pas à Chrome, Firefox désactive désormais systématiquement Flash et demande une activation expresse par l'utilisateur à chaque visite
\n\t\t\t\t\t\tDu côté de HTML :
\n\t\t\t\t\tChose plutôt rare, un élément a été retiré : <keygen/> ; cet élément qui était spécifié dans une ancienne version d'HTML (jusqu'à HTML 5.1 en fait) permettait comme son nom l'indique de générer automatiquement des clés publiques
Du côté du JS :
\n\t\t\t\t\tLes déclarations de champs de classes publics (proposition en stage 3) sont désormais supportés ; youpi ! on peut déclarer les attributs publics à la fois dans Chrome et Firefox maintenant
\n\t\t\t\t\t\tL'API ResizeObserver permet de réagir plus intelligemment au redimensionnement des différents éléments, et plus seulement de toute la page en écoutant l'évènement "resize" sur l'objet global window
La nouvelle fonction queueMicrotask permet de programmer une microtâche (parfois appelée job) à exécuter prioritairement, et constitue en cela une alternative déterministe aux techniques à base de setTimeout(..., 0) voire pire, de setImmediate() (fonctionnalité non-standard disponible uniquement dans feux Internet Explorer et l'ancienne version de Edge)
Les nouveaux évènements "unhandledrejection" et "rejectionhandled" sont désormais disponibles ~~pour ceux qui oublieraient de catch les erreurs dans le code asynchrone ou à base de promesses~~ pour faire de la télémétrie et du débogage
La nouvelle méthode statique DOMMatrix.fromMatrix() permet de cloner une matrice (ne me demandez pas pourquoi ce n'était pas possible avant), par contre, la méthode DOMMatrix.scaleNonUniformSelf() a été retirée au profit de la méthode DOMMatrix.scaleSelf() déjà disponible
Les méthodes Blob.text(), Blob.arrayBuffer() et Blob.stream() permettent une lecture plus facile des objets binaires comme les fichiers de manière asynchrone
Du côté des CSS :
\n\t\t\t\t\tLa propriété user-select, qui permet de spécifier de quelle manière un élément peut-être sélectionné, a été dépréfixée suite à des clarifications dans la spécification
La nouvelle propriété line-break et la nouvelle valeur break-spaces de la propriété white-space on été ajoutées pour une meilleure gestion des sauts de lignes, notamment pour les modes d'écritures CJK (Chinois, Japonais, Coréen)
Les propriétés logiques overflow-block et overflow-inline constituent désormais les alias des propriétés overflow-x et overflow-y selon le mode d'écriture spécifié par la valeur de la propriété writing-mode
Un certain nombre de propriétés géométriques SVG peuvent désormais être renseignées directement via des CSS ! cela inclut les propriétés width et height des éléments <svg></svg> par exemple, mais aussi les coordonnées des éléments avec x, y, cx, cy, rx, ry et r
La propriété contain a été exposée et permet d'améliorer les performances du moteur de rendu en indiquant explicitement à quel point l'apparence des différentes parties de la page peuvent être calculées indépendamment
La règle @supports permet d'appliquer conditionnellement du style plus seulement lorsqu'une certaine propriété CSS est implémentée, mais aussi selon le support d'un sélecteur CSS (du moment que sa syntaxe est valide), du genre ::marker, ::marker::marker, :focus-within, :target-within, :is(), :has() ou :where() qui sont peu répandus
Et parce que les changements ne se résument pas seulement à ça, consultez les pages https://hacks.mozilla.org/2019/09/firefox-69-a-tale-of-resize-observer-microtasks-css-and-devtools/, https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/69 et https://www.fxsitecompat.dev/en-CA/versions/69/ pour plus d'informations
\n\t\t\t\tPar ailleurs, Igalia nous fait à nouveau un point sur l'état de l'implémentation de MathML dans Chrome en effectuant une petite comparaison des différents navigateurs : https://mathml.igalia.com/news/2019/08/28/mathml-and-browsers/
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nCe jour sort Chrome 76 avec plusieurs changements notables :
\n\t\t\tDu côté des outils de développement... de Firefox !? :
\n\t\t\t\t\tPuppeteer, une API initialement conçue pour contrôler Chrome de l'extérieur via Node.js, est désormais compatible avec Firefox (à titre expérimental) ; un des intérêts d'un tel outil est de pouvoir automatiser des tests au sein des navigateurs, que ce soit au niveau de contenu, du comportement ou de l'apparence ; pour l'installer, un simple npm i puppeteer-firefox suffit !
Du côté de Flash !? :
\n\t\t\t\t\tDans le cadre du plan de retrait de Flash de la plateforme web, Chrome ne mémorise désormais les préférences d'activation de Flash de l'utilisateur que pour la durée d'une session ; le même changement arrive dans la prochaine version de Firefox
\n\t\t\t\t\t\tDu côté du JS :
\n\t\t\t\t\tLa proposition Promise.allSettled() tout juste standardisée, dont je vous parlais la semaine dernière, est désormais disponible
La toute nouvelle méthode HTMLFormElement.requestSubmit() permet de soumettre un formulaire via un script, après avoir vérifié les contraintes de validation et en émettant un événement "submit", ce que ne permettait pas la méthode HTMLFormElement.submit()
L'implémentation de l'API Async Clipboard dans Chrome permet désormais de lire et d'écrire des images PNG dans le presse-papier, et non plus seulement du texte
\n\t\t\t\t\t\tDu côté des CSS :
\n\t\t\t\t\tLa propriété backdrop-filter initialement proposée par Apple sous le nom -webkit-backdrop-filter a été implémentée selon une version plus moderne de la spécification ; contrairement à la propriété filter qui s'applique à un élément lui-même, le filtre s'applique ici sur son arrière-plan
Chrome supporte à son tour la media query prefers-color-scheme qui permet d'ajuster le thème (clair / sombre / sans préférence) d'un site selon les préférences de l'utilisateur ; le support de la fonctionnalité étant désormais très bon (les trois moteurs de navigateurs l'implémentent !), on devrait voir émerger rapidement plus de sites avec un thème sombre dédié
Pour plus d'informations, consultez les pages https://developers.google.com/web/updates/2019/07/nic76, https://developers.google.com/web/updates/2019/05/devtools et https://v8.dev/blog/v8-release-76
\n\t\t\t\tPar ailleurs, Igalia a annoncé avoir quasiment terminé d'implémenter le noyau de MathML dans Chrome ; on peut enfin se mettre à rêver d'interopérabilité en ce qui concerne les fomules mathématiques sur le web... ; l'annonce en détails : https://mathml.igalia.com/news/2019/07/25/project-status-after-one-semester/
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nCette semaine se tient la réunion bimestrielle du TC39 lors de laquelle une proposition s'est vue standardisée :
\n\t\t\tLa proposition Promise.allSettled() est ainsi passée au stage 4 ; contrairement à la méthode statique Promise.all() dont la promesse retournée peut être rejetée (rejected) dès lors qu'une des promesses en attente a été rejetée, la nouvelle méthode statique Promise.allSettled() retourne une promesse qui n'est accomplie (fulfilled) que lorsque l'intégralité des promesses en attente a été traitée (settled), peut importe qu'elles soient accomplies ou rejetées ; sa petite sœur, Promise.any() devrait être pour bientôt elle aussi ; pour plus d'informations, consultez la proposition https://github.com/tc39/proposal-promise-allSettled elle-même
Annoncés indépendamment en début de mois, deux nouveaux moteurs JavaScript sont arrivés sur le devant de la scène :
\n\t\t\tQuickJS, un interpréteur et compilateur écrit en C par le fameux Fabrice Bellard, qui est annoncé comme quasiment conforme à la spécification ES2019, ce qui en ferait potentiellement le moteur le plus conforme parmi ceux existants ; rendez-vous sur le site officiel https://bellard.org/quickjs/ pour plus d'informations
\n\t\t\t\tHermes, un moteur réalisé par Facebook dont l'objectif est d'optimiser les applications utilisant React Native, mais qui se veut moins complet car il n'implémente qu'un sous-ensemble de la spécification ES2015 ; consultez l'annonce https://code.fb.com/android/hermes/ pour plus de détails
\n\t\t\t\tLes deux moteurs devraient vraisemblablement rejoindre prochainement la système de tests de Bocoup, https://test262.report/ ; on pourra alors mieux évaluer leur potentiel respectif
\n\t\t\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nFirefox 68 est sorti ce mardi en version stable et ESR et apporte pas mal de nouveautés pour les développeurs :
\n\t\t\tDu côté des outils de développement :
\n\t\t\t\t\tLes problèmes d'accessibilité en termes de contraste entre couleurs sont désormais signalés, selon les critères du standard WCAG (un standard fondamental du web qui décrit les conditions pour qu'une page web soit accessible à toute personne)
\n\t\t\t\t\t\tUn nouvel outil permet d'émuler (quelque peu) l'apparence d'une page web telle qu'elle serait imprimée
\n\t\t\t\t\t\tL'espacement entre les lettres peut être ajusté grâce à un outil dédié
\n\t\t\t\t\t\tDu côté du JS :
\n\t\t\t\t\tBigInt, le nouveau type de valeurs numériques entières en cours de standardisation (stage 3 / 4) a été implémenté ; il est ainsi possible de manipuler des entiers d'une taille arbitraire, ce qui jusque là n'était pas possible avec le type historique de valeurs numériques flottantes, Number
L'API Visual Viewport est supportée sous Android
\n\t\t\t\t\t\tLes nombreuses méthodes génériques non-standard de String, introduites en 2005 mais conservés jusqu'alors pour des raisons de compatibilité, ont été retirées
Du côté des CSS :
\n\t\t\t\t\tLa nouvelle spécification CSS Scroll Snap a été implémentée et introduit un certain nombre de nouvelles propriétés CSS (scroll-snap-*, scroll-margin-* et scroll-padding-*) ; ce faisant, les propriétés définies par l'ancienne spécification CSS Scroll Snap Points ont été retirées (et ça casse ma technique d'aperçu avant impression des cours de la Web Academy...) ; un objectif de ce module CSS est de permettre la réalisation de carrousels sans avoir recours aux très nombreuses bibliothèques JavaScript qui simulent le défilement d'une manière trop peu accessible
Le nouveau pseudo-élément ::marker est désormais supporté, ainsi que son interaction avec les compteurs CSS et notamment la toute nouvelle propriété counter-set (mais par contre ça casse mon système de pagination des cours de la Web Academy...) ; standardisés ensemble dans le cadre du module CSS Lists Level 3, ils permettent enfin d'expliquer et de modifier le comportement et l'apparence des puces des items de listes <li></li>, des intitulés <summary></summary> et plus généralement de tous les éléments et pseudo-éléments avec la propriété display: list-item (depuis le temps que j'attendais ça !)
La propriété non-standard -webkit-line-clamp est supportée (oui, oui une propriété propriétaire Webkit) à des fins de compatibilité en attendant la finalisation de la standardisation de la propriété line-clamp ; uniquement fonctionnelle en interaction avec la propriété non standard display: -webkit-box (qui date d'avant FlexBox), elle permet de borner le nombre de lignes de texte affichées d'un élément
Du côté de HTML :
\n\t\t\t\t\tL'attribut disabled sur un élément <link/> permet de désactiver le chargement d'une feuille de style
Le chargement asynchrone d'une image est désormais possible via la méthode HTMLImageElement.prototype.decode() ; il était précédemment nécessaire d'avoir recours à un évènement "load" pour cela
Pour plus d'informations, consultez les pages https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/68, https://hacks.mozilla.org/2019/07/firefox-68-bigints-contrast-checks-and-the-quantumbar/ et https://www.fxsitecompat.dev/en-CA/versions/68/
\n\t\t\t\tLa première version publique de Firefox Preview (Fenix) peut être installée depuis le 27 juin ; il s'agit d'une pré-version de la prochaine mouture de Firefox pour Android (Fennec) qui intègre GeckoView, le moteur graphique standalone de Mozilla initialement inclus dans Firefox Focus / Klar ; cette bibliothèque constitue une alternative viable à la WebView Android propulsée par Blink (le moteur graphique de Chrome, vous suivez ?) et a été conçu pour pouvoir servir de base à d'autres navigateurs ou applications, en plus d'offrir de meilleures performances par rapport à la version actuelle de Firefox pour Android ; pour plus d'informations, consultez les pages https://blog.mozilla.org/futurereleases/2019/06/27/reinventing-firefox-for-android-a-preview/, https://hacks.mozilla.org/2019/06/geckoview-in-2019/ et https://www.soeren-hentzschel.at/firefox-android/fenix-firefox-preview-veroeffentlicht/
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nJusqu'à jeudi se tient la réunion bimestrielle du TC39 et deux nouvelles importantes viennent de tomber :
\n\t\t\tLa proposition d'import dynamique de modules via import() a (enfin !) été standardisée ; il est donc désormais possible d'importer des modules à la volée en JavaScript ; de plus c'est déjà supporté dans Firefox, Chrome et Safari ; cela signifie que le système de modules standard surpasse enfin (à mon sens) les anciens systèmes comme CommonJS, encore utilisé par Node.js par exemple
Qui a dit que JavaScript n'avait pas de type d'entiers ? désormais ce n'est plus le cas avec la standardisation d'un nouveau type de valeurs primitives, BigInt, qui permet de représenter des entiers d'une grandeur arbitraire ; là encore c'est déjà implémenté dans Chrome, Node.js et ça arrive dans la prochaine version de Firefox !
Pour plus d'informations, je vous invite à consulter ces articles d'Axel Rauschmayer : https://2ality.com/2017/01/import-operator.html et https://2ality.com/2017/03/es-integer.html
\n\t\t\t\tPar ailleurs, Chrome 75 sort cette nuit et apporte quelques changements notables :
\n\t\t\tDu côté du JS :
\n\t\t\t\t\tLa proposition en stage 3 Numeric separators a été implémentée ; il s'agit d'autoriser le caractère souligné _ au sein des littéraux de valeurs numériques (Number ou BigInt) dans le but de les rendre plus lisibles (1_000_000_000n au lieu de 1000000000n par exemple)
La deuxième itération de l'API Web Share est désormais supportée et permet notamment de partager directement des fichiers avec d'autres applications
\n\t\t\t\t\t\tPour plus d'informations, consultez les pages https://developers.google.com/web/updates/2019/06/nic75, https://developers.google.com/web/updates/2019/04/devtools et https://v8.dev/blog/v8-release-75
\n\t\t\t\tNode.js 12.4 est également sorti aujourd'hui :
\n\t\t\tSuite à sa standardisation par le WHATWG dans le cadre du langage HTML, l'import de modules JSON est désormais activé avec seulement le flag --experimental-modules ; auparavant les deux options --experimental-modules et --experimental-json-modules étaient nécessaires
Cet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nNous l'avions évoqué au tout début de la formation, désormais c'est officiel : le langage HTML (et le DOM) est officiellement maintenu par le WHATWG et non plus par le W3C ; depuis 2004, deux spécifications incompatibles coexistaient bien qu'en pratique les navigateurs implémentaient celle du WHATWG ; aujourd'hui la confusion est enfin levée pour les développeurs ; l'annonce officielle : https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nCe mardi est sorti Firefox 67 avec un peu de retard à cause de la désactivation inopinée des extensions de tous les utilisateurs le week-end du 4 mai ; cependant cette version apporte un certain nombre de nouveautés intéressantes :
\n\t\t\tDu côté du JS :
\n\t\t\t\t\tLa méthode String.prototype.matchAll, désormais standard (souvenez-vous, je vous en parlais il y a deux mois), est supportée
La proposition en stage 3 de la syntaxe Hashbang Grammar (les commentaires #! en début de script) est supportée également
La proposition en stage 3 import(), c'est-à-dire les imports dynamiques de modules ECMAScript, est maintenant exposée dans la version stable de Firefox, ce qui en fait déjà le troisième navigateur à l'implémenter ; cela fait désormais plus de deux ans et demi que cette proposition attend d'être standardisée à cause des craintes de certains délégués d'Ecma (l'organisme qui spécifie ECMAScript), qui la jugent potentiellement incompatible avec la future proposition visant à étendre les Realms (désomais connue sous le nom de Secure ECMAScript, ou SES) ; cependant le feu vert semble avoir été donné et on peut enfin espérer la standardisation dans deux semaines, lors de la réunion bimestrielle du TC39 ! je vous tiendrai au courant !
Du côté des CSS :
\n\t\t\t\t\tLe mot-clé universel revert, qui permet de restaurer la valeur originale d'une propriété (telle que définie par l'User-Agent, c'est-à-dire le navigateur), a été ajouté et constitue un complément aux valeurs universelles unset, initial et inherit
La media query prefers-color-scheme est désormais implémentée, et ceci selon la dernière version de la spécification (contrairement à Safari) ; nous disposons donc de deux navigateurs indépendants à supporter les thèmes (clairs, sombres et sans-préférence) ! un certain nombre de sites propose déjà deux versions de leurs pages via ce nouveau mécanisme
Pour plus d'informations, consultez certaines de ces pages https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/67, https://hacks.mozilla.org/2019/05/firefox-67-dark-mode-css-webrender/ et https://www.fxsitecompat.com/en-CA/versions/67/
\n\t\t\t\tD'autres nouvelles relatives aux modules en ECMAScript :
\n\t\t\tSi vous avez bien suivi, vous n'êtes pas sans savoir que :
\n\t\t\t\t\tTous les navigateurs supportent déjà les modules ECMAScript statiques via l'instruction import et que Node.js dispose d'une implémentation expérimentale
Firefox, Chrome et Safari supportent l'import dynamique de modules ECMAScript (autant dans un script classique que dans un script modulaire) et que Node.js a aussi une implémentation expérimentale
\n\t\t\t\t\t\tPar contre saviez-vous que :
\n\t\t\t\t\tNode.js 12.3, sorti mardi, supporte également les modules JSON (import "./structured-data.json";) et Web Assembly (import "./low-level.wasm";), toujours de manière expérimentale
L'import de modules JSON a été standardisé par le WHATWG et intégré au langage HTML cette semaine
\n\t\t\t\t\t\tLes travaux débutent sur la généralisation des imports ECMAScript aux formats HTML, CSS, JSON, Web Assembly et WebIDL, connue sous le nom de Synthetic Modules, qui dispose à la fois du soutien des auteurs de spécifications et des concepteurs de navigateurs, en plus de l'enthousiasme des développeurs
\n\t\t\t\t\t\tVous trouverez plus d'informations dans les pages https://github.com/nodejs/node/pull/27752, https://github.com/w3ctag/design-reviews/issues/375, https://github.com/nodejs/node/pull/27659 et https://github.com/w3ctag/design-reviews/issues/377
\n\t\t\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nConnaissez-vous CSSBattle ? il s'agit d'un jeu hautement addictif (si si, je vous assure, les plus grands designers y passent leurs nuits !) sur les CSS qui a ouvert le mois dernier ; le but est (1) de reproduire la figure demandée avec des CSS et (2) en le moins de code possible ; la saison pilote étant terminée, la seconde saison du jeu commence aujourd'hui ; je vous invite à y jouer, y compris les objectifs de la première saison, car cela peut vous permettre de découvrir plein de techniques sur CSS ; voici le lien : https://cssbattle.dev/
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nLa prochaine version de Edge intégrera Internet Explorer 11 ; si, si : https://m.youtube.com/watch?v=E2dm29djv3U
\n\t\tLes développeurs de Safari nous font un petit point sur une fonctionnalité imminente des CSS, supporter les thèmes clairs et foncés : https://webkit.org/blog/8840/dark-mode-support-in-webkit/
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nL'implémentation de MathML dans Chrome avance vite ! un petit point de la part d'Igalia : https://mathml.igalia.com/news/2019/05/03/igalia-is-making-good-progress/
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nMardi sont sortis les nouvelles moutures de Chrome et Node.js ; petit résumé des nouveautés :
\n\tChrome 74 apporte les nouveautés suivantes :
\n\t\t\tDu côté du JS :
\n\t\t\t\t\tLes déclarations de champs de classes privés (proposition en stage 3 ) sont désormais supportés, 3 mois après les déclarations de champs de classes publics, ce qui va permettre une encapsulation plus aisée des variables de classes
\n\t\t\t\t\t\tLa proposition en stage 3 de la syntaxe Hashbang Grammar est supportées ; il s'agit uniquement de rendre valides les programmes débutant par #! en traitant une telle ligne en début de programme comme un commentaire
La proposition en stage 3 Intl.Locale est ajoutée
La fonctionnalité Import maps visant à permettre les bares imports en JavaScript (pour importer une bibliothèque juste par son nom et non son chemin) est en test
\n\t\t\t\t\t\tLe premier module natif JavaScript dans les navigateurs de tous les temps, std:kv-storage, a été ajouté ; cela intervient dans le cadre d'un effort de standardisation du futur système de bibliothèque standard de JavaScript
Du côté du CSS :
\n\t\t\t\t\tLes événements relatifs aux transitions peuvent désormais être écoutés enJavaScript
\n\t\t\t\t\t\tPour plus d'informations, consultez notamment les pages https://developers.google.com/web/updates/2019/04/nic74, https://developers.google.com/web/updates/2019/03/devtools, https://v8.dev/blog/v8-release-74 et https://developers.google.com/web/updates/2019/03/kv-storage
\n\t\t\t\tNode.js 12 est sorti et deviendra la prochaine version à support étendu vers octobre ; énormément de nouveautés sont présentes, dont certaines dont je vous ai déjà parlé :
\n\t\t\tLes fonctionnalités standard Array.prototype.{flat, flatMap}, Object.fromEntries, String.prototype.matchAll, Symbol.prototype.description, Well-formed JSON.stringify, un tri Array.prototype.sort stable
Les fonctionnalités en stage 3 que sont globalThis et les déclarations de champs de classes publics et privés
De nouvelles API d'internationalisation en cours de standardisation
\n\t\t\t\tLa tant attendue nouvelle implémentation des modules ECMAScript, toujours derrière le flag --experimental-modules, plus stable, avec des nouveautés même si elle ne que partielle ; on peut espérer qu'elle soit terminée et disponible par défaut d'ici octobre ; en attendant, il est demandé de ne pas publier de paquet utilisant les modules ECMAScript pour Node.js
La dernière version du protocole TLS, TLS 1.3 a été implémentée, remplaçant ainsi la version précédente qui avait 11 ans
\n\t\t\t\tDiverses API comme fs.promises (la version asynchrone de fs) désormais considérées comme stables
Pour plus d'informations, consultez les pages https://medium.com/@nodejs/introducing-node-js-12-76c41a1b3f3f, https://medium.com/@nodejs/announcing-a-new-experimental-modules-1be8d2d6c2ff et https://2ality.com/2019/04/nodejs-esm-impl.html
\n\t\t\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nAvec un peu de retard :
\n\tEn début de mois est sortie la version 12.1 de Safari qui apporte quelques nouveautés intéressantes pour les développeurs :
\n\t\t\tDu côté du HTML :
\n\t\t\t\t\tL'élément <input type="color"/> est (enfin) supporté et permet d'ouvrir un colorpicker pour choisir une couleur ; Safari était le dernier navigateur à ne pas supporter ce type de champ
L'élément <datalist></datalist> est désormais supporté et permet de faire des suggestions à l'utilisateur lorsqu'il interagit avec un champ
Du côté des CSS :
\n\t\t\t\t\tLa nouvelle media query prefers-color-scheme permet de détecter les préférences de thème de l'utilisateur ; un site web pourra désormais adapter son interface pour opter pour un thème sombre si l'utilisateur le préfère par exemple ; cette nouveauté devrait également arriver dans Firefox le mois prochain
Du côté du JS :
\n\t\t\t\t\tL'API Intersection Observer a été ajoutée
\n\t\t\t\t\t\tL'API Web Share a été ajoutée
\n\t\t\t\t\t\tPour plus d'informations, consultez la page https://webkit.org/blog/8718/new-webkit-features-in-safari-12-1/
\n\t\t\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nConnaissez-vous le langage Markdown ? il s'agit d'un langage conçu pour générer du HTML (mais pas que) à partir d'un fichier texte à la syntaxe user-friendly ; il est généralement utilisé sur les blogs et les forums pour écrire des commentaires, mais aussi sur GitLab et GitHub par exemple ; le langage n'ayant été ni bien défini ni bien implémenté à l'origine, une tentative de spécification du langage est née il y a quelques années dans le but d'avoir une base commune aux différents dialectes existants, et ceci en restant la plus proche possible de la version d'origine du langage ; la semaine dernière, cette spécification, CommonMark, a atteint la version 0.29 après plus d'un an et demi de stabilité (on attend toujours la version 1.0 !) ; un certain nombre d'implémentations conformes à cette nouvelle version est déjà disponible et GitHub a déjà mis à jour sa propre spécification ; si vous souhaitez en apprendre plus sur ce langage, je vous invite à lire ces spécifications ici : https://spec.commonmark.org/current/ et là : https://github.github.com/gfm/
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nEn décembre dernier, peut-être aviez-vous vu le communiqué de Microsoft qui annonçait que le navigateur Edge allait désormais être basé sur Chromium, abandonnant ainsi EdgeHTML et ChakraCore (le moteur de rendu et le moteur JavaScript de Microsoft) pour Blink et V8 (le moteur de rendu et le moteur JavaScript de Google) ; aujourd'hui, Microsoft annonce les premières versions de test de la nouvelle mouture de son navigateur ~~Edg~~ pour Windows 10, même si le support est aussi à prévoir sur des versions plus anciennes de Windows comme Windows 7 en remplacement de feu Internet Explorer ; voici le lien pour les intéressés : https://blogs.windows.com/msedgedev/2019/04/08/microsoft-edge-preview-channel-details/ ; lorsque la transition vers la nouvelle version sera finalisée, Firefox deviendra le seul grand navigateur à ne pas dériver de Webkit...
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nComme je vous l'annonçais déjà la semaine dernière, la pull request intégrant une nouvelle implémentation des modules ECMAScript à Node.js vient d'intégrer la version 12 il y a 2 heures ; l'annonce officielle : https://github.com/nodejs/modules/blob/master/doc/announcement.md ; cette implémentation pourrait potentiellement aussi intégrer la version 11 dès la semaine prochaine ! le tweet en question : https://mobile.twitter.com/MylesBorins/status/1110996388127666176
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nCette semaine se réunit une nouvelle fois le TC39 :
\n\t\t\tString.prototype.matchAll, une solution pour obtenir toutes les correspondances d'un expression régulière au sein d'une chaîne plus facilement, a été officiellement ajouté au langage (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/matchAll)
Je vous informerai s'il y a d'autres gros changements cette semaine ; en attendant, vous pouvez suivre le déroulement du meeting ici : https://github.com/tc39/agendas/blob/master/2019/03.md et là : https://github.com/tc39/proposals/commits/master
\n\t\t\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nLes informations de la semaine :
\n\tLa version 66 de Firefox est sortie mardi avec les nouveautés suivantes :
\n\t\t\tDu côté des CSS :
\n\t\t\t\t\tPlusieurs propriétés logiques ont été ajoutées dont {padding, margin, border, inset}-{block, inline} notamment ; ces propriétés constituent une alternative à leurs versions originales {padding, margin, border}-{top, right, bottom, left} et position mais qui tiennent compte du sens d'écriture / de lecture du texte
Les mots-clés min-content et max-content ont été dé-préfixés et sont désormais supportés par un certain nombre de propriétés CSS ; ils constituent entre autres une meilleure alternative aux bidouilles à base de display: table; pour centrer des éléments de taille variable
Mais aussi :
\n\t\t\t\t\tDésactivation du démarrage automatique de certains contenus sonores par défaut
\n\t\t\t\t\t\tPour plus d'informations, consultez les pages https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/66, https://hacks.mozilla.org/2019/03/firefox-66-the-sound-of-silence/ et https://www.fxsitecompat.com/en-CA/versions/66/
\n\t\t\t\tLe TC39 qui spécifie ECMAScript a officiellement lancé sont site web lundi : https://tc39.github.io/ ; vous pouvez y découvrir l'état des propositions sur le point d'intégrer le langage ; plus d'informations ici : https://hacks.mozilla.org/2019/03/a-homepage-for-the-javascript-specification/
\n\t\tUne pull request a été ouverte lundi pour intégrer une nouvelle implémentation des modules ECMAScript à Node.js à partir de la version 12 qui sort le mois prochain, et même potentiellement de la version 10 : https://github.com/nodejs/node/pull/26745 ; cette nouvelle implémentation demande toujours d'utiliser l'option --experimental-modules pour l'instant mais garantit une meilleure interopérabilité entre les modules CommonJS actuels et les modules ECMAScript en introduisant entre autres le champ type dans le fichier package.json et les fichiers *.cjs qui utilisent explicitement les modules CommonJS ; on attend encore l'annonce officielle qui ne devrait pas tarder
Cet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nSans plus tarder, les trois nouvelles du jour :
\n\tLe Web a 30 ans aujourd'hui ! (enfin ce mois-ci comme je ne suis pas sur que quelqu'un se souvienne vraiment de la date exacte !)
\n\t\tChrome devrait passer en version 73 cette nuit avec les nouveautés suivantes :
\n\t\t\tDu côté du JS :
\n\t\t\t\t\tObject.fromEntries, une des propositions ajoutées au langage il y a 6 semaines a été implémentée
la proposition en stage 3 String.prototype.matchAll a été ajoutée ; il s'agit d'une nouvelle manière plus élégante et plus intuitive d'analyser des chaînes de caractères ; fini la bidouille avec String.prototype.replace pour récupérer les groupes capturées !
Sans oublier :
\n\t\t\t\t\tun mode sombre du navigateur est désormais disponible sous Mac, mais pas encore Windows, sans compter qu'il sera sans doute bientôt possible de détecter ceci via des CSS...
\n\t\t\t\t\t\tles Progressive Web Apps sont désormais supportées sous Mac, et peuvent donc désormais être installées sur n'importe quel système d'exploitation de bureau
\n\t\t\t\t\t\tPour plus d'informations, consultez les pages https://developers.google.com/web/updates/2019/03/nic73 et https://developers.google.com/web/updates/2019/01/devtools
\n\t\t\t\tAutre information ; deux organisations promouvant JavaScript ont annoncé leur fusion aujourd'hui : la Node.js Foundation et la JS Foundation vont ainsi former l'OpenJS Foundation ; plus qu'à espérer que les projets qu'elles menaient jusqu'ici, comme Node.js ou WebPack vont continuer à aller de l'avant ; l'annonce en détails : https://foundation.nodejs.org/announcements/2019/03/12/node-js-foundation-and-js-foundation-merge-to-form-openjs-foundation
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nUne information importante que j'avais ratée ; depuis plusieurs années déjà, les formules mathématiques sont supportées au sein du code HTML par Firefox et WebKit via le standard MathML ; un temps implémenté dans Chromium avant d'être retiré, MathML devrait bientôt y faire son retour, et ceci grâce au travail d'Igalia qui reprend désormais officiellement le projet en réalisant une toute nouvelle implémentation ; l'annonce en détails : https://mathml.igalia.com/news/2019/02/12/launch-of-the-project
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nVous voulez apprendre les dernières fonctionnalités de JavaScript ? consultez le livre ultra-complet d'Axel Rauschmayer (une référence quant à la vulgarisation de ce langage) sur les deux dernières versions du langage : https://exploringjs.com/es2018-es2019/index.html ; si avez besoin d'un cours encore plus complet sur l'intégralité du langage, je vous invite à consultez les autres livres du même auteur (https://exploringjs.com/index.html) qui sont très instructifs et avec beaucoup d'exemples concrets
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nUn peu d'histoire aujourd'hui avec la reconstitution du tout premier navigateur, WorldWideWeb, il y a presque trente ans : https://worldwideweb.cern.ch/ ; ça a bien évolué depuis
\n\t\tCet article a initialement été publié sur Discord avant d'être archivé ici et sur GitHub.
\nIl est temps d'inaugurer cette série avec pour commencer, l'actualité de ce 29 janvier qui est assez considérable, avec la sortie de deux nouvelles versions de navigateurs et la tenue du meeting bimestriel du TC39 :
\n\tTout d'abord Firefox 65 sort en version stable aujourd'hui ; voici un petit aperçu des changements :
\n\t\t\tDu côté des outils de développement :
\n\t\t\t\t\tun inspecteur d'éléments flex a été ajouté
\n\t\t\t\t\t\tun panneau répertoriant tous les changements effectués sur les CSS dans l'inspecteur a été ajouté
\n\t\t\t\t\t\tDu côté des CSS :
\n\t\t\t\t\tla compatibilité avec les autres navigateurs augmente :
\n\t\t\t\t\t\t\tles propriétés break-before, break-after et break-inside ont été ajoutées ; Firefox était le dernier navigateur à ignorer ces propriétés
la propriété -webkit-appearance est dotée de nouvelles valeurs dans la perspective de standardiser la propriété
l'implémentation de la propriété user-select converge vers celle des autres navigateurs, bien que sa spécification soit toujours en débat
les variables d'environnements env() ont été implémentées, ce qui permet actuellement de gérer le notch introduit avec l'IPhone X
Du côté du JS :
\n\t\t\t\t\tla proposition en stage 3 Intl.RelativeTimeFormat a été ajoutée ; malheureusement formatToParts n'est pas encore supporté
la proposition en stage 3 globalThis visant à standardiser le nom de l'objet global (window, self, global selon l'environnement...) a été implémentée, le nom global ayant été refusé car n'étant pas compatible avec la plateforme web ; cependant un autre nom, Global, est en débat cette semaine
Et beaucoup d'autres choses ! Pour plus d'informations, consultez les pages https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/65, https://hacks.mozilla.org/2019/01/firefox-65-webp-flexbox-inspector-new-tooling/ et https://www.fxsitecompat.com/en-CA/versions/65/
\n\t\t\t\tEnsuite Chrome 72 sort également en version stable aujourd'hui ; les changements notables :
\n\t\t\tDu côté du JS :
\n\t\t\t\t\tla proposition en stage 3 Intl.ListFormat a été implémentée
les attributs de classes publics ont été implémentés conformément à la proposition en stage 3 Class field declarations
\n\t\t\t\t\t\tPour le reste, consultez les pages https://developers.google.com/web/updates/2019/01/nic72 et https://developers.google.com/web/updates/2018/11/devtools
\n\t\t\t\tPour finir, le TC39 se réunit jusqu'à jeudi pour évaluer l'avancement des propositions pour faire évoluer le langage JS :
\n\t\t\t4 propositions viennent d'être ajoutées officiellement au langage :
\n\t\t\t\t\tObject.fromEntries, constituant la méthode inverse de Object.entries (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)
Well-formed JSON.stringify, corrigeant la génération de JSON invalide selon UTF-8 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Well-formed_JSON.stringify()
String.prototype.{trimStart,trimEnd}, standardisant les méthodes String.prototype.{trimLeft,trimRight} (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart et https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd)
Array.prototype.{flat,flatMap}, marquant enfin la fin du #smooshgate (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat et https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)
Si vous souhaitez suivre le développement du langage JS, tenez-vous au courant de l'évolution des différentes propositions sur la page https://github.com/tc39/proposals
\n\t\t\t\tVoilà j'espère que je ne vous ai pas trop noyés avec toutes ces informations. Sachez que la plateforme web évolue bien plus que ne pourrait le résumer cette liste, et que c'est donc une sélection assez personnelle et subjective que je vous ai concoctée. Si, par ailleurs, vous êtes à fond intéressés dans le développement web et tout ce qui gravite autour, n'hésitez pas à me demander ; je peux vous fournir un certain nombre de liens vers des ressources utiles.
\n