Hello.

Ich habe mir zum Ziel gesetzt, die einfachste Bildschirmaufzeichnungssoftware der Welt zu entwickeln, und habe mich in den letzten Monaten langsam mit dem Projekt beschäftigt (ich meine wirklich langsam). In früheren Beiträgen hatte ich das screen recording and a voice overlay indem ich mit den Streams aus allen screen recording and a voice overlay herumgebastelt hatte. Ein Bereich der Frustration war jedoch, dass ich nicht herausfinden konnte, wie ich das Audio vom Desktop * bekommen und * das Audio vom Lautsprecher überlagern kann.

Ich hatte nach Google IO eine kurze Ausfallzeit und wollte einen lang anhaltenden Juckreiz bekommen, den ich hatte. Ich möchte nur Text kopieren können, der in Bildern im Browser enthalten ist. Das ist alles. Ich denke, es wäre eine nette Sache für alle. Es ist nicht einfach, Funktionen direkt in Chrome einzufügen, aber ich weiß, dass ich das Intent-System unter Android nutzen kann und das jetzt über das Web (oder zumindest Chrome unter Android).

Große Updates für die neueste Safari! Ich dachte, dass dies eine ziemlich große Ankündigung war, und das Gegenteil von Google, das vor einiger Zeit sagte, dass Google Pay Lib der empfohlene Weg ist, um Zahlungen zu implementieren … Ich meine, es ist keine Million Meilen entfernt, Google Pay ist darauf aufgebaut der Zahlungsaufforderung, aber es ist nicht zuerst PR. Payment Request is now the recommended way to pay implement Apple Pay on the web.

Vor einigen Jahren habe ich untersucht, wie native Anwendungen auf mangelnde Netzwerkkonnektivität reagierten. Ich habe zwar den Link zur Analyse verloren (ich könnte schwören, dass es auf Google+ war), die übergeordnete Erzählung lautete jedoch, dass viele native Anwendungen unlösbar mit dem Internet verbunden sind, dass sie einfach nicht funktionieren. Klingt nach einer Menge Web - Apps, was sie jedoch vom Web abhebt, ist, dass die Erfahrung immer noch "on - brand" ist.

Ich habe ein Update von Hugo-Editor vorgenommen, um zu versuchen, EditorJS als Editor für das Blog zu verwenden. 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 .

Wir haben in letzter Zeit viel an Feature-Handys entwickelt und es war hart, aber lustig. Das Schwierigste ist, dass wir unter KaiOS das Debuggen von Webseiten nicht finden konnten, insbesondere auf der Hardware, die wir hatten (Das Nokia 8110). Das Nokia ist ein großartiges Gerät, es ist mit KaiOS gebaut, von dem wir wissen, dass es auf einer Art Firefox 48 basiert, aber es ist gesperrt. Es gibt keinen herkömmlichen Entwicklermodus wie bei anderen Android-Geräten, was bedeutet, dass Sie keine Verbindung mit Firefox herstellen können Einfach WebIDE.

Ich habe viel mit dem Shape Detection API in Chrome Shape Detection API und ich mag das Potenzial, das es bietet, sehr. Zum Beispiel ein sehr einfaches QRCode detector ich vor langer Zeit geschrieben habe, verfügt über eine JS-Polyfill, verwendet jedoch die new BarcodeDetector() API, falls verfügbar. Einige der anderen Demos, die ich hier aufgebaut habe, können Sie mit den anderen Funktionen der Face Detection API sehen: Face Detection , Barcode Detection und Text Detection .

Ich habe einen Tweet von einem guten Kumpel und Kollegen Mariko , in dem es darum ging, mit einer Reihe von Low-End-Geräten zu testen, was Sie wirklich auf dem Mariko hält. Der Kontext des Tweets ist, dass wir untersuchen, wie Web Development aussieht, wenn Benutzer für Benutzer erstellen, die täglich mit diesen Geräteklassen leben. Das Team arbeitet derzeit sehr viel in diesem Bereich, aber ich habe einen Tag damit verbracht, eine Website zu bauen, und es war unglaublich schwer, alles auf einem nur halbwegs vernünftigen Niveau funktionieren zu lassen.

Ich habe gerade über einige work our team has done und ein Projekt von 2017 gefunden, das Robert Nyman und Eric Bidelman gegründet haben. Browser Bug Searcher! . Es ist unglaublich, dass Sie mit nur wenigen Tastendrücken einen großartigen Überblick über Ihre bevorzugten Funktionen in allen großen Browser-Engines haben. Source code available . Dies hebt tatsächlich eines der Probleme hervor, die ich mit den Bug-Trackern von crbug und webkit habe, sie haben keine einfache Möglichkeit, Daten-Feeds in Formaten wie RSS abzurufen.

Ich war auf der Suche nach einem schnellen Markdown-Editor auf https://www.webcomponents.org/ damit ich das Posten in diesem Blog einfacher gestalten kann, und bin auf eine Reihe ordentlicher Komponenten von github . Ich wusste, dass sie das <time-element> aber ich wusste nicht, dass sie so schöne und einfache nützliche Elemente haben.

Sieht heute irgendwie nett aus.

Die Art und Weise, wie wir (als Industrie) die Zustimmung der DSGVO umsetzen, ist ein Durcheinander. Ich bin mir nicht sicher, warum sich jemand für etwas anderes als "Nur notwendige Cookies verwenden" entscheiden sollte. Allerdings kann ich den Unterschied zwischen den beiden Optionen und dem Kompromiss zwischen den beiden Optionen nicht erkennen. Außerdem kann ich nur bestätigen, dass dies der Fall ist Verwenden Sie nur die notwendigen Cookies.

Die Geschichte wird uns alle über dieses Durcheinander richten, und ich hoffe, es wird eine Fallstudie für alle über die Auswirkungen von Nationalismus, Eigeninteressen, Kolonialhassis und Promi-Affenfabrikation sein. Fuckers

Ricky Mondello hatte kürzlich im Safari-Team eine Mitteilung darüber veröffentlicht, wie Twitter die Spezifikation ./well-known/change-password verwendet. 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 . Das Feature ist mir völlig übergangen, aber es ist eine nette Idee: Wenn eine Datei an einem bekannten Speicherort vorhanden ist, kann der Browser dem Benutzer eine Benutzeroberfläche bieten, mit der er sein Kennwort schnell zurücksetzen kann, ohne durch die komplexe Benutzeroberfläche der Website navigieren zu müssen.

Jake und das Team erstellten dieses ziemlich beeindruckende benutzerdefinierte Element zum Verwalten des Pinch-Zooms in einem beliebigen HTML-Satz außerhalb der eigenen Pinch-Zoom-Dynamik des Browsers (z. B. Mobile Viewport Zooming). Das Element war eine der zentralen Komponenten, die wir für die von Chrome Dev Summit entwickelte und veröffentlichte squoosh App benötigten (… ich sage 'Chrome Dev Summit') - Jake zeigte es allen beim China Google Developer Day obwohl der Rest des Teams unter Embargo stand;) …)

Pete LePage führt die Web Share Target-API und die Verfügbarkeit in Chrome über einen Origin-Test ein 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 .

Ein großartiger Artikel sowie ein Video und ein Beispiel von Thomas Steiner zu guten Push-Benachrichtigungen im 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, ein großartiger Tech-Autor aus unserem Team, schrieb einen ziemlich erstaunlichen Artikel über seine Erfahrungen, in dem er misst, wie gut die bewährten Best Practices für die Dokumentation von technischem Material funktionieren. Bewährte Verfahren in diesem Sinne können bekannte Industriestandards für das technische Schreiben sein, oder es kann ein Leitfaden für Ihr eigenes Schreibstil sein. Hör zu! Recently I discovered that a supposed documentation “best practice” may not actually stand up to scrutiny when measured in the wild.

Ich war vor ein paar Wochen für den Google Developer Day in China und habe allen meinen QRCode-Scanner gezeigt, es funktionierte großartig, bis ich offline ging. Wenn der Benutzer offline war (oder teilweise verbunden war), konnte die Kamera nicht starten, was dazu führte, dass QR-Codes nicht ausgelöst werden konnten. Ich brauchte ein ganzes Alter, um herauszufinden, was passierte, und es stellte sich heraus, dass ich irrtümlich die Kamera bei meinem Onload-Ereignis gestartet hatte und die Google Analytics-Anfrage hängen blieb und nicht rechtzeitig gelöst werden konnte.

Am Wochenende habe ich mit einem Boomerang-Effekt-Video-Encoder herumgespielt, man kann es quasi in Echtzeit arbeiten lassen (ich werde es später erklären). Ich habe es auf Chrome auf dem Desktop funktioniert, aber es würde nie richtig in Chrome unter Android funktionieren. Siehe der Code hier. Es sieht so aus, als wenn Sie captureStream () auf einem verwenden <canvas>das hat eine relativ große Auflösung (1280x720 in meinem Fall) ist die MediaRecorder API nicht in der Lage, die Videos zu codieren und es wird kein Fehler und Sie können nicht feststellen, dass es das Video nicht vor der Zeit codieren kann.

Ein schöner Post über PWA von Mike Elgan. Ich bin mir über Microsofts Ziel bei PWA nicht sicher, aber meiner Meinung nach ist es ziemlich einfach: Wir möchten, dass Benutzer sofort und auf eine Art und Weise Zugriff auf Inhalte und Funktionen haben, von denen sie erwarten, dass sie auf ihren Geräten mit ihnen interagieren können. Das Web sollte jeden über jedes angeschlossene Gerät erreichen und ein Benutzer sollte in der Lage sein, auf seine bevorzugte Modalität zuzugreifen, als eine App, wenn sie es so erwarten (Handy, vielleicht), oder Stimme auf einem Assistenten usw.

Das erste Problem, das ich gefunden habe, versucht einen Videoeditor im Internet zu erstellen. Ich habe mehrere Videostreams (Desktop und Web Cam) und wollte zwischen den Videoströmen eines Videoelements wechseln können, um schnell zwischen der Webcam und dem Desktop wechseln zu können und den MediaRecorder nicht zu zerbrechen. Es sieht so aus, als ob Sie dies tun können, indem Sie die Eigenschaft selected auf demvideoTracks Objekt auf dem <video>Element, aber Sie können nicht, das Array von Tracks enthält nur 1 Element (die erste Videospur auf dem MediaStream).

Ich bin ein großer Fan von QRCodes, sie sind eine sehr einfache und nette Möglichkeit, Daten zwischen der realen Welt und der digitalen Welt auszutauschen. Seit ein paar Jahren habe ich ein kleines Nebenprojekt namens QRSnapper & mdash; Nun, es hatte ein paar Namen, aber das ist die, auf die ich mich festgelegt habe & mdash; Diese nutzt die API “getUserMedia”, um Live-Daten von der Kamera des Benutzers zu empfangen, so dass sie fast in Echtzeit nach QR-Codes scannen kann.

Ich liebe FFMPEG.js, es ist ein nettes Tool, das mit asm.js` zusammengestellt wurde und ich kann JS Web-Apps erstellen, die Videos schnell bearbeiten können. FFMPEG.js funktioniert auch mit Web Worker, sodass Sie Videos codieren können, ohne den Hauptthread zu blockieren. Ich liebe auch Comlink. Mit Comlink kann ich leicht mit Web-Arbeitern interagieren, indem ich Funktionen und Klassen offen lege, ohne mich mit einem komplexen `postMessage’-Zustandsautomaten auseinandersetzen zu müssen. Ich habe vor kurzem die beiden zusammen zu kombinieren.

Ich bin vor kurzem von einer Reise nach Indien zurückgekommen, um an der Google4India Veranstaltung teilzunehmen (Bericht bald) und mich mit vielen Unternehmen und Entwicklern zu treffen. Eine der interessantesten diskutierten Änderungen war die Forderung nach mehr Inhalten in der Sprache der Nutzer in dem Land, und es wurde besonders offensichtlich bei allen Google-Produkten, die von der Erleichterung der Suche in der Benutzersprache, der Suche nach Inhalten, und es auch an die Benutzer in Text- oder Sprachform zurückzulesen.

Erinnern Sie sich daran, wann Web Apps eine empfohlene Methode zur Verwendung von Apps auf dem iPhone waren? What are web apps? Learn what they are and how to use them. Vollständigen Beitrag lesen. Um 2013 herum begann Apple, das Verzeichnis / webapps / top-level nach / iphone / umzuleiten. Die Sache ist, das Verzeichnis war eigentlich ziemlich gut, viele der Apps dort funktionieren noch heute. Mit Blick auf den AppStore löste es jedoch viel mehr Probleme, die Entwickler hatten: Bessere Entdeckung und Suche speziell, weil der AppStore direkt auf dem Gerät war.

Ich schreibe einen Blogpost über die frühen Mobile Web APIs und Alex Russell erinnert mich an 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 Vollständigen Beitrag lesen. Ich denke, es ist interessant zu sehen, dass AppCache und WebSQL, Geolocation und WebWorker aus den Ideen in Google Gears herauskamen und nur die letzten beiden wirklich überlebten.

Wir verwenden Google Chat intern sehr oft, um über unser Team zu kommunizieren - es ist ein bisschen wie unser Durchhang; Wir erstellen auch eine Menge Inhalte, die über RSS-Feeds zugänglich sind. Wir haben sogar einen Team-Feed, den Sie alle ansehen können. Erst vor kurzem habe ich herausgefunden, dass es ziemlich einfach ist, einen einfachen Post-Only-Bot über WebHooks und das zu erstellen gab mir die Idee, ich kann einen einfachen Dienst erstellen, der RSS-Feeds abfragt und diese dann an unseren Webhook sendet, der direkt in unserem Team-Chat posten kann.

Ruth John wechselte vorübergehend zu Chrome OS: 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 schreibt: 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 hat einen tiefen Einblick in eine neue API, an der das Chrome-Team gearbeitet hat, um Ihnen (dem Entwickler) die Kontrolle darüber zu geben, wie Sie reagieren müssen, wenn der Browser Ihre Tabs auslädt. 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 schreibt über wichtige Änderungen an Add to Homescreen in 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.

Ein großartiger Überblick über Pinterests PWA 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.

Standardmäßig liefert Hugo keine .mjs-Dateien mit dem richtigen Inhaltstyp. In der Tat war es bis vor kurzem, dass hugo mehr als eine Dateierweiterung pro Mimetyp anbieten konnte. Es sieht aus wie mit v0.43 das wurde behoben. [mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”] Vollständigen Beitrag lesen. Der obige Code ermöglicht es mir, mjs-Dateien für ES-Module mit dem richtigen Mime-Typ zu liefern (Hinweismodule müssen mit ‘text / javascript’ geliefert werden). Dies ist nur für lokale Tests erforderlich, Hosting ist ein anderes Problem :)

Ich habe Gedanken über die Post, die ich gestern über ES-Module geschrieben habe 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 von This Dot hat einen ordentlichen Livestream organisiert, der viele der Browser-Anbieter dazu brachte, einen Überblick darüber zu geben, woran sie arbeiten: 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 Vollständigen Beitrag lesen.

Sam Thorogood von unserem Team schreibt: 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.