« Browser Sign-in API » by Eiji Kitamura and Meggin Kearney, 30.07.2019
▻https://developers.google.com/web/fundamentals/security/credential-management/retrieve-credentials
#webFundamentals #authentication #webComponents
« Browser Sign-in API » by Eiji Kitamura and Meggin Kearney, 30.07.2019
▻https://developers.google.com/web/fundamentals/security/credential-management/retrieve-credentials
#webFundamentals #authentication #webComponents
« Detect DOM changes with Mutation Observers » by Paul Kinlan ▻https://developers.google.com/web/updates/2012/02/Detect-DOM-changes-with-Mutation-Observers #webcomponents
The PRPL Pattern
▻https://developers.google.com/web/fundamentals/performance/prpl-pattern
“PRPL is a new pattern we feel has great potential. At this stage, we welcome experimentation with it while we iterate on the ideas in the pattern and collect more data on where it offers the greatest benefits.”
Auto-héberger les polices #Google Fonts sur #WordPress | Angristan
▻https://angristan.fr/auto-heberger-polices-google-fonts-wordpress
Mais c’est surtout l’aspect vie privée, qu’il est difficile de ne pas évoquer dès que l’on touche à un service Google, puisque chaque visiteur va devoir télécharger quelques fichiers depuis les serveurs de Google. Et donc on a presque un service similaire : avec votre adresse IP et votre user-agent, Google va pouvoir vous suivre sur tous les sites qui utilisent Google Fonts et donc exploiter ces donnée à des fins commerciales par exemple. Bref ça pue, ça apporte pas grand chose, alors ça dégage.
Je vous invite donc à éviter ce genre de CDN, et à lire cet article de Pepper & Carrot : « My fight against CDN libraries » .
mmmh. (désolé, j’ai validé mon message par erreur, et entretemps, un ami est arrivé à la maison :) )
Ça peut éventuellement suffire pour un usage commun. De façon plus pointue, il faut se méfier : les fichiers hébergés sur le service de google sont optimisés en fonction du système d’exploitation et du navigateur de l’utilisateur (ainsi, pour une fonte donnée, il maintiennent jusqu’à plusieurs dizaines de variantes en fonction du couple OS/nav).
Donc, télécharger la fonte (woff2, woff, etc...) fournie par le service peut ne donner que celle optimisée pour la plate-forme courante, et donc donner des rendus moyens pour les utilisateurs qui n’ont pas le même système d’exploitation que vous.
Tu peux être plus explicite ?
Ce comportement du service de google n’est quasiment pas documenté, mais c’est une réalité (j’ai dû creuser ce sujet pour le boulot).
▻https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#reduire_la_taille_de_police_avec_la_compress
Par exemple, Google Fonts possède plus de 30 variantes optimisées pour chaque police, et détecte et fournit automatiquement la variante optimale pour chaque plateforme et navigateur.
URLs are UI
▻https://www.hanselman.com/blog/URLsAreUI.aspx
“Make it a priority that your website supports shareable URLs.”
Les instincts d’hier deviennent les bonnes pratiques de demain. Dommage de devoir en passer par là.
Ce sont de bonnes pratiques depuis déjà longtemps, en fait. Typiquement, le Cool URIs don’t change de Tim Berners Lee en 1998 : ▻https://www.w3.org/Provider/Style/URI
Je suis retombé sur un document synthétique de google à ce sujet
►https://developers.google.com/web/progressive-web-apps
@booz ▻https://seenthis.net/messages/523608
@klaus ▻https://seenthis.net/messages/523013
Dommage qu’ils n’aient pas mis le caractère « linkable » des PWA dans cette page d’intro.
C’est heureusement dans la checklist : ▻https://developers.google.com/web/progressive-web-apps/checklist#each-page-has-a-url
Getting Started with Headless Chrome
▻https://developers.google.com/web/updates/2017/04/headless-chrome
#Chrome #Chromium #script #screenshots
Using headless Chrome as an automated screenshot tool
▻https://medium.com/@dschnr/using-headless-chrome-as-an-automated-screenshot-tool-4b07dffba79a
Complexities of an infinite scroller
▻https://developers.google.com/web/updates/2016/07/infinite-scroller
TL;DR: Re-use your DOM elements and remove the ones that are far away from the viewport. Use placeholders to account for delayed data.
Question qui avait été postée en 2011 sur seenthis (@seenthis) :
« Et sinon, des #applis #smartphone prévues pour #Seenthis ? »
5 ans après, en 2016... est-ce qu’il y a une évolution ?
Concernant la lecture hors-ligne, qui me semble le seul (?) avantage potentiel d’une appli native sur la version web, il y a des choses possible désormais en javascript dans le navigateur, qui peut servir de cache et de base de donnée pour un site web mobile lisible hors-ligne,[edit] avec notifications web, et tâche de fond. Voir #pwa par exemple, et #local_storage et #IndexedDB
Cela me semblerait intéressant de creuser cela pour SPIP dans son ensemble.
Les notifications aussi sont un avantage, la mise à jour en tache de fond....
Les notifications et tâches de fond on l’air possibles également.
►https://developers.google.com/web/progressive-web-apps
Push Notifications
Web push notifications makes it easy to re-engage with users by showing relevant, timely, and contextual notifications, even when the browser is closed.
▻https://w3c.github.io/ServiceWorker/spec/service_worker/index.html
This specification describes a method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.
The core of this system is an event-driven Web Worker, which responds to events dispatched from documents and other sources. A system for managing installation, versions, and upgrades is provided.
The service worker is a generic entry point for event-driven background processing in the Web Platform that is extensible by other specifications.
Si les magiciens de seenthis arrivaient à avoir une lecture hors-ligne, ça serait tellement utile !!!!!!
Le service qui serait LE truc utile pour moi serait de s’intégrer au système de partage sur Android, de manière à ce que, quand je lis un article cool, je puisse le partager sur SeenThis aussi facilement que via Twitter, courrier, SMS, etc.
Web | Google Developers | Progressive Web Applications
►https://developers.google.com/web/progressive-web-apps
▻https://lh3.googleusercontent.com/ztrksWcAyubvXbnAskphQ4hVY2sef4iEIEmxth1HJj6jZkzmB9qYe89YSXfzr
Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They’re reliable, fast, and engaging.
On nous promet ... tout !
Instant Loading
Service workers allow your apps to load nearly instantly and reliably, no matter what kind of network connection your user is on.
Add to Home Screen
Web app install banners give you the ability to let your users quickly and seamlessly add your web app to their home screen, making it easy to launch and return to your app.
Push Notifications
Web push notifications makes it easy to re-engage with users by showing relevant, timely, and contextual notifications, even when the browser is closed.
Fast
Smooth animations, scrolling, and navigations keep the experience silky smooth.
Secure
HTTPS secures the connection between you and your users, ensuring your users information is protected and isn’t tampered with.
Responsive
Modern users live on phones, tablets and laptops; your apps and websites should do the same. Learn how to structure and code your content to look great on screens of any size.
Est-ce qu’on peut leur faire confiance ou est-ce que c’est encore un monstre qui pompera sur nos réserves avant de se faire la malle ?
▻https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app
Progressive Web Apps are:
Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent - Enhanced with service workers to work offline or on low quality networks.
App-like - Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push notifications.
Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
Linkable - Easily share via URL and not require complex installation.
Que sont les Progressive Web Apps ? - Frank Taillandier
▻http://frank.taillandier.me/2016/06/28/que-sont-les-progressive-web-apps
Les Progressive Web Apps apportent les fonctionnalités attendues des applications natives à l’expérience de navigation Web sur un mobile en utilisant des technologies basées sur les standards et en tournant dans un conteneur sécurisé accessible à tous sur le Web.
En somme, les Progressive Web Apps décrivent toute une série de technologies, de concepts d’architecture et d’API Web qui travaillent de concert pour proposer une expérience similaire aux applications natives sur le Web mobile. Voyons ensemble les quelques tenants de base des Progressive Web Apps.
Le concept de « Progressive Web Apps » sent le marketing à plein nez mais l’idée de base est là : faire des applis web utilisables comme applis mobiles (ce qui était un des principe porté par Mozilla phone dans son concept d’OS mobile). Et au passage ça devrait permettre de se débarrasser des Truc Store et de la compilation par OS à chaque version d’une l’appli...
Voir aussi :
▻https://serviceworke.rs pour des exemples de « Service workers »
▻https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-3 et ▻https://w3c.github.io/manifest pour l’utilisation de fichier manifest.json pour installer une web apps
#progressive_web_apps #service_workers #app_shell #appli_mobile #manifest.json
Offline Google Analytics Made Easy
▻https://developers.google.com/web/updates/2016/07/offline-google-analytics
Today, we’re happy to announce that everything you need to handle offline Google Analytics requests within your service worker has been bundled up into an npm package: npm install —save-dev sw-offline-google-analytics
#GoogleAnalytics_statistics_offline_ServiceWorker_clevermarks
Geolocation API removed from unsecured origins in Chrome 50
▻https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
“Starting with Chrome 50, Chrome no longer supports obtaining the user’s location using the HTML5 Geolocation API from pages delivered by non-secure connections. This means that the page that’s making the Geolocation API call must be served from a secure context such as HTTPS.”
A new Device Mode in Chrome for a mobile-first generation
▻https://developers.google.com/web/updates/2016/03/device-mode-v2?hl=en
“Responsive is the mode you’ll want to be in during active iteration to make sure your site works on all sorts of devices, not just a few specific ones.” 3
#MobileFirst_RWD_Chrome_Google_navigateur_devtools_clevermarks
#remote Debugging Devices | Web Tools - Google Developers
▻https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging#remote-debugging-on-android-with-chrome-devtools
Web content behaves differently on mobile than on desktop. #debug live content on your device from your development machine using remote debugging. Tags: #Chrome #Android debug remote
Interact with BLE devices on the Web
▻https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web
A Web API has been added to Chrome OS M45 that makes it possible for websites to discover and communicate with devices over the Bluetooth 4 wireless standard using GATT.
Pas essayé, mais miam. Pour l’instant, on le fait en passant par des applications Web embarquées dans des applications pour smartphones, mais si on peut jouer avec directement dans le brouteur, ça va devenir marrant.
(Pour info : on a fait ça pour une expo des Arts décoratifs : tu rentres dans une salle de l’expo, et la tablette que le musée t’a prêtée affiche directement l’info qui va bien dans une application réalisée à partir d’un site SPIP.)
Principles of Site Design — Web Fundamentals
▻https://developers.google.com/web/fundamentals/principles
#Google and AnswerLab undertook an intensive research study examining how a range of users interacted with a diverse set of #mobile sites. The goal, to answer the question: what makes a good mobile site?
Web Fundamentals — Google Developers
▻https://developers.google.com/web/fundamentals
Web Fundamentals is a comprehensive resource for multi-device web development. Tags: #webdev #webdesign