Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS
▻https://stripesgenerator.com
Générateur de rayures en background-image « pure CSS »
Voir aussi Mozdev pour la doc de linear-gradient : ▻https://developer.mozilla.org/fr/docs/Web/CSS/gradient
Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS
▻https://stripesgenerator.com
Générateur de rayures en background-image « pure CSS »
Voir aussi Mozdev pour la doc de linear-gradient : ▻https://developer.mozilla.org/fr/docs/Web/CSS/gradient
Redimensionnement d’arrière-plans SVG - CSS : Feuilles de style en cascade | MDN
▻https://developer.mozilla.org/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds
Règles de redimensionnement des fichiers SVG en background-image
Reducing The Need For Pseudo-Elements — Smashing Magazine
▻https://www.smashingmagazine.com/2021/09/reducing-need-pseudo-elements
For years, pseudo-elements have faithfully helped front-end developers implement creative designs. While they still have an important place, we can now leave #pseudo-elements behind in some scenarios, thanks to newer #CSS properties. Pseudo-elements still have a place. This article is not “never use pseudo-elements” but rather “we no longer have to use pseudo-elements as much”. We can style a number of popular user interface elements without the need for pseudo-elements. By relying less on pseudo-elements, we can write less CSS, eliminate nested elements, ignore stacking context issues, and forget about positioning.
Quelques cas pratiques sympas cf : #Angled Buttons, Button Wipes, Tiles With Screen Color #Overlays
« Marcel Moreau », c’est so frenchy
Sinon j’avais déjà lu sur cette propriété l’année dernière, mais ça va être tellement cool quand aspect-ratio
sera vraiment utilisable… (là ça n’est apparu que dans les navs de 2021, donc bon, en prod bof)
▻https://developer.mozilla.org/fr/docs/Web/CSS/aspect-ratio
Utiliser l’API Web Speech - Référence Web API | MDN
▻https://developer.mozilla.org/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API
L’API Web Speech fournit deux fonctionnalités différentes — la reconnaissance vocale, et la synthèse vocale (aussi appelée « text to speech », ou tts) — qui ouvrent de nouvelles possibiités d’accessibilité, et de mécanismes de contrôle. Cet article apporte une simple introduction à ces deux domaines, accompagnée de démonstrations.
you’re talking to me ?
▻https://www.liberation.fr/politique/a-nice-le-stress-des-haut-parleurs-sanitaires-20210424_3OXFM34JSBANTKWOXT
Depuis un an, les habitants, usés, doivent vivre au son des rappels audios de la police municipale, rabâchant les consignes de lutte contre l’épidémie de Covid-19.
<details> - HTML (HyperText Markup Language) | MDN
▻https://developer.mozilla.org/fr/docs/Web/HTML/Element/details
Un afficher/masquer en pur HTML 5 (sans JS ni CSS) : une balise <details>
avec un <summary>
pour faire le titre clicable
...et pour ajouter une animation : ▻https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal
Petit bémol : point de vue accessibilité ça ne semble pas idéal : ▻https://daverupert.com/2019/12/why-details-is-not-an-accordion (on se le réservera pour les outils où référencement et accessibilité ne sont pas des paramètres pris en compte donc...)
Marrant que ce truc soit aussi rigoureusement inconnu, malgré une excellente compatibilité (96% sur caniuse).
Ça veut rien c’est que c’est pas accessible : si c’est dans la norme HTML5 c’est que c’est accessible quand c’est utilisé pour ce que c’est prévu.
Mais c’est pas accessible pour en faire autre chose.
Donc la question est : pour quelle(s) utilisation(s) précise(s) c’est prévu ?
Ça a l’air d’être ça.
The <details> creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label can be provided using the <summary> element.
A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. If the first child of the <details> element is a <summary>, the contents of the <summary> element are used as the label for the disclosure widget.
« MDN › Hoisting »
▻https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
Les subtilités des déclarations qui sont hoisted (déclarations var et de fonctions) ou non (let, const) durant la phase de compilation.
Window.postMessage - Référence Web API | MDN
▻https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage
Une méthode pour la communication entre fenêtres/onglets de navigateur :
La méthode window.postMessage, quand elle est appelée, provoque l’envoi d’un MessageEvent à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d’évènements restants si window.postMessage est appelée depuis un gestionnaire d’évènement, des timeouts en attente enregistrées auparavant, etc.) Le MessageEvent est de type message, a une propriété data qui est initialisée à la valeur du premier argument passé à window.postMessage, une propriété origin correspondant à l’origine du document principal de la fenêtre appelant window.postMessage au moment où window.postMessage a été appelée, et une propriété source qui est la fenêtre depuis laquelle window.postMessage est appelée. (les autres propriétés standard d’évènement sont présentes avec leurs valeurs attendues).
...et les précautions de sécurités préconisées :
Précautions de sécurité
– Si vous ne prévoyez pas de recevoir de messages depuis d’autres sites, n’ajoutez pas de gestionnaire d’évènement pour les évènements message. C’est un moyen sûr d’éviter les problèmes de sécurité.
– Si vous prévoyez de recevoir des messages depuis d’autres sites, vérifiez toujours l’identité de l’expéditeur à l’aide des propriétés origin et si possible source. Toute fenêtre (y compris, par exemple, ▻http://evil.example.com) peut envoyer un message à toute autre fenêtre, et vous n’avez aucune garantie qu’un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l’identité, vous devriez toujours vérifier la syntaxe du message reçu. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.
– Spécifiez toujours explicitement une origine de destination, jamais *, quand vous utilisez postMessage pour envoyer des données à d’autres fenêtres. Un site malicieux peut changer l’adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l’aide de postMessage.
#postMessage #javascript #politique_de_sécurité #Same_Origin_Policy #SOP
@seenthis la petite nouveauté de la semaine, les posts issus d’un flux RSS sont marqués comme tel, cf ▻https://github.com/seenthis/seenthis_squelettes/issues/177
Visuellement ça ne donne pas grand chose, à part la mention « via RSS » en bas du message à côté du nom de la personne qui poste.
J’aime beaucoup, mais je me dis que la mention pourrait être en gris comme les autres mentions sur la même ligne. C’est possible ?
Bonne idée.
Même remarque que @biggrizzly, je le verrais bien comme la ligne en gris, peut être avec un logo RSS : en tout cas là sur ▻https://seenthis.net/messages/887016 il est après la Licence et c’est confusionnant du coup me semble t’il.
Ça n’a pas l’air de s’enlever.
@marcimat arf bien vu pour l’affichage après la licence, je corrige ça asap.
@marcimat & @biggrizzly voilà, c’est affiché au bon endroit et en gris comme demandé.
@fil & @monolecte faites moi signe s’il faut adapter afin que la mention soit retirée quand on édite un post RSS après coup.
Impeccable IMHO, bravo et merci !
Pas d’opinion sur le fait de supprimer la mention en cas d’édition d’un post rss...
Donc après édition, ça affichera @user <del>via RSS</del><blink>(modifié)</blink>
:)
Comme @biggrizzly, je n’ai pas d’opinion… mais c’est mieux en tout gris, effectivement.
Marquee. Ça m’était sorti de la tête ! ▻https://developer.mozilla.org/fr/docs/Web/HTML/Element/marquee
Je n’en reviens pas… ça fonctionne... encore !
@fil et @marcimat voilà c’est en place ▻https://github.com/seenthis/seenthis/commit/47cc4130a3466d58acee71a05c2a4a78a353749a mais sans marquee blink ou autre, désolé :p
clamp() - CSS : Feuilles de style en cascade | MDN
▻https://developer.mozilla.org/fr/docs/Web/CSS/clamp()
La fonction CSS clamp() permet de ramener (d’écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction clamp() peut être utilisée à tout endroit où une valeur de type <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> peut être utilisée.
Je pense que je vais jouer avec A-Frame :
►https://aframe.io
Et donc @fil l’année dernière :
▻https://seenthis.net/messages/778672
Chaînage optionnel (optional chaining) - #JavaScript | MDN
▻https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining
L’opérateur de chaînage optionnel ?. permet de lire la valeur d’une propriété située profondément dans une chaîne d’objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. L’opérateur ?. fonctionne de manière similaire à l’opérateur de chaînage ., à ceci près qu’au lieu de causer une erreur si une référence est null ou undefined, l’expression se court-circuite avec undefined pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne undefined si la fonction donnée n’existe pas.
Découvert dans les notes de version de codium cf :
Use the new convert to optional chain refactoring
to quickly convert a sequence of expressions such as a && a.b && a.b.c()
to instead use optional chaining: a?.b?.c()
. Just select an expression to use it:
par contre ça vaut que pour les navs relativement récents (cette année seulement), donc quand c’est pour du dev JS côté serveur ou cli, genre avec node, ça va, mais si c’est pour du code exécuté par les navs, ça fera des erreurs chez encore pas mal de monde
@RastaPopoulos : l’écriture semble tellement pratique que tu peux outrepasser le problème des navigateurs en codant en ES6 avec (par exemple) Gulp.babel pour générer le code « JS old style » :
if (toto?.titi?.tata === 'patate') {
if ((toto === null || toto === void 0 ? void 0 : (_toto$titi = toto.titi) === null || _toto$titi === void 0 ? void 0 : _toto$titi.tata) === 'patate') {
Utiliser Fetch - Référence Web API | MDN
▻https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch
L’API Fetch fournit une interface JavaScript pour l’accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale fetch() qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.
Ce genre de fonctionnalité était auparavant réalisé avec XMLHttpRequest. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme Service Workers. Fetch fournit aussi un endroit unique et logique pour la définition d’autres concepts liés à HTTP comme CORS et les extensions d’HTTP.
Using ffmpeg to compress, convert, and resize videos - DEV
▻https://dev.to/benjaminblack/use-ffmpeg-to-compress-and-convert-videos-458l
Réglages de compression mp4 ou webm avec FFMPEG.
Voir aussi :
– discussion sur les différentes options : ▻https://gist.github.com/lukehedger/277d136f68b028e22bed
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 :
concepts de base : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Références : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
Exemples : ►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.