#CSS : place-content
▻https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
The place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.
Ne rigole pas, je découvre donc seulement maintenant cette ligne qui va changer ma vie :
place-content: center
image-orientation - CSS : Cascading Style Sheets | MDN
▻https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation
propriété CSS 3 pour permettre l’affichage d’une image selon son EXIF ou pas
#image-orientation #EXIF #image #CSS #SPIP
TIL about the optional chaining operator.
The optional chaining operator (?), allows you to read the value of a property located deep in a chain of connected objects without having to check every single reference in the chain.
▻https://blog.gogrow.dev/say-bye-bye-to-bad-javascript-practices-5971688ba80a
« 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.
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
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
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.”
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
Using SVG | CSS-Tricks
▻https://css-tricks.com/using-svg/#article-header-id-17
Différentes méthodes pour utiliser des SVG en image-background.
Voir aussi :
– un exemple simple en inline non-compressé : ▻https://codepen.io/netsi1964/pen/HGJms
– ▻http://helephant.com/2009/08/12/svg-images-as-css-backgrounds
– les options de manipulation du fichier selon les attributs dans le SVG : ▻https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds
HTML5 Geolocation
▻https://www.sitepoint.com/html5-geolocation
The Geolocation API of HTML5 helps in identifying the user’s location, which can be used to provide location specific information or route navigation details to the user.
Using geolocation - Web APIs | MDN
▻https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
The geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.
The geolocation object
The geolocation API is published through the navigator.geolocation object.
etc.
HTML5 Geolocation
▻http://www.w3schools.com/html/html5_geolocation.asp
Locate the User’s Position
The HTML Geolocation API is used to get the geographical position of a user.
Since this can compromise privacy, the position is not available unless the user approves it.
Using HTML Geolocation
The getCurrentPosition() method is used to return the user’s position.
The example below returns the latitude and longitude of the user’s position
Handling Errors and Rejections
The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user’s location
Displaying the Result in a Map
To display the result in a map, you need access to a map service, like Google Maps.
In the example below, the returned latitude and longitude is used to show the location in a Google Map (using a static image)
Location-specific Information
This page has demonstrated how to show a user’s position on a map.
Geolocation is also very useful for location-specific information, like:
Up-to-date local information
Showing Points-of-interest near the user
Turn-by-turn navigation (GPS)
Client-Side Storage - HTML5 Rocks
▻https://www.html5rocks.com/en/tutorials/offline/storage
This is an overview of client-side storage, a general term for several separate but related APIs: Web Storage, Web SQL Database, Indexed Database, and File Access. Each of these techniques provides a distinct way to store data on the user’s hard drive, instead of the server, where data usually resides. There are two main reasons to do this: (a) to make the web app available offline; (b) to improve performance. For a detailed explanation of the use cases for client-side storage, see the HTML5Rocks article, “Offline”: What does it mean and why should I care?.
The APIs share a similar scope and similar principles. So let’s first understand what they have in common before launching to the specifics of each.
Building A Simple Cross-Browser Offline To-Do List With IndexedDB And WebSQL – Smashing Magazine
▻https://www.smashingmagazine.com/2014/09/building-simple-cross-browser-offline-todo-list-indexeddb-websql
Storage Inspector - Firefox Developer Tools | MDN
▻https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:
– Cache Storage (new in Firefox 47) - any DOM caches created using the Cache API.
– Cookies - All the cookies created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.
– Local Storage - All local storage items created by the page or any iframes inside the page.
– Session Storage - All session storage items created by the page or any iframes inside the page.
– IndexedDB - All IndexedDB databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.
For the time being, the Storage Inspector only gives you a read-only view of storage. But we’re working to let you edit storage contents in future releases.
#cookie #storage #local_storage #inspector #webdev #firebug #firefox_devtools #mdn
Using the Web Animations API - Web APIs | MDN
▻https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
The Web Animations API lets us construct animations and control their playback with JavaScript. This article will start you off in the right direction with fun demos and tutorials featuring Alice in Wonderland.
The Web Animations API opens the browser’s animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both CSS Animations and CSS Transitions, and leaves the door open to future animation effects. It is one of the most performant ways to animate on the Web where supported, letting the browser make its own internal optimizations without hacks, coercion, or Window.requestAnimationFrame().
With the Web Animations API, we can move interactive animations from stylesheets to JavaScript, separating presentation from behavior. We no longer need to rely on DOM-heavy techniques like writing CSS properties and scoping classes onto elements to control playback direction. And unlike pure, declarative CSS, JavaScript also lets us dynamically set values from properties to durations. For building custom animation libraries and creating interactive animations, the Web Animations API might be the perfect tool for the job.
Pour la mise au point/débogage de ces animations, la version de firebug fusionnée avec Firefox DevTools (à partir de Firefox 49, cf ▻https://blog.getfirebug.com/2016/06/07/unifying-firebug-firefox-devtools) propose « Animation Inspector », une console spécifique : cf ▻https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations
Pour aller plus loin : ▻https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate
Pour la compatibilité avec les navigateurs ne supportant pas l’API Web Animations (Internet Explorer et Safari actuellement) : ▻https://github.com/web-animations/web-animations-js
Ce soir, #seenthis doit changer d’hébergement. On va essayer de faire au mieux pour que ça se passe sans accroc, mais il est possible qu’il y ait quelques coupures du signal à certains moments.
Horaire prévu : entre 22h et minuit (heure française)
Ouf... généralement, à cette heure-là, je dors #heureux_les_couche-tôt !
C’est une montée en charge, un truc de maintenance… ?
Arf ! Pour moi c’est l’heure de pointe... du coup si vous avez besoin d’aide pour tester des trucs, n’hésitez pas à frapper à la lucarne hein !
Cf. ►http://seenthis.net/messages/420961
C’est essentiellement un choix politique, de savoir s’il y a une communauté pour s’occuper de ça, ou si ça échoit toujours au même (en l’occurrence c’était @arno depuis le début, puis moi depuis le crash il y a une grosse année). Maintenant c’est (censé) devenir collectif.
Et aussi un peu ▻http://seenthis.net/messages/490093 (#https)
\o/ ça semble bien touner
ah, apparemment, c’est fait !
(je dois me reconnecter)
BRAVO !
Et les fameuses 2 minutes de #merdrecestquoimonmotdepasse !
Bravo tout le monde !
Et 2 minute de sueur devant un message intempestif :
La page n’est pas redirigée correctement
Firefox a détecté que le serveur redirige la demande pour cette adresse d’une manière qui n’aboutira pas.
La cause de ce problème peut être la désactivation ou le refus des cookies.
Mais c’est bon c’est revenu à la normale sans rien changer.
merci @seenthis . Depuis la migration, mon poil est plus doux.
Merci :)
Y a pas des boutons à la facebook dans la v2 ?
C’est pas une V2 :) Yeah ! Super le passage de relais ! Beaucoup de choses obscures dans les échanges sur la liste, mais super intéressant.
Ce serait bien d’ajouter dans les pages #seenthis, une page sur le fonctionnement collaboratif du nouvel hébergement et sur les différentes manières de participer avec les liens.
J’ai l’impression d’un petit problème ce matin : pour les contenus externes du genre vidéo Youtube chargée par oEmbed en javascript après avoir cliqué sur l’image de prévisu :
La console de Firefox me dit « Blocage du chargement du contenu mixte actif ». Et du coup impossible de lire les vidéos à l’intérieur de Seenthis.
▻https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
@rastapopoulos Ah oui, pareil avec Safari, contenu Youtube bloqué :
[blocked] The page at about:blank was not allowed to display insecure content from ▻http://www.youtube.com/embed/aH_FP67cLP0?rel=0&autoplay=1.
Si je comprends bien, c’est parce que désormais Seenthis est en https, et les navigateurs refusent d’y charger du contenu externe en http.
Un souci avec https. J’ai dû changer d’ordi pour arriver ici.
Sous MacOS X 10.5, je n’arrive pas à avoir les certificats SSL
Je suspecte que dans oembed, à la fabrication du lien d’embed vers l’extérieur, au lieu de http://youtube.com, il faut mettre juste //youtube.com.
pour les embed https voir patch ici ►https://github.com/seenthis/seenthis/commit/d389754065eff70d1ea29882374ed4b0959f3672
@nidal mettre // c’est la première chose que j’ai essayée, mais ça plantait, car spip applique un filtre url_absolue qui n’est pas au courant de l’existence de cette notation. En fait pour nous ça revient au même que mettre https, et pour d’autres instances de seenthis qui ne sont pas https, ça marchera quand même.
Mais @fil comment tu peux être sûr que le service en question supporte HTTPS ? Évidemment la plupart sont des gros services qui l’ont, mais ya quand même aucun test, aucun assurance que la vidéo, le son, la playlist, etc, fonctionnent aussi en HTTPS, non ?
Oui, ok comme le dit le log de commit « on fait l’hypothèse que… » :)
@rastapopoulos Le plugin autoembed ne travaille qu’avec un nombre limité de sources.
Au fait, @fil, au passage, il faudrait en profiter pour ajouter un allowFullScreen dans les iframe, de façon à ce que ça autorise le plein écran pour les vidéos jouées dans Seenthis.
allowFullScreen fait et appliqué
▻http://zone.spip.org/trac/spip-zone/changeset/98620
Grand #merci l’équipe pour cette migration, https et le fullscreen possible sur les vidéos ! Vous êtes géniaux :)
Ah tiens, mes flux RSS sont silencieux. Je les passe en HTTPS et là : « connection closed by peer ». C’est grave ? Par exemple ▻https://seenthis.net/people/suske/follow/feed mais en fait c’est dans l’application que cela cale, pas dans le navigateur. Hum. I feel alone :-)
Édit : ça maaaaarche maintenant ! Youpie !! #merciiii
Ça y est, c’est bon sur ma vieille casserole.
Encore merci. Pour TOUT ! et aussi pour la réactivité. Bravo !
Merci et bravoooooo ! Longue vie à @seenthis !
même si je ne comprends pas bien ce qui s’est passé (c’est-à-dire qu’on est partis, mais où ? (et quel est donc ce « s » à l’http qui à l’air tout changer ?)) merci oui.
Cool, HTTPS. Supervision changée pour se connecter en HTTPS. Rendez-vous le 13 septembre pour l’expiration du certificat :-)
@tintin Le S de HTTPS signifie Secure (Sûr). Cela indique que la communication entre ton navigateur et SeenThis est chiffrée (rendue illisible par la cryptographie), ce qui 1) est indispensable pour protéger ton compte (autrement, lire le mot de passe serait trop facile) 2) perturber le travail des surveillants (genre NSA, Beauveau, etc).
Je sais pas si c’est une « bonne pratique », mais chez moi j’ai ajouté un job cron hebdomadaire :/etc/letsencrypt/letsencrypt-auto renew
Si le certificat est proche de l’expiration mais n’est pas expiré il est automatiquement renouvelé selon une procédure allégée (automatique).
@Fil Icinga préviendra 15 jours avant :-)
Ah, l’API a un problème ? Je ne peux plus soumettre de nouveaux seens par l’API, « HTTP Error 405 : No message found »
@stephane peux-tu nous filer une url qui pose problème ?
Je viens de tester seenthis.net/api/messages/341663 et ça semble bien fonctionner.
@b_b Réparé (cf. le rapport de bogues sur Github)
Félicitations et merci pour la proposition de transformer la gestion de #seenthis dans un projet collectif !
J’y vois quelques question de caractère recurrent :
– Quand est-ce qu’on écrira la doc nécessaire pour monter et gérer des instances #seenthis sous SPIP 3.n.n ?
– La doc utilisateurs me semble être un peu éparpillée, comment y remédier ? (Contrairement à #SPIP ceci me semble facilement faisable por #seenthis)
– des patchs du genre ►https://github.com/seenthis/seenthis/commit/d389754065eff70d1ea29882374ed4b0959f3672 risquent d’emmener le projet à un point où une documentation une fois écrite marchera à un moment donné mais sera invalidée par les changements postérieurs.
– Où en est l’idée de faire communiquer entre eux des installations de #seenthis (Il a été question d’utiliser XMPP pour connecter les bdd etc.) ?
– Est-ce qu’on se voit cet été pour travailler sur les aspects techniques et politiques du projet #seenthis ?
– Un exemple : qui fera partie du collectif et quelle règles y seront appliquées ?
P.S. bon anniverversaire #SPIP :-)
Functions and classes available to Web Workers
▻https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
there are a variety of functions available from the DOM to workers. This article provides a list of those.
Configuring servers for #ogg media - #HTTP | MDN
▻https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media
As of #Firefox 41, the X-Content-Duration #header is no longer supported. Tags: Firefox ogg #XContentDuration header HTTP #clevermarks
WebIDL bindings - Mozilla | MDN
▻https://developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings#Implementing_WebIDL_using_Javascript
To implement a WebIDL interface in JavaScript, first add a WebIDL file, in the same way as you would for a C++-implemented interface.
Cross-tab Communication
▻http://ponyfoo.com/articles/cross-tab-communication
Ouvrir quelques pages du même site dans plusieurs onglets sans être connecté. Se connecter dans un des onglets. Se retrouver connecté dans tous les onglets. Le rêve. Tags : #localStorage #synchronisation #onglet #navigateur #clevermarks
Sur le scenario exposé (authentification sur plusieurs onglets), c’est également possible de s’en tirer avec window.postMessage() — qui marche sur IE8.
▻https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
En tout cas, c’est vrai que cette utilisation de localStorage est assez maligne !