search

les-briques-du-web / notes

2 stars 0 forks source link

Episode #5 : 11/05/2021 #19

Open EmmanuelDemey opened 3 years ago

EmmanuelDemey commented 3 years ago
validé titre durée présentation sujet issues
👌 météo du Web 5" @EmmanuelDemey :question:
👌 Romuald du cnumr 20" @jlengrand et @LostInBrittany Sobriété du web
👌 Rubrique historique 10" @noelmace Les dangers de l'Open Source 😱 https://github.com/fullwebdev/fullwebdev/pull/85
👌 Focus API 5/10" @hsablonniere URL & URLSearchParams

PR: https://github.com/les-briques-du-web/les-briques-du-web-website/pull/1

hsablonniere commented 3 years ago

Je vais faire le focus API sur l'objet URL 10 minutes comme d'hab.

hsablonniere commented 3 years ago

https://developer.mozilla.org/en-US/docs/Web/API/URL

hsablonniere commented 3 years ago

Voici un dump brut de mes notes:

Chronique sur URL

* Alors aujourd'hui on va faire un focus sur l'API URL (et sur URLSearchParams)
  * https://developer.mozilla.org/en-US/docs/Web/API/URL
  * https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
* Donc des APIs qui sont arrivées respstivement dans nos navigateurs
  * URL Fx 10-2013 Cr 01-2014 Sf 09-2014
  * URLSearchParams Fx 01-2016 Cr 03-2016 Sf 03-2017
  * Node v7 (et 6.13) (en // des APIs legacy) + v10 en global
    * https://nodejs.org/api/url.html
    * https://nodejs.org/api/querystring.html
* Si vous ne devez retenir qu'une seule chose de cette chronique :
  * N'essayez pas de parser des URLs vous même avec des regexs
  * N'essayez pas de construire des URLs en faisant de la concaténation de chaîne
* Je dis ça car il y a pas mal de pièges auxquels on ne pense pas forcément
* J'en veux pour preuve la complexité des multiples spécifications
  * https://datatracker.ietf.org/doc/html/rfc3986
  * https://datatracker.ietf.org/doc/html/rfc3987
  * https://url.spec.whatwg.org/
  * https://github.com/bagder/docs/blob/master/URL-interop.md
* Il faut faire particulièrement attention quand on veut mettre des query params qui viennent d'entrée utilisateur
* Alors comment ça marche ?
  * EXAMPLE basics
    * On parse avec le constructeur `new URL()`;
    * On sérialise avec `.toString()`
    * Entre les deux on peut modifier n'importe quelle partie de l'URL
  * EXEMPLE search-params
    * Au delà d'un accès chaîne de caractère assez simple à la query string avec `search`, on a un objet `searchParams` avec pas mal de méthodes.
    * https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#methods
    * Je m'en sers sur un projet où j'ai un worker CloudFlare codé en JS
      * https://github.com/CleverCloud/clever-components-cdn/blob/master/cf-worker/index.js
  * EXEMPLE pieges
    * Ainsi on a pas à se prendre la tête avec l'échapement, pas de pièges
* Le dernier point que je veux mettre en avant c'est le fait que le constructeur accepte deux paramètres
  * EXEMPLE esm-assets
  * ça permet de construire des URL relative par rapport à une base
  * c'est assez pratique dans des modules ES pour faire référence à une URL d'asset de manière relative
    * on peut ainsi éviter d'utiliser des imports pour ça, ce qui n'est pas du tout standard
  * nous on fait ça dans nos composants
    * https://github.com/CleverCloud/clever-components/blob/master/src/tcp-redirections/cc-tcp-redirection.js#L12
  * et du coup pour que le bundler puisse trouver ces assets, on a contribué un super plugin rollup au projet modern web
    * https://modern-web.dev/docs/building/rollup-plugin-import-meta-assets/
hsablonniere commented 3 years ago

On peut partager les liens si besoin ;-)

nweldev commented 3 years ago

RàF :