Hello.

Tengo el objetivo de crear el software de grabación de pantalla más simple del mundo y he estado estudiando poco a poco el proyecto durante los últimos meses (me refiero a muy lentamente). En publicaciones anteriores obtuve screen recording and a voice overlay al analizar con las secuencias de todas las fuentes de entrada. Sin embargo, un área de frustración fue que no pude averiguar cómo obtener el audio del escritorio * y * superponer el audio del altavoz.

Tuve un poco de tiempo de inactividad después de Google IO y quise rascarme una picazón a largo plazo que he tenido. Solo quiero poder copiar el texto que se encuentra dentro de las imágenes en el navegador. Eso es todo. Creo que sería una buena característica para todos. No es fácil agregar funcionalidad directamente a Chrome, pero sé que puedo aprovechar el sistema de intención en Android y ahora puedo hacerlo con la Web (o al menos Chrome en Android).

Grandes actualizaciones para el último Safari! Pensé que este era un anuncio bastante grande, y lo opuesto a Google, que hace un tiempo dijo que Google Pay Lib es la forma recomendada de implementar pagos … Quiero decir, no está a un millón de millas, Google Pay está construido en la parte superior. de solicitud de pago, pero no es PR primero. Payment Request is now the recommended way to pay implement Apple Pay on the web.

Hace años, hice una investigación sobre cómo las aplicaciones nativas respondían a una falta de conectividad de red. Si bien he perdido el enlace al análisis (podría jurar que estaba en Google+), la narrativa general fue que muchas aplicaciones nativas están inextricablemente ligadas a Internet y que simplemente se niegan a funcionar. Suena como una gran cantidad de aplicaciones web, aunque lo que los diferencia de la web es que la experiencia fue "de marca", Bart Simpson le diría que necesita estar en línea (por ejemplo), y aún así para la La gran mayoría de las experiencias web te dan un 'Dino' (ver chrome: // dino).

He actualizado el editor basado en Hugo para probar y usar EditorJS como, bueno, el editor para el 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 .

Hemos estado haciendo mucho desarrollo en teléfonos con funciones recientemente y ha sido difícil, pero divertido. Lo más difícil es que en KaiOS fue imposible depurar las páginas web, especialmente en el hardware que teníamos (el Nokia 8110). El Nokia es un gran dispositivo, está construido con KaiOS, y sabemos que se basa en algo similar a Firefox 48, pero está bloqueado, no hay un modo de desarrollador tradicional como el que usas en otros dispositivos Android, lo que significa que no puedes conectar Firefox.

He estado jugando mucho con Shape Detection API en Chrome y me gusta mucho el potencial que tiene, por ejemplo, un QRCode detector muy simple que escribí hace mucho tiempo tiene un polyfill JS, pero usa la API new BarcodeDetector() si está disponible. Puede ver algunas de las otras demostraciones que he construido aquí utilizando las otras capacidades de la API de detección de formas: Face Detection , Barcode Detection y Text Detection .

Vi un tweet de un buen amigo y colega, Mariko , acerca de las pruebas en una gama de dispositivos de gama baja que lo mantienen realmente conectado a tierra. El contexto del tweet es que estamos analizando cómo es el desarrollo web cuando construimos para usuarios que viven diariamente en estas clases de dispositivos. El equipo está haciendo mucho trabajo ahora en este espacio, pero pasé un día construyendo un sitio y fue increíblemente difícil hacer que algo funcionara a un nivel de rendimiento incluso ligeramente razonable.

Solo estaba reflexionando sobre algunos de los work our team has done y encontré un proyecto de 2017 que Robert Nyman y Eric Bidelman crearon. Browser Bug Searcher! . Es increíble que con solo unas pocas pulsaciones de tecla tenga una gran visión general de sus funciones favoritas en todos los motores de navegación principales. Source code available . Esto realmente resalta uno de los problemas que tengo con los rastreadores de errores de crbug y webkit, no tienen una forma sencilla de recibir fuentes de datos en formatos como RSS.

Estaba buscando un editor de rebajas rápido en https://www.webcomponents.org/ para poder facilitar la publicación en este blog y me encontré con un conjunto de componentes github por github . Sabía que tenían las <time-element> pero no sabía que tenían un conjunto tan agradable y simple de elementos útiles.

Parece un poco agradable hoy.

La forma en que nosotros (como industria) implementamos el consentimiento de GDPR es un desastre. No estoy seguro de por qué alguien elegiría otra cosa que no sea 'Usar solo las cookies necesarias', sin embargo, realmente no puedo distinguir entre una opción y la compensación de una u otra opción, por no mencionar que puedo verificar que es solo utilizando únicamente las cookies necesarias.

La historia nos juzgará a todos en este lío, y espero que sea un estudio de caso para todos sobre los efectos del nacionalismo, los intereses personales, la arrogancia colonial, la bafonía de las celebridades. Putos

Ricky Mondello en el equipo de Safari recientemente compartió una nota sobre cómo Twitter está utilizando la especificación ./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 función me pasó por completo, pero es una buena idea: dado un archivo en una ubicación bien conocida, ¿puede el navegador ofrecer una IU al usuario que le permita restablecer rápidamente su contraseña sin tener que navegar por la IU compleja del sitio?

Jake y el equipo crearon este elemento personalizado bastante impresionante para administrar el zoom de pellizco en cualquier conjunto de HTML fuera de la propia dinámica de zoom-pellizco del navegador (piense en el zoom de la ventana móvil). El elemento fue uno de los componentes centrales que necesitábamos para la aplicación squoosh que creamos y lanzamos en Chrome Dev Summit (… digo 'lanzado en Chrome Dev Summit': Jake se lo mostró a todos en el China Developer Day de China aunque el resto del equipo estaba bajo embargo;) …)

Pete LePage presenta la API Web Share Target y la disponibilidad en Chrome a través de una prueba de origen. 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 gran artículo, video y muestra de Thomas Steiner sobre buenas notificaciones push en la 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 asombroso escritor de tecnología de nuestro equipo, escribió un artículo bastante sorprendente sobre sus experiencias en la medición de cómo funcionan las mejores prácticas de documentación existentes para explicar material técnico. Las mejores prácticas en este sentido pueden ser los estándares conocidos de la industria para la redacción técnica o la guía de estilo de redacción de sus propias empresas. ¡Echale un vistazo! Recently I discovered that a supposed documentation “best practice” may not actually stand up to scrutiny when measured in the wild.

Hace un par de semanas estuve en China para el Día del desarrollador de Google y les mostré a todos mi QRCode scanner, estaba funcionando muy bien hasta que me desconecté. Cuando el usuario estaba fuera de línea (o parcialmente conectado), la cámara no se iniciaría, lo que significaba que no podía ajustar los códigos QR. Me tomó una edad para averiguar qué estaba pasando, y resultó que estaba arrancando la cámara por error en mi evento onload y la solicitud de Google Analytics se bloqueó y no se resolvió de manera oportuna.

El fin de semana que estuve jugando con un codificador de video de efecto Boomerang, puedes hacerlo funcionar casi en tiempo real (lo explicaré más adelante). Lo tengo funcionando en Chrome on Desktop, pero nunca funcionaría correctamente en Chrome en Android. Ver el código aquí. Parece que cuando usas captureStream () en un <canvas>que tiene una resolución relativamente grande (1280x720 en mi caso), la API de MediaRecorder no podrá codificar los videos y no se producirá un error y no se puede detectar que no puede codificar el video con anticipación.

Un buen post sobre PWA de Mike Elgan. No estoy seguro de cuál es el objetivo de Microsoft con PWA, pero creo que el nuestro es bastante simple: queremos que los usuarios tengan acceso al contenido y la funcionalidad de manera instantánea y de la forma en que esperan poder interactuar con ellos en sus dispositivos. La web debe llegar a todos los dispositivos conectados y el usuario debe poder acceder a su modalidad preferida, como una aplicación si así lo esperan (móvil, tal vez) o voz en un asistente, etc.

El primer problema que encontré al intentar construir un editor de video en la web. Tengo varias secuencias de video (computadora de escritorio y cámara web) y quería poder alternar entre las secuencias de video en un elemento de video para poder cambiar rápidamente entre la cámara web y la computadora de escritorio y no interrumpir el MediaRecorder. Parece que deberías poder hacerlo alternando la propiedad selected en el objetovideoTracks en el <video> Elementopero no puede, la matriz de pistas contiene solo 1 elemento (la primera pista de video en MediaStream).

Soy un gran fan de los códigos QR, son una forma muy simple y ordenada de intercambiar datos entre el mundo real y el mundo digital. Desde hace unos años he tenido un pequeño proyecto paralelo llamado QRSnapper & mdash; bueno, ha tenido algunos nombres, pero este es el que me he fijado en & mdash; que utiliza la API getUserMedia para tomar datos en vivo de la cámara del usuario para que pueda escanear los códigos QR casi en tiempo real.

Me encanta FFMPEG.js, es una buena herramienta compilada con asm.js` y me permite crear aplicaciones web JS que pueden editar videos rápidamente. FFMPEG.js también trabaja con trabajadores web para que pueda codificar videos sin bloquear el hilo principal. También me encanta Comlink. Comlink me permite interactuar fácilmente con los trabajadores web al exponer funciones y clases sin tener que lidiar con una compleja máquina de estados postMessage. Recientemente pude combinar los dos juntos.

Recientemente volví de un viaje a la India para asistir al evento Google4India (informe pronto) y para reunirme con una gran cantidad de empresas y desarrolladores. Uno de los cambios más interesantes discutidos fue la promoción de más contenido en el idioma de los usuarios en el país, y fue particularmente evidente en todos los productos de Google, que van desde facilitar la búsqueda en el idioma de los usuarios, hasta encontrar contenido, y también para leerlo a los usuarios en forma de texto o voz.

¿Recuerdas cuando las aplicaciones web eran * una * forma recomendada de usar aplicaciones en el iPhone? What are web apps? Learn what they are and how to use them. Leer la publicación completa. Alrededor de 2013, Apple comenzó a redirigir el directorio / webapps / top-level a / iphone / El caso es que el directorio en realidad era bastante bueno, muchas de las aplicaciones todavía funcionan hoy en día.

Estoy escribiendo una publicación en un blog sobre las primeras API de la Web móvil y Alex Russell me recordó a 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 Leer publicación completa. Creo que es interesante ver que AppCache y WebSQL, Geolocalización y WebWorkers surgieron de las ideas en Google Gears y solo sobrevivieron los dos últimos.

Usamos Google Chat internamente mucho para comunicarnos en todo nuestro equipo; es algo así como nuestra holgura; También creamos una gran cantidad de contenido que se puede acceder a través de fuentes RSS, incluso tenemos un feed de equipo que todos pueden ver. No fue hasta hace poco que descubrí que era bastante fácil crear un bot simple solo por correo a través de WebHooks y eso Me dio la idea, puedo crear un servicio simple que sondee los feeds RSS y luego los envíe a nuestro webhook para que se publiquen directamente en el chat de nuestro equipo.

Ruth John se mudó a Chrome OS (temporalmente): 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 escribe: 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 tiene una profunda inmersión en una nueva API en la que el equipo de Chrome ha estado trabajando para darle a usted (el desarrollador) el control sobre cómo responder cuando el navegador descarga sus pestañas. 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 escribe sobre cambios importantes para Agregar a la pantalla de inicio en 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.

Una gran visión general de PWA de 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.

Por defecto, Hugo no sirve archivos .mjs con el tipo de contenido correcto. De hecho, no fue hasta hace poco que hugo podía servir más de una extensión de archivo por tipo de mimo. Parece que con v0.43 esto ha sido arreglado. [mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”] Leer la publicación completa. El código anterior me permite servir archivos mjs para los módulos ES con el tipo de mime correcto (los módulos de notas deben ser servidos con ‘text / javascript’).

Tengo pensamientos sobre la publicación que hice ayer sobre los módulos 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 organizó una transmisión en vivo bastante ingeniosa que atrajo a muchos de los proveedores de navegadores para ofrecer una visión general de lo que están trabajando: 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 Leer la publicación completa.

Sam Thorogood de nuestro equipo escribe: 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.