La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
▻https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html
Utiliser les media query en javascript
Voir aussi :
– la doc MDN : ▻https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia
– des exemples : ▻https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Tester_les_media_queries
Éléments HTML5 de structure - romy.tetue.net
▻http://romy.tetue.net/elements-html-5-de-structure
Le mémo de romy.tetue.net pour l’organisation de la structure d’une page en HTML5
Sur les imbrications section/article voir aussi : ▻https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
Sur la structuration implicite du plan des éléments de la page généré par ces balises, voir : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document
Responsive Images : comprendre srcset et sizes - Alsacreations
▻https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html
Images responsives : les attributs srcset et size de la balise <img> pour utilisation de multiples source et taille pour une image
Voir aussi : ▻https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web
#srcset #size #img #image #responsive #adaptive_image #HTML5 #CSS
Flexbox ou Grid Layout ? - Alsacreations
▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html
CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
Voir aussi :
– ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
– ▻https://la-cascade.io/utiliser-grid-ou-flexbox
– sur MDN :
. ressources pour grid layout : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
▻https://gridbyexample.com/examples
. ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout
Mozilla lance Fluent 1.0 pour révolutionner la localisation des logiciels
▻https://blog.mozilla.org/press-fr/2019/04/17/mozilla-lance-fluent-1-0-pour-revolutionner-la-localisation-des-logici
Mozilla propose en open source un système évolué de traduction ("localisation") des chaînes de langue d’un logiciel/d’une appli web :
Fluent permet de s’adapter à la grammaire et au style d’autres langues, indépendamment de la langue source. Cela permet aux développeurs d’écrire du code agnostique du langage et aux localisateurs de réaliser des traductions naturelles plus rapidement et plus facilement.
Système basé sur des fichiers au format FTL :
FTL is a localization file format used for describing translation resources. FTL stands for Fluent Translation List.
FTL is designed to be simple to read, but at the same time allows to represent complex concepts from natural languages like gender, plurals, conjugations, and others.
Quelques ressources pour Fluent :
– la page du projet Fluent : ▻https://projectfluent.org
– le guide de l’utilisateur de Fluent : ▻https://projectfluent.org/fluent/guide
– un exemple d’implémentation pour javascript : ▻https://github.com/projectfluent/fluent.js
Il ne semble (malheureusement) pas (encore ?) exister d’implémentation PHP...
En parallèle pour simplifier le boulot des traducteurs.trices Mozilla propose un outil WYSIWYG de gestion des traductions : Pontoon
– présentation de Pontoon : ▻https://developer.mozilla.org/fr/docs/Mozilla/Localization/Localiser_avec_Pontoon
– un bac à sable pour prendre en main/tester Pontoon : ▻https://pontoon.mozilla.org/fr/tutorial/playground/?string=189479
– intégrer Pontoon à un projet : ▻https://developer.mozilla.org/fr/docs/Mozilla/Implementer_Pontoon_sur_un_projet_Mozilla
– la doc officielle (en anglais) : ▻https://mozilla-pontoon.readthedocs.io/en/latest
#traduction #localisation #fluent #pontoon #mozilla #open_source #SPIP
Chrome, Safari et d’autres navigateurs ne vont plus permettre de désactiver l’audit de lien, qui permet de suivre les clics sur les liens de sites
▻https://www.developpez.com/actu/255113/Chrome-Safari-et-d-autres-navigateurs-ne-vont-plus-permettre-de-desactiv
L’article original : ▻https://lapcatsoftware.com/articles/Safari-link-tracking.html
L’audit de lien dont il est question ici est l’attribut « ping » des balises « a » (= lien hypertexte) qui entraîne un POST tout à fait irrespectueux de la vie privée sur l’URL donnée dans la valeur de l’attribut : cf la doc de cet attribut sur MDN : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Element/a#attr-ping qui précise bien :
Cet attribut est généralement utilisé pour tracer un utilisateur.
Cet attribut a été introduit par la version 5.3 de HTML5 : cf ▻https://www.w3.org/TR/html53/links.html#sec-hyperlink-auditing
A noter un début de discussion remettant en cause la pertinence technique du mécanisme utilisé qui pose clairement ses enjeux pour le W3C :
Hyperlink auditing is important because advertising and referral-based user tracking are two of the primary means of generating revenue via Web sites. However, by its very nature, such tracking must be comprehensive, accurate, and unavoidable by a typical user or it simply won’t be relied upon by site owners and advertisers.
(cf le premier message de ▻https://lists.w3.org/Archives/Public/public-html/2009Dec/thread.html#msg183)
...ce qui donne un exemple typique des intérêts et de la partialité du W3C dans la fabrication des standards du web !
#navigateur #vie_privée #ping #hyperlink-auditing #html5 #w3c #standard #lobby
Va falloir jouer avec cette nouvelle #media_query : prefers-color-scheme - #CSS
▻https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme
La caractéristique média prefers-color-scheme permet de détecter les préférences exprimées par l’utilisateur quant au thème à utiliser (sombre ou clair).
Si je comprends bien, ça vient d’être intégré dans Safari de MacOS 10.4.4, pas encore testé. Il va falloir tester si c’est pris en compte dans les webviews des apps iOS, là où ça me semble le plus directement utile.
Guide to Web Authentication
▻https://webauthn.guide
The Web Authentication API (also known as WebAuthn) is a specification written by the W3C and FIDO, with the participation of Google, Mozilla, Microsoft, Yubico, and others. The API allows servers to register and authenticate users using public key cryptography instead of a password.
Système d’authentification basé sur une clé publique/privée et non plus sur un mot de passe (enfin !). Reste quand même le problème du stockage de la clé privée et son transfert entre les différents terminaux d’un utilisateur...
Prévu pour permettre la fédération d’identité côté utilisateur, c’est potentiellement le futur pour l’authentification web (?) Reste à savoir si les grandes plate-forme et les utilisateurs vont s’en emparer ou si ça ne sera qu’une tentative de plus (comme le moribond OpenID par ex)...
Voir aussi :
– la doc de l’API sur MDN (en anglais) : ▻https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
– une démo jouable (POC) avec code source et débogueur : ▻https://webauthn.org
– une implémentation javascript + node.js : ▻https://github.com/fido-alliance/webauthn-demo avec un explication détaillée : ▻https://slides.com/fidoalliance/jan-2018-fido-seminar-webauthn-tutorial#/25
– la recommandation du W3C : ▻https://www.w3.org/TR/webauthn
– la compatibilité des navigateurs : ▻https://www.caniuse.com/#feat=webauthn
#WebAuthn #authentification #API #openid #SPIP #web_dev #auth
HTML5 Pre-resize images before uploading - Stack Overflow
▻https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading
Exemple de manipulation d’image par le navigateur (redimensionnement) avant son POST vers un serveur
Le billet original sur mozilla-dev : ►https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader
La doc de l’API File de HTML5 : ▻https://developer.mozilla.org/fr/docs/Web/API/File/Using_files_from_web_applications
TouchEvent | MDN
▻https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
La documentation de l’API TouchEvent pour gérer les évènements de type « touch » dans une application web
#TouchEvent #html5 #api #mdn #documentation
Browser detection using the user agent
▻https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
“When considering using the user agent string to detect which browser is being used, your first step is to try to avoid it if possible. Start by trying to identify why you want to do it.”
Cross-origin resource sharing (CORS) - HTTP | MDN
▻https://developer.mozilla.org/fr/docs/Web/HTTP/CORS
Le « Cross-origin resource sharing » (CORS) ou « partage des ressources entre origines multiples » (en français, moins usité) est un mécanisme qui consiste à ajouter des en-têtes HTTP afin de permettre à un agent utilisateur d’accéder à des ressources d’un serveur situé sur une autre origine que le site courant.
Liste des types MIME communs - HTTP | MDN
▻https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
Si je ne trompe pas, @seenthis n’envoie pas de notifications quand il y a de nouvelles publications dans la page. C’est un mécanisme utilisé par Twitter, Slack, Mastodon, Riot, etc. et qui sert pas mal dans des applications comme Rambox par exemple. Vous croyez que c’est faisable ? Facile ? Utile ?
Il y a tout de même beaucoup d’options dans le profil. Laquelle manque-t-il ?
M’expédier un courrier électronique quand...
– nouveaux billets / un nouveau billet est posté par un auteur que je suis
– réponses à mes billets / quelqu’un répond à un de mes billets
– réponses à un partage / quelqu’un répond à un billet que j’ai partagé
– partage / quelqu’un a partagé un de mes billets
– conversations / quelqu’un répond à un billet auquel j’ai moi-même répondu
– nolife / un auteur que je suis répond à n’importe quel billet
– un ami qui vous veut du bien / quelqu’un me suit
– mes billets / recevoir une copie de mes propres messages
Je me suis mal exprimé. Je parle de montrer dans le titre le nombre de messages non lus, genre : « Seenthis (4) ».
Je ne sais pas du tout comment ils le font, mais ce n’est pas dans le HTML, peut être avec ▻https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API.
Je n’ai pas l’impression que ça soit standard, mais peut être que la solution serait un service que les clients consomment. Voir js_unread dans ▻https://github.com/saenzramiro/rambox/blob/master/app/model/Readme.md
url() - A simple, lightweight url parser for JavaScript ▻http://www.websanova.com
▻https://github.com/websanova/js-url
alternativement : les interfaces natives URL() et URLSearchParams() qui semblent plus complètes et pratiques que cette lib :
▻https://developer.mozilla.org/en-US/docs/Web/API/URL
▻https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
document.execCommand - Référence Web API | MDN
▻https://developer.mozilla.org/fr/docs/Web/API/Document/execCommand
Edition directe d’un document HTML (designMode) ou d’un bloc de contenu (contentEditable) dans le navigateur : la doc des commandes pour manipuler le contenu de la zone modifiable. La plupart des commandes affectent la sélection du document (gras, italique, etc.), tandis que d’autres ajoutent de nouveaux éléments (ajout d’un lien) ou affectent une ligne entière (indentation).
Voir aussi :
– une démo simple : ▻https://codepen.io/eniotna/pen/OVZvMG
– le code d’un éditeur complet : ▻https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
#édition #WYSIWYG #SPIP #crayons #javascript #contentEditable #execCommand
New #flexbox guides on MDN – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/01/new-flexbox-guides-on-mdn
Et tout est déjà traduit en français.
Les concepts de base des boîtes flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox
Les liens entre flexbox et les autres méthodes de disposition
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions
L’alignement des éléments au sein d’un conteneur flexible
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible
Ordonner les éléments flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordonner_%C3%A9l%C3%A9ments_flexibles
Contrôler les proportions des éléments flexibles le long de l’axe principal
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contr%C3%B4ler_les_proportions_des_bo%C3%AEtes_flexibles_le_long_
Maîtriser le passage à la ligne des éléments flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_fle
Les cas d’utilisation classiques des boîtes flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox
La rétrocompatibilité de flexbox
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/R%C3%A9trocompatibilite_de_flexbox
#intégration #web #HTML #CSS #grid #documentation
#headless mode - Mozilla | MDN
▻https://developer.mozilla.org/en-US/Firefox/Headless_mode
#screenshot #capture #firefox #cli
Validation des formulaires de données - Guides pour développeurs Web | MDN
▻https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire
Une des fonctionnalités de HTML5 est de pouvoir valider la plupart des données des utilisateurs sans avoir recours à des scripts. On utilise pour cela des attributs de validation sur les éléments du formulaire.
et pour quelques exemples basiques : ▻http://dmouronval.developpez.com/tutoriels/html/formulaires-html5
Optimisez vos polices web - Alsacreations
▻https://www.alsacreations.com/article/lire/1741-Optimisez-vos-polices-web.html
Gestion des polices web : bonnes pratiques, optimisations, formats, stratégies de chargement...
Présente aussi la (nouvelle) spécification W3C « rel=preload » pour précharger les ressources d’une page (cf ▻https://developer.mozilla.org/fr/docs/Web/HTML/Pr%C3%A9charger_du_contenu)
Ressources supplémentaires :
- une collection de webfont optimisées : ▻https://github.com/alsacreations/webfonts
- le guide complet de toutes les alternatives pour la gestion des polices dans les pages web (en anglais) : « A Comprehensive Guide to Font Loading Strategies » : ▻https://www.zachleat.com/web/comprehensive-webfonts
