Hello.

У меня есть цель создать самое простое в мире программное обеспечение для записи экрана, и я в течение последних нескольких месяцев медленно работала над проектом (я имею в виду очень медленно). В предыдущих постах я получил screen recording and a voice overlay , суетясь с потоками из всех входных источников. Однако одной из проблем было то, что я не мог понять, как получить звук с рабочего стола * и * наложить звук из динамика.

У меня было немного простоя после Google IO, и я хотел покончить с долговременным зудом, который у меня был. Я просто хочу иметь возможность копировать текст, который хранится внутри изображений в браузере. Это все. Я думаю, что это будет отличная особенность для всех. Нелегко добавить функциональность непосредственно в Chrome, но я знаю, что могу использовать систему намерений на Android, и теперь я могу сделать это с помощью Интернета (или, по крайней мере, Chrome на Android).

Большие обновления для последней версии Safari! Я думал, что это было довольно громкое объявление, и противоположность Google, который некоторое время назад сказал, что Google Pay Lib - это рекомендуемый способ осуществления платежей … Я имею в виду, что это не за миллион миль, Google Pay построен на вершине запроса на оплату, но это не PR в первую очередь. Payment Request is now the recommended way to pay implement Apple Pay on the web.

Несколько лет назад я провел некоторое исследование того, как нативные приложения реагируют на отсутствие сетевого подключения. Хотя я потерял ссылку на анализ (могу поклясться, что это было в Google+), всеобъемлющим повествованием было то, что многие нативные приложения неразрывно связаны с Интернетом, и они просто отказываются работать. Похоже, что многие веб-приложения отличаются от веба тем, что этот опыт все еще остается «фирменным», Барт Симпсон скажет вам, что вам нужно быть онлайн (например), и все же для В подавляющем большинстве случаев вы получаете «Dino» (см.

Я обновил редактор на основе Hugo, чтобы попытаться использовать EditorJS в качестве редактора для блога. 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 .

В последнее время мы много работали над функциональными телефонами, и это было сложно, но весело. Самое сложное в том, что на KaiOS мы обнаружили, что невозможно отлаживать веб-страницы, особенно на имеющемся у нас оборудовании (Nokia 8110). Nokia - отличное устройство, оно построено на KaiOS, которое, как мы знаем, основано на чем-то похожем на Firefox 48, но оно заблокировано, нет традиционного режима разработчика, как на других устройствах Android, что означает, что вы не можете подключить Firefox.

Я много играл с Shape Detection API в Chrome, и мне очень нравится его потенциал, например, очень простой QRCode detector я написал давным-давно, имеет полизаполнение JS, но использует new BarcodeDetector() API, если он доступен. Вы можете увидеть некоторые другие демонстрации, которые я построил здесь, используя другие возможности API обнаружения формы: Face Detection , Barcode Detection и Text Detection . Я был приятно удивлен, когда наткнулся на Jeeliz на выходных и был невероятно впечатлен производительностью их инструментария - разумеется, я использовал Pixel3 XL, но обнаружение лиц казалось значительно быстрее, чем это возможно с API FaceDetector .

Я видел твит от хорошего Mariko и коллеги, Mariko , о тестировании на линейке бюджетных устройств, которые держат вас в курсе. Контекст твита заключается в том, что мы смотрим на то, на что похожа веб-разработка при создании для пользователей, которые ежедневно живут на этих классах устройств. Сейчас команда проделывает большую работу в этом пространстве, но я потратил целый день на то, чтобы создать сайт, и было невероятно сложно заставить что-либо работать даже при слегка приемлемом уровне производительности - вот некоторые из проблем, с которыми я столкнулся:

Я только размышлял над некоторыми из work our team has done и нашел проект 2017 года, который создали Роберт Найман и Эрик Бидельман. Browser Bug Searcher! . Невероятно, что с помощью всего нескольких нажатий клавиш у вас есть отличный обзор ваших любимых функций во всех основных браузерных движках. Source code available . Это фактически выдвигает на первый план одну из проблем, с которыми я сталкиваюсь с трекерами ошибок crbug и webkit: у них нет простого способа получать потоки данных в таких форматах, как RSS.

Я искал быстрый редактор https://www.webcomponents.org/ на https://www.webcomponents.org/ чтобы я мог упростить публикацию в этом блоге, и я наткнулся на аккуратный набор компонентов github . Я знал, что у них были <time-element> но я не знал, что у них был такой хороший и простой набор полезных элементов.

Выглядит неплохо сегодня.

То, как мы (как отрасль) реализуем согласие GDPR, - беспорядок. Я не уверен, почему кто-то выбрал бы что-либо, кроме «Использовать только необходимые файлы cookie», однако я действительно не могу определить разницу между любым из вариантов и компромиссом между обоими вариантами, не говоря уже о том, что я могу убедиться, что это только используя только необходимые куки.

История рассудит нас всех по этому беспорядку, и я надеюсь, что это будет тематическое исследование для всех о влиянии национализма, личных интересов, колониального высокомерия, знаменитостей и шуток. Fuckers.

Рики Монделло из команды Safari недавно поделился заметкой о том, как Twitter использует спецификацию ./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 . Эта особенность полностью прошла мимо меня, но это хорошая идея: если файл находится в известном месте, может ли браузер предложить пользователю пользовательский интерфейс, который позволяет им быстро сбросить пароль без необходимости навигации по сложному пользовательскому интерфейсу сайтов.

Джейк и его команда создали этот довольно удивительный пользовательский элемент для управления масштабированием пинча в любом наборе HTML, за исключением собственной динамики масштабирования в браузере (например, масштабирование в мобильной области просмотра). Этот элемент был одним из центральных компонентов, которые нам нужны для приложения squoosh , которое мы создали и выпустили на Chrome Dev Summit (… я говорю «выпущено на Chrome Dev Summit» - Джейк показывал его всем на Китайском дне разработчиков Google).

Пит ЛеПейдж представляет API Target Web Share и доступность в Chrome через пробную версию 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 . Этот API-интерфейс меняет правила игры в Интернете, он открывает веб-интерфейс для чего-то, что было когда-то доступно только для собственных приложений: Native Sharing.

Отличная статья, видео и пример Томаса Штайнера о хороших push-уведомлениях в Интернете. 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.

Кейси Баскес, замечательный технический писатель из нашей команды, написал довольно удивительную статью о своем опыте измерения того, насколько хорошо существующие рекомендации по работе с документацией работают для объяснения технического материала. Лучшие практики в этом смысле могут быть общеизвестными отраслевыми стандартами технического письма или руководством по стилю написания ваших собственных компаний. Проверьте это! Recently I discovered that a supposed documentation “best practice” may not actually stand up to scrutiny when measured in the wild.

Я был в Китае пару недель назад в День разработчиков Google, и я показывал всех своим QRCode scanner, он отлично работал, пока я не вышел в автономный режим. Когда пользователь был в автономном режиме (или частично подключен), камера не запустилась, а это означало, что вы не можете привязать QR-коды. Мне потребовался возраст, чтобы понять, что происходит, и оказалось, что я ошибочно начал работу с камерой в своем «onload» событии, и запрос Google Analytics зависает и не разрешается своевременно.

В выходные я играл с видео кодеком эффектов Boomerang, вы можете получить его работу в режиме реального времени (я объясню позже). Я работал над Chrome на рабочем столе, но он никогда не будет работать должным образом в Chrome на Android. См. Код здесь. Похоже, когда вы используете captureStream () на <canvas>, который имеет относительно большое разрешение (1280x720 в моем случае), MediaRecorder API не сможет кодировать видео, и это не будет ошибкой, и вы не можете обнаружить, что он не может кодировать видео раньше времени.

Хорошая статья о PWA из Mike Elgan. Я не уверен в цели Microsoft с PWA, но я думаю, что наша задача довольно проста: мы хотим, чтобы пользователи мгновенно получали доступ к контенту и функциям и таким образом, как они ожидают, что смогут взаимодействовать с ним на своих устройствах. Интернет должен охватывать всех через каждое подключенное устройство, и пользователь должен иметь доступ к их предпочтительной форме, в качестве приложения, если это так, как они ожидают (мобильный, может быть), или голос на помощнике и т.

Первая проблема, которую я нашел, пытается создать видеоредактор в Интернете (0). У меня есть несколько видеопотоков (рабочий стол и веб-камера), и я хотел иметь возможность переключаться между видеопотоками на один элемент видео, чтобы я мог быстро переключаться между веб-камерой и рабочим столом, а не прерывать «MediaRecorder». Похоже, вы должны сделать это, переключив свойство selected на объектvideoTracks на <video>, но вы не можете, массив треков содержит только 1 элемент (первый видео трек на MediaStream).

Я большой поклонник QRCodes, они очень простой и опрятный способ обмена данными между реальным миром и цифровым миром. В течение нескольких лет у меня был небольшой побочный проект под названием QRSnapper & mdash; ну, у него было несколько имен, но это тот, который я поселил в & mdash; который использует API getUserMedia для получения живых данных с камеры пользователя, чтобы он мог сканировать QR-коды в ближайшем реальном времени. Целью приложения было поддерживать 60 кадров в секунду в пользовательском интерфейсе и почти мгновенное обнаружение QR-кода, это означало, что мне пришлось ввести код обнаружения в веб-рабочего (довольно стандартный материал).

Я люблю FFMPEG.js, это аккуратный инструмент, который скомпилирован с помощью asm.js`and, и пусть он будет создавать JS-приложения, которые могут быстро редактировать видео. FFMPEG.js также работает с веб-рабочими, чтобы вы могли кодировать видео без блокировки основного потока. Я также люблю Comlink. Comlink позволяет мне легко взаимодействовать с веб-рабочими, выставляя функции и классы, не имея дело с сложным конечным автоматом postMessage. Недавно мне удалось объединить этих двух. Я экспериментировал с тем, чтобы экспортировать FFMPEG в Web Assembly (он работает - yay), и я хотел очистить всю работу postMessage в текущем проекте FFMPEG.

Недавно я вернулся из поездки в Индию для участия в мероприятии Google4India (вскоре сообщается) и встретиться с большим количеством компаний и разработчиков. Одной из наиболее интересных изменений стало стремление к большему количеству контента на языке пользователей в стране, и это было особенно очевидно во всех продуктах Google, которые варьировались от упрощения поиска на языке пользователей, поиска контента, а также прочитать его пользователям в текстовой или речевой форме. Вся поездка заставила меня задуматься.

Помните, когда веб-приложения были * рекомендованным способом использования приложений на iPhone? What are web apps? Learn what they are and how to use them. Читать полное сообщение. Примерно в 2013 году Apple начала перенаправлять каталог / webapps / top-level в / iphone / Дело в том, что каталог действительно хорош, многие приложения в нем все еще работают сегодня. Однако, глядя на AppStore, он решил намного больше проблем, которые были у разработчиков: Лучшее обнаружение и поиск именно потому, что AppStore был непосредственно на устройстве.

Я пишу сообщение в блоге о ранних API для мобильных веб-сайтов, и Алекс Рассел напомнил мне о 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 Читать полное сообщение. Я думаю, что интересно видеть, что AppCache и WebSQL, Geolocation и WebWorkers вышли из идей в Google Gears, и только последние два из них действительно выжили.

Мы часто используем Google Chat для общения через нашу команду - это похоже на нашу слабость; Мы также создаем много контента, доступного через RSS-каналы, у нас даже есть [команда, которую вы можете просмотреть) (http://devwebfeed.appspot.com). До недавнего времени я узнал, что создать простой простой почтовый бот через WebHooks довольно легко. дал мне идею, я могу создать простой сервис, который опросает RSS-каналы, а затем отправляет их на наш веб-сайт, который может отправлять сообщения прямо в наш командный чат.

Рут Джон перешла на 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.

Мустафа пишет: 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.

Филип Уолтон обладает огромным погружением в новый API, над которым работала команда Chrome, чтобы дать вам (разработчику) контроль за тем, как реагировать, когда браузер выгружает ваши вкладки. 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 пишет о важных изменениях в Add to Homescreen в 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.

Большой обзор 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.

По умолчанию Hugo не поддерживает файлы .mjs с правильным типом контента. Фактически, только до недавнего времени hugo мог обслуживать более одного расширения файла на mime-тип. Похоже, что с v0.43 это было исправлено. [mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”] Читать полное сообщение. Вышеприведенный код позволяет мне обслуживать файлы mjs для ES-модулей с правильным типом mime (модули примечаний должны обслуживаться с помощью «text / javascript»). Это необходимо только для локального тестирования, хостинг - это еще одна проблема :)

У меня есть мысли о том, что я сделал вчера о 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).

Трейси Ли из The Dot организовал довольно аккуратный потоковый поток, который привел многих поставщиков браузеров, чтобы дать обзор того, над чем они работают: 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 Читать полный пост.

Sam Thorogood из нашей команды пишет: 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.