Hello.

Mon objectif est de créer le logiciel de capture d'écran le plus simple au monde et je m'occupe du projet lentement au cours des deux derniers mois (je veux dire très lentement). Dans les articles précédents, j'avais eu le screen recording and a voice overlay en utilisant les flux de toutes les sources d'entrée. Un point de frustration cependant était que je ne pouvais pas savoir comment obtenir le son du bureau * et * superposer le son du haut-parleur.

J'ai eu un peu de temps après Google IO et je voulais me débarrasser de mes démangeaisons à long terme. Je veux juste pouvoir copier du texte contenu dans des images du navigateur. C'est tout. Je pense que ce serait une fonctionnalité intéressante pour tout le monde. Il n'est pas facile d'ajouter des fonctionnalités directement dans Chrome, mais je sais que je peux tirer parti du système d'intention sur Android et que je peux maintenant le faire avec le Web (ou au moins Chrome sur Android).

Big mises à jour pour le dernier Safari! Je pensais que c'était une annonce assez énorme, et le contraire de Google qui disait il y a quelque temps que Google Pay Lib était la méthode recommandée pour mettre en œuvre les paiements … Je veux dire, ce n'est pas à des millions de kilomètres, Google Pay est construit sur le dessus de demande de paiement, mais ce n'est pas d'abord le RP.

Il y a des années, j'ai effectué des recherches sur la manière dont les applications natives répondaient au manque de connectivité réseau. Bien que j'ai perdu le lien avec l'analyse (je pourrais jurer que c'était sur Google+), le récit général était que de nombreuses applications natives sont inextricablement liées à Internet et refusent tout simplement de fonctionner. Cela ressemble à de nombreuses applications Web. Ce qui les différencie du Web, c’est que l’expérience était encore «sur la marque».

J'ai mis à jour par l'éditeur basé sur Hugo pour essayer d'utiliser EditorJS en tant qu'éditeur pour le blog. Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor’s Core. Read full post .

Nous avons récemment fait beaucoup de développement sur les téléphones polyvalents et cela a été difficile, mais amusant. Le problème le plus difficile est que, sur KaiOS, nous avons trouvé qu’il était impossible de déboguer des pages Web, en particulier sur le matériel dont nous disposions (le Nokia 8110). Le Nokia est un excellent appareil. Il est construit avec KaiOS. Il est basé sur quelque chose qui ressemble à Firefox 48, mais il est verrouillé, il n’existe pas de mode développeur traditionnel comme sur les autres appareils Android, ce qui signifie que vous ne pouvez pas connecter le navigateur de Firefox.

J'ai beaucoup joué avec Shape Detection API dans Chrome et j'aime beaucoup son potentiel. Par exemple, un QRCode detector très simple QRCode detector j'ai écrit il y a longtemps possède un polyfill JS, mais utilise l'API new BarcodeDetector() si elle est disponible. Vous pouvez voir certaines des autres démos que j'ai construites ici en utilisant les autres fonctionnalités de l'API de détection de forme: Face Detection , Barcode Detection et Text Detection .

J'ai vu un tweet d'un bon Mariko et de Mariko collègue, Mariko , parler de tests sur une gamme de périphériques bas de gamme vous permettant de rester à la terre. Le contexte du tweet est que nous examinons à quoi ressemble le développement Web lors de la création pour les utilisateurs qui vivent quotidiennement sur ces classes d’appareils. L’équipe travaille actuellement beaucoup dans cet espace, mais j’ai passé une journée à construire un site et c’était incroyablement difficile de faire fonctionner quelque chose à un niveau de performances même légèrement raisonnable - voici certains des problèmes que j’ai rencontrés:

Je réfléchissais à quelques-uns des work our team has done et j'ai trouvé un projet de 2017 créé par Robert Nyman et Eric Bidelman. Browser Bug Searcher! . Il est incroyable qu’avec quelques touches seulement vous ayez un bon aperçu de vos fonctionnalités préférées dans tous les principaux moteurs de navigateur. Source code available . Cela met en évidence l'un des problèmes que j'ai avec les outils de suivi des bogues de crbug et webkit: ils ne disposent pas d'un moyen simple d'obtenir des flux de données dans des formats tels que RSS.

Je cherchais un éditeur de https://www.webcomponents.org/ rapide sur https://www.webcomponents.org/ pour pouvoir publier facilement sur ce blog et je suis tombé sur un ensemble de composants github de github . Je savais qu'ils avaient le <time-element> mais je ne savais pas qu'ils avaient un ensemble d'éléments aussi utiles et agréables.

Ça a l'air plutôt bien aujourd'hui.

La manière dont nous (en tant qu'industrie) appliquons le consentement GDPR est un gâchis. Je ne suis pas sûr de savoir pourquoi quiconque choisirait autre chose que "Utiliser uniquement les cookies nécessaires", mais je ne peux vraiment pas faire la différence entre l'une ou l'autre option et le compromis de l'un ou l'autre choix, sans compter que je peux vérifier que c'est seulement en utilisant uniquement les cookies nécessaires.

L’histoire nous jugera tous sur ce gâchis et j’espère que ce sera une étude de cas pour tous sur les effets du nationalisme, des intérêts personnels, de l’orgueil colonial, de la célébrité-bouffonnerie. Fuckers

Ricky Mondello, de l’équipe Safari, vient de partager une note sur la façon dont Twitter utilise la spécification ./well-known/change-password. I just noticed that Twitter has adopted the Well-Known URL for Changing Passwords! Is anyone aware of other sites that have adopted it? Twitter’s implementation: https://twitter.com/.well-known/change-password; Github’s: https://github.com/.well-known/change-password; Specification :https://github.com/WICG/change-password-url Read full post . La fonctionnalité m’a complètement dépassée, mais c’est une idée géniale: à partir d’un fichier situé dans un emplacement bien connu, le navigateur peut-il offrir une interface utilisateur à l’utilisateur lui permettant de réinitialiser rapidement son mot de passe sans avoir à naviguer dans l’interface utilisateur complexe du site .

Jake et l'équipe ont créé cet élément personnalisé plutôt impressionnant pour la gestion du zoom pincement sur tout jeu de code HTML en dehors de la dynamique de pincement-zoom du navigateur (pensez au zoom de la fenêtre d'affichage mobile). L'élément était l'un des composants centraux dont nous avions besoin pour l'application squoosh que nous avions conçue et publiée lors du Sommet des développeurs Chrome (… je dis "publiée au Sommet des développeurs Chrome" - Jake l'a montré à tout le monde lors de la Journée des développeurs Google Google.

Pete LePage présente l'API cible de partage Web et la disponibilité dans Chrome via un essai de l'origine Until now, only native apps could register as a share target. The Web Share Target API allows installed web apps to register with the underlying OS as a share target to receive shared content from either the Web Share API or system events, like the OS-level share button. Read full post .

Un excellent article, une vidéo et un exemple de Thomas Steiner sur les bonnes notifications push sur le Web. A particularly bad practice is to pop up the permission dialog on page load, without any context at all. Several high traffic sites have been caught doing this. To subscribe people to push notifications, you use the the PushManager interface. Now to be fair, this does not allow the developer to specify the context or the to-be-expected frequency of notifications.

Kayce Basques, un formidable rédacteur technique de notre équipe, a écrit un article plutôt étonnant sur ses expériences, mesurant la mesure dans laquelle les meilleures pratiques de la documentation existante permettent d'expliquer du matériel technique. Les meilleures pratiques dans ce sens peuvent être des normes bien connues de l’industrie en matière de rédaction technique, ou bien il peut s’agir du guide de rédaction de votre propre entreprise. Vérifiez-le! Recently I discovered that a supposed documentation “best practice” may not actually stand up to scrutiny when measured in the wild.

J’étais en Chine il y a quelques semaines pour la journée des développeurs Google et je montrais à tout le monde mon scanner QRCode, cela fonctionnait très bien jusqu’à ce que je passe au mode hors connexion. Lorsque l’utilisateur était hors ligne (ou partiellement connecté), la caméra ne démarrait pas, ce qui signifiait que vous ne pouviez pas prendre de code QR. Il m’a fallu un certain temps pour comprendre ce qui se passait, et il s’avère que j’ai démarré la caméra par erreur lors de mon événement onload et que la demande de Google Analytics était bloquée et non résolue rapidement.

Le week-end, je jouais avec un encodeur vidéo à effet Boomerang, vous pouvez le faire fonctionner presque en temps réel (je l’expliquerai plus tard). Je l’ai obtenu sur Chrome sur le Bureau, mais cela ne fonctionnerait jamais correctement sur Chrome sur Android. Voir le code ici. Cela ressemble à lorsque vous utilisez captureStream () sur un <canvas>Avec une résolution relativement importante (1280x720 dans mon cas), l’API MediaRecorder ne pourra pas encoder les vidéos, elle ne provoquera pas d’erreur et vous ne pourrez pas détecter qu’elle ne peut pas encoder la vidéo à l’avance.

Un bel article sur PWA de Mike Elgan. Je ne suis pas sûr de l’objectif de Microsoft avec PWA, mais je pense que le nôtre est assez simple: nous voulons que les utilisateurs aient accès au contenu et aux fonctionnalités instantanément et d’une manière qu’ils espèrent pouvoir interagir avec ce contenu sur leurs appareils. Le Web doit atteindre tout le monde sur chaque appareil connecté et un utilisateur doit pouvoir accéder à sa modalité préférée, en tant qu’application si c’est ce à quoi il s’attend (mobile, peut-être), ou de la voix sur un assistant, etc.

Le premier numéro que j’ai trouvé en essayant de créer un éditeur de vidéo sur le Web. J’ai plusieurs flux vidéo (ordinateur de bureau et webcam) et je voulais pouvoir basculer entre les flux vidéo sur un élément vidéo afin de pouvoir basculer rapidement entre la webcam et le bureau et ne pas casser le MediaRecorder. Il semble que vous devriez pouvoir le faire en basculant la propriété selected sur l'objetvideoTracks du <video>élément, mais vous ne pouvez pas, le tableau de pistes ne contient qu'un seul élément (la première piste vidéo sur le flux multimédia).

Je suis un grand fan des QRCodes, ils sont un moyen très simple et pratique d’échanger des données entre le monde réel et le monde numérique. Depuis quelques années, j’ai un petit projet parallèle appelé QRSnapper & mdash; Eh bien, il porte quelques noms, mais c’est celui sur lequel j’ai opté pour & mdash; qui utilise l’API getUserMedia pour extraire des données en direct de la caméra de l’utilisateur afin de lui permettre de rechercher les codes QR en temps quasi réel.

J’aime FFMPEG.js, c’est un outil soigné compilé avec asm.js` qui me permet de créer des applications Web JS pouvant éditer rapidement des vidéos. FFMPEG.js fonctionne également avec les travailleurs Web afin que vous puissiez encoder des vidéos sans bloquer le fil principal. J’aime aussi Comlink. Comlink me permet d’interagir facilement avec les travailleurs Web en exposant des fonctions et des classes sans avoir à traiter avec une machine à états postMessage complexe.

Je suis récemment rentré d’un voyage en Inde pour assister à l’événement Google4India (rapport prochainement) et rencontrer de nombreuses entreprises et développeurs. L’un des changements les plus intéressants abordés concernait la demande de contenu dans la langue des utilisateurs du pays et était particulièrement visible dans tous les produits de Google, allant de la recherche dans la langue de l’utilisateur à la recherche de contenu, et aussi de le lire aux utilisateurs sous forme de texte ou de voix.

Rappelez-vous que lorsque Web Apps était * une * méthode recommandée pour utiliser des applications sur l’iPhone? What are web apps? Learn what they are and how to use them. Lire l’article complet. Vers 2013, Apple a commencé à rediriger le répertoire / webapps / top-level vers / iphone / Le fait est que le répertoire était en fait très bon, beaucoup d’applications fonctionnent encore. Cependant, en regardant l’AppStore, cela résolvait beaucoup plus de problèmes que les développeurs avaient: Une meilleure découverte et une meilleure recherche en particulier parce que l’AppStore était directement sur l’appareil.

Je rédige un article sur les premières API Web mobiles et Alex Russell m’a rappelé Google Gears Gears modules include: LocalServer Cache and serve application resources (HTML, JavaScript, images, etc.) locally Database Store data locally in a fully-searchable relational database WorkerPool Make your web applications more responsive by performing resource-intensive operations asynchronously Lire l’article complet. Je pense qu’il est intéressant de voir qu’AppCache et WebSQL, Geolocation et WebWorkers sont issus des idées de Google Gears et que seules les deux dernières ont réellement survécu.

Nous utilisons beaucoup Google Chat pour communiquer au sein de notre équipe. Nous créons également beaucoup de contenu accessible via les flux RSS, nous avons même un flux d’équipe que vous pouvez voir tous. Ce n’est que récemment que j’ai découvert qu’il était assez facile de créer un simple post-only bot via WebHooks et que m’a donné l’idée, je peux créer un service simple qui interroge les flux RSS et les envoie ensuite à notre webhook qui peut poster directement dans notre chat d’équipe.

Ruth John a déménagé à Chrome OS (temporairement): The first thing, and possibly the thing with the least amount of up to date information out there, was enabling Crostini. This runs Linux in a container on the Chromebook, something you pretty much want straight away after spending 15 minutes on it. I have the most recent Pixel, the 256GB version. Here’s what you do. Go to settings. Click on the hamburger menu (top left) - right at the bottom it says ‘About Chrome OS’ Open this and there’s an option to put your machine into dev mode It’ll restart and you’ll be in dev mode - this is much like running Canary over Chrome and possibly turning on a couple of flags.

Mustafa écrit: Tooling is complicated, we are a tooling focused industry, and they change so much. I have used maybe rough eight different tools, from Photoshop to Sketch. That’s before we add prototyping tools to the mix. This may be something we just have to accept. After all, type standards only really started to settle in the 90s, and typography is a 500-year-old discipline. Designers are still finding it difficult to prove the importance of the process.

Philip Walton a une formidable plongée dans une nouvelle API sur laquelle l’équipe Chrome a travaillé pour vous donner (le développeur) le contrôle de la réponse lorsque le navigateur décharge vos onglets. Application lifecycle is a key way that modern operating systems manage resources. On Android, iOS, and recent Windows versions, apps can be started and stopped at any time by the OS. This allows these platforms to streamline and reallocate resources where they best benefit the user.

Pete LePage écrit à propos des changements importants à ajouter à l’écran d’accueil dans Chrome Add to Home Screen changes If your site meets the add to home screen criteria, Chrome will no longer show the add to home screen banner. Instead, you’re in control over when and how to prompt the user. To prompt the user, listen for the beforeinstallprompt event, then, save the event and add a button or other UI element to your app to indicate it can be installed.

Un excellent aperçu de PWA Pinterest The verdict Now for the part you’ve all been waiting for: the numbers. Weekly active users on mobile web have increased 103 percent year-over-year overall, with a 156 percent increase in Brazil and 312 percent increase in India. On the engagement side, session length increased by 296 percent, the number of Pins seen increased by 401 percent and people were 295 percent more likely to save a Pin to a board.

Par défaut, Hugo ne fournit pas les fichiers .mjs avec le type de contenu correct. En fait, ce n’est que récemment que hugo pourrait servir plus d’une extension de fichier par type MIME. Il semble que la version 0.43 ait été corrigée. [mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”] Lire l’article complet. Le code ci-dessus me permet de servir des fichiers mjs pour les modules ES avec le type MIME correct (les modules doivent être servis avec ‘text / javascript’).

J’ai des réflexions sur le post que j’ai fait hier à propos des modules ES I needed a quick way import a simple module get-urls into my project. The module is well tested and it does what I needed … ignore the fact that it’s pretty easy to implement in a couple of lines of JavaScript. The problem I had is that my project is built in ES6, uses modules and I didn’t want to have to bundle up using CommonJS (require).

Tracy Lee de This Dot a organisé un live-stream plutôt soigné qui a amené de nombreux fournisseurs de navigateurs à donner un aperçu de leur travail: Browser representatives from Brave, Beaker, Edge, Chrome, & Mozilla get together to talk about recent updates and the state of browsers. Featured Speakers: Brendan Eich -  Creator of Javascript, Co-founder & CEO at Brave Software Paul Frazee - Works on Beaker Browser Matthew Claypotch - Developer Advocate at Mozilla Paul Kinlan - Senior Developer Advocate at Google Patrick Kettner - Edge at Microsoft Amal Hussein - Senior Open Web Engineer at Bocoup Tracy Lee - GDE, RxJs Core Team, This Dot Co-founder Lire l’article complet.

Sam Thorogood de notre équipe écrit: You’ve designed a webapp, built its code and service worker, and finally added the Web App Manifest to describe how it should behave when ‘installed’ on a user’s device. This includes things like high-resolution icons to use for e.g. a mobile phone’s launcher or app switcher, or how your webapp should start when opened from the user’s home screen. And while many browsers will respect the Web App Manifest, not every browser will load or respect every value you specify.