A quick dive in to how to use Lighthouse to try and understand how users in a country might experience the web.

Рут Джон перешла на 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. It may crash, but what the hell you’ll have Linux capabilities ��
• Now you can go back into Settings and in regular settings there’s a ‘Linux apps’ option. Turn this on. It’ll install Linux. Once this is complete you’ll have a terminal open for you. Perfect

Читать полностью.

У Рут есть отличная запись о переходе на Chrome OS, потому что ее главная машина сломалась.

4 месяца назад я перешел на Chrome OS (до ввода / вывода Google) и перешел на Mac, потому что я сломал свой PixelBook (теперь исправленный).

Для меня сегодня это одна из лучших машин для веб-разработки. Это единственное устройство, на котором я могу проверить «настоящую мобильную связь» - вы можете установить Chrome на Mobile на нем, Firefox Mobile, Samsung Browser, Brave и т. Д. Через платформу ARC. Crostini также является игровым чейнджером для Chrome OS, поскольку он привносит большую часть экосистемы приложений Linux в Chrome OS, и он действительно начинает заполнять огромную область приложений для меня в Chrome OS; У меня есть Firefox, vim, git, VS Code, Node, npm, все мои инструменты сборки, GIMP и Inkscape … Это не значит, что это было прекрасно, Crostini может быть быстрее, это еще не ускорило GPU, и это могло бы быть более интегрированным с Filemanager и т. д., и, наконец, PixelBook действительно нуждается в большем количестве физических портов - я могу подключить к нему два экрана 4k, но я не могу одновременно заряжать.

Я думаю, что обтекание Рут также довольно точно, PixelBook - дорогая машина, но я очень рад видеть, как это приходит на все больше и больше устройств (особенно на гораздо более низких ценах).

Would I pay full price for it? I’m not sure I would pay full price for anything on the market right now. Point me in the direction of a system that will run my graphics software and makes a good dev machine (with minimal setup) and lasts more than 18 months, point me in the direction of a worthy investment and I will pay the money.

Ага.

Ведомство общественных работ Прогрессивные веб-приложения. Фрэнсис Берриман и Алекс Рассел придумали термин «прогрессивные веб-приложения» в 2015 году с тем, что, по моему мнению, является серьезным сообщением «Прогрессивные веб-приложения: экранирование вкладок без потери нашей души». 3 года спустя, мы прошли долгий путь. Из свободной коллекции технологий - Service Worker, Manifest, Add to Homescreen, Web Push, которые первоначально были реализованы только в одном браузере, бренду, который начал сталкиваться с отраслью с предприятиями и разработчиками, и все основные поставщиков браузеров, реализующих большую часть стека PWA.

Мустафа пишет:

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. I think this is something that we have to take on board: to learn how to educate and not just expect everyone to trust us by default. That takes time — perhaps using scenario-based design or design workshops like a design sprint would help. Getting non-designers to observe users while using a prototype they created is one of the best experiences I have seen in this field.

Cross-browser support is lacking crucial features. Designers need to understand developer tooling, to better scope out what is possible. I think using paired programming or the design process described above can help.

Responsive design is still challenging. I think this is in part due to the tools we use; I would love Chrome Design Tools that would help turn the browser into a creative tool. This space is where I think the next evolutionary step for site and web app creation is at. Mozilla is doing some fantastic work in this space, with their layout and shapes tooling.

All in all the challenges that we face seem to be all the age-old ones. Process, tools, and respect.

Читать полностью.

Я нашел это очень интересное сообщение, которое также является дополнением к сообщению, которое я написал о проблемах для веб-разработчиков. Неудивительно, что совместимость браузеров является проблемой, но проблема по-прежнему вызывает беспокойство в том, что создание IE11 по-прежнему является тем, что удерживает отрасль. Аналогичным образом, Мустафа указывает, что по-прежнему существует проблема с инструментами вокруг адаптивного дизайна, и акцент на единственном отзывчивом решении всегда приводит к следующему (то есть в сообщении Мустафы):

Designing once and using everywhere is still hard to reach ambition.

Это проблема, с которой, я думаю, мы все еще боремся. С одной стороны, мы хотим, чтобы все создавали гибкое решение, которое может обслуживать каждого на каждом форм-факторе устройства, с другой стороны, контекст пользователя важен, и часто пользователь будет только желать выполнить определенные действия в определенное время; мы очень много видим в индустрии розничной торговли и коммерции: люди будут просматривать на мобильных устройствах и заполнять их на рабочем столе, и тогда возникает вопрос: вы больше всего используете эту мультимодальную модель или создаете последовательный опыт на всех устройствах … I подозревают, что ответ «это зависит», но в любом случае это трудная проблема для каждого из групп продуктов инженерам.

Филип Уолтон обладает огромным погружением в новый 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.

On the web, there has historically been no such lifecycle, and apps can be kept alive indefinitely. With large numbers of web pages running, critical system resources such as memory, CPU, battery, and network can be oversubscribed, leading to a bad end-user experience.

While the web platform has long had events that related to lifecycle states — like load, unload, and visibilitychange — these events only allow developers to respond to user-initiated lifecycle state changes. For the web to work reliably on low-powered devices (and be more resource conscious in general on all platforms) browsers need a way to proactively reclaim and re-allocate system resources.

In fact, browsers today already do take active measures to conserve resources for pages in background tabs, and many browsers (especially Chrome) would like to do a lot more of this — to lessen their overall resource footprint.

The problem is developers currently have no way to prepare for these types of system-initiated interventions or even know that they’re happening. This means browsers need to be conservative or risk breaking web pages.

The Page Lifecycle API attempts to solve this problem by:

• Introducing and standardizing the concept of lifecycle states on the web.
• Defining new, system-initiated states that allow browsers to limit the resources that can be consumed by hidden or inactive tabs.
• Creating new APIs and events that allow web developers to respond to transitions to and from these new system-initiated states.
• This solution provides the predictability web developers need to build applications resilient to system interventions, and it allows browsers to more aggressively optimize system resources, ultimately benefiting all web users.

The rest of this post will introduce the new Page Lifecycle features shipping in Chrome 68 and explore how they relate to all the existing web platform states and events. It will also give recommendations and best-practices for the types of work developers should (and should not) be doing in each state.

Читать полный пост.

Мой первый комментарий: вы должны прочитать сообщение Philips. Это невероятно.

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

Наконец, приведенная ниже диаграмма объясняет, что все это хорошо подходит.

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.

Читать полный пост.

У меня были смешанные чувства по этому поводу изначально, потому что так много людей не справились с событием beforeinstallprompt, это означало, что внезапно количество установок Web APK упадет довольно значительно, но я думаю, что это действительно правильно.

Цель состоит в том, чтобы уменьшить количество раздражающих подсказок, происходящих в Интернете, и последнее, что нам нужно в отрасли, - это относительно большая подсказка, когда мы думаем, что пользователь может захотеть установить PWA, вместо этого вам теперь нужно подумайте о том, где и когда ** вы ** хотите запросить установку, и вы должны сделать это в ответ на жест пользователя.

Самое главное, что мы (Chrome) внедряем более привычные способы дать пользователю возможность узнать, что опыт может быть установлен, прямо сейчас это небольшая нижняя панель, которая появляется при первой загрузке, и, надеюсь, в будущем мы сможем исследовать более тонкие способы дать пользователю понять, что они могут принять меры.

Большой обзор 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. Those are amazing in and of themselves, but the growth front is where things really shined. Logins increased by 370 percent and new signups increased by 843 percent year-over-year. Since we shipped the new experience, mobile web has become the top platform for new signups. And for fun, in less than 6 months since fully shipping, we already have 800 thousand weekly users using our PWA like a native app (from their homescreen).

Looking back over one full year since we started rebuilding our mobile web, we’re so proud of the experience we’ve created for our users. Not only is it significantly faster, it’s also our first platform to support right-to-left languages and “night mode.” Investing in a full-featured PWA has exceeded our expectations. And we’re just getting started.

Читать полное сообщение.

Это действительно отличная статья, показывающая преимущества создания высококачественных, быстрых и привлекательных сайтов. Приятно также видеть, что часть приложения PWA, в частности, «Добавить в Homescreen», используется множеством пользователей. Читая более широкую публикацию, приятно видеть, что они сосредоточились на отличном опыте работы на веб-сайтах, в котором основное внимание уделяется сайтам быстрой загрузки, которые имеют повторяемую и прогнозируемую производительность с помощью кодового разделения, чтобы уменьшить начальную нагрузку, а также хорошую архитектуру, с которой они могут делиться команда. Затем, когда у вас есть базовый опыт, вы можете накладывать на такие функции, как push-уведомления для пользователей, которые их хотят.

По умолчанию 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).

I couldn’t find a lot of guidance on what to do here, so I went to experiement and this solution is the solution I came across:

1. Create a file that imports the npm module I needed. module.exports = require(‘get-urls’); This module will be what’s converted to ES6 style.
2. Create a rollup config that
   1. Imports the node globals, and builtins.
   2. Resolves all npm modules required for my usage of this module.
   3. Pass the results through the commonjs plugin so that it’s now in JavaScript module format.
   4. Compress the output, because it’s huge :
3. Include the bundled file in your project and rejoice.

Читать полное сообщение.

Одна из вещей, которые я хотел попытаться сформулировать в оригинальной статье, но я решил вытащить ее, заключается в том, что в экосистеме узла существует огромное количество кода, который на самом деле не является специфическим для узла как такового, но был тесно связан с Узел через Common JS и другие очень специфичные API-интерфейсы узлов (Buffer, старый URL и т. Д. И т. Д.), Которые потребуют больших усилий, чтобы вытащить себя, и, таким образом, изменение должно было сделать, чтобы ES-модули повсеместно были потенциально весьма болезненными, и до тех пор, пока изменения экосистемы, нам нужно будет использовать множество инструментов преобразования и связующих, чтобы иметь возможность совместного использования кода на нескольких платформах (веб-сервере).

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

Существует также переход на использование «.mjs» в качестве расширения файла, которое является стандартным как для узла, так и для Интернета. Я чувствую себя полностью комфортно с этим, однако .msj не является файлом, который любая инфраструктура еще признает как «text / javascript», и я с нетерпением жду, чтобы это просто было отсортировано, чтобы оно автоматически выводилось на каждом веб-сервере на планете, поэтому Мне не нужно развертывать еще больше изменений конфигурации в моей обслуживающей инфраструктуре.

Много веселых раз вперёд, я с нетерпением жду возможности получить гораздо больше функциональности в Интернете.

Я работал над тем, чтобы упростить продвижение контента на мой статический сайт, и это было веселое упражнение, которое я расскажу больше в другом посте. В этой статье я хочу поделиться конфигурацией rollup, которую я использовал для импорта почти любого модуля npm в проект frontend с использованием модулей JavaScript. Мне нужен был быстрый способ импортировать простой модуль get-urls в мой проект. Модуль хорошо протестирован, и он делает то, что мне нужно … игнорировать тот факт, что его довольно легко реализовать в нескольких строках JavaScript.

Трейси Ли из 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

Читать полный пост.

Я полностью наслаждался потоком в прямом эфире, и было здорово услышать, что все делают. Мне также нравится видение, которое Beaker Browser имеет для распределенной сети, они проделали большую работу с тех пор, как мы встречались в последний раз.

Я призываю вас посмотреть связанное видео, у Edge было огромное количество обновлений, включая поддержку полного рабочего стола, переменные шрифты, а также они вводят WebP. Mozilla уделяет большое внимание веб-сборке и инструментам разработки, Beaker делает потрясающие вещи с помощью dat: и распределенные вычисления, и Brave продвигается много по BAT.

Я сосредоточился на работе, которую делает наша команда на данный момент, и это в целом вокруг Discovery, Speed ​​and Reliability, UI Responsiveness, UX - Получите материал, Безопасность и конфиденциальность. Чуть более конкретно:

• Discovery - нам действительно нужно, чтобы разработчикам было проще создавать сайты с JS, которые отображались в безгласных сервисах, таких как индексы и встроенные приложения. Это означает, что нам необходимо сосредоточиться на обучении разработчиков тому, как работают индексы, и как их опробовать, а также о том, как создать хороший солидный опыт в области SSR. * Скорость и надежность. Все сайты должны иметь TTI <5s на сети 3g на медианом устройстве (MotoG ⁴⁄₅), и вы должны оптимизировать свой FID (первая задержка ввода). FID - это новая метрика, поэтому важно понять, что она предназначена для представления того, как ваши пользователи испытывают ваш сайт в дикой природе, где TTI трудно измерить, FID должен быть проще. Существует polyfill здесь, который вы можете использовать для тестирования FID * Отзывчивость пользовательского интерфейса. Мы хотели бы, чтобы в Интернете было 60fps везде и облегчалось для разработчиков, поэтому мы работаем над созданием & # x2018; FLIP & # x2019; проще понять, построив Houdini, чтобы мы могли дать разработчикам гораздо больше контроля над рендерингом и, наконец, попытаться максимально облегчить работу «вне основного потока» с помощью таких вещей, как img.decode, и таких инструментов, как комлинк, чтобы заставить рабочих проще в использовании. * UX - Получите материал - Мы действительно хотим изменить то, как мы говорим о новых функциях, выходящих на платформу, в частности, мы хотели бы показать, где технологии должны быть эффективно использованы для улучшения пользовательского опыта, чтобы помочь им быстро выполнить свою работу с минимальным прерыванием. * Безопасность и конфиденциальность - я думаю, что интеллектуальная защита от отслеживания Apple будет иметь долгосрочное влияние на Интернет, и разработчики должны начать думать о создании конфиденциальности, поддерживающей веб-опыт. Если что-то GDPR делает Интернет «интересным» опытом в ЕС.

Наконец, было унизительно и содрогаться, чтобы услышать, что все хотят вернуть Веб-намерения :)

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. Enter PWACompat, a library that takes your Web App Manifest and automatically inserts relevant meta or link tags for icons of different sizes, the favicon, startup mode, colors etc.

Читать полный пост.

Я был поражен этой библиотекой, и я рад видеть, что это получает немного больше внимания. Это был первый раз, когда я на самом деле видел Splash Screen на iOS за последние 5 лет, и он генерирует их по-настоящему аккуратно - он генерирует изображение «на лету» на основе точного размера экрана устройства, а base64 кодирует изображение … он также заполняет многие остатки пробелов в истории Safari Add To Homescreen.

Если вы создаете PWA, я бы включил его.

Font Playground is built for three groups of audiences.

The first group of audience is typographers and designers, who would like to play with fonts that are built with the latest font technologies, such as variable font. It is a playground to fully explore what these new font technologies can offer and how they can be beneficial to your creative workflow.

The second group of audience is me, as a Type Tool’s UI/UX designer. This is a playground for me to test UI experiments for variable fonts and other new upcoming font technologies. One of the key points to the success of new font technology is adoption by design tools, and furthermore, designers. How can design tool present variable fonts in a way that is useful but not too complicated to handle? I hope to find the answers with this playground.

The third group of audience is the type designers and foundries. This is a place to showcase the work-in-progress, cutting-edge font creations. It is a playground to see how fonts are being presented and used in future design tools. How fonts are used can also inform how fonts are made, and what standard should be defined.

Читать полный пост.

Это отличное введение в переменные шрифты, и это отличная игровая площадка, чтобы быстро увидеть все, что вы можете изменить в действии. Добавление нескольких текстовых строк выглядит так, как будто скоро приземлится.

Примечание. Я считаю, что это еще не работает в Firefox, потому что они не поддерживают полностью переменные шрифты.

Патрик пишет о Did.txt

Time flies by when you’re learning how to code. Its super important to take a second every once in a while to simple write down what you did during the past mental sprint. Writing down what you learned solidifies the knowledge.

Читать полный пост.

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

Модель, которая мне нравится, состоит в том, чтобы разделить каждую еженедельную сводку на «что я сделал» и «что намеревается делать на этой неделе». Это помогает мне размышлять и планировать одновременно.

Atishay Jain на CSS Tricks пишет о области, близкой моему сердцу, связывая:

Hyperlinks are the oldest and the most popular feature of the web. The word hypertext (which is the ht in http/s) means text having hyperlinks. The ability to link to other people’s hypertext made the web, a web — a set of connected pages. This fundamental feature has made the web a very powerful platform and it is obvious that the world of apps needs this feature. All modern platforms support a way for apps to register a URI (custom protocol) and also have universal links (handling web links in an app).

Let’s see why we’d want to take advantage of this feature and how to do it.

Читать полный пост.

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

Одна из причин, почему я люблю Интернет, заключается в том, что за ссылкой есть прямой доступ к ресурсу, я не знаю никакой другой платформы, которая могла бы объединить ссылку и фактический ресурс таким же образом, но это могло бы быть soooo much Больше. Стандартная ссылка обеспечивает, по сути, намерение VIEW, которое содержит состояние (url) и контекст (текст между якорями), и вы можете взломать его с помощью пользовательских протоколов, но нам нужно идти намного дальше.

• Нам нужно расширить словарь для registerProtocolHandler для получения большего доступа к более родным схемам * Все, что зарегистрировано в обработчике протокола, должно быть системным. * Мы должны иметь возможность иметь веб-сайты для работы с открытием ряда типов контента и иметь доступные страницы для регистрации в качестве обработчика системных файлов. * Нам нужно иметь более высокие действия для разработчиков, VIEW - это замечательно, нам нужен согласованный набор основных действий, таких как PICK, SAVE, EDIT, чтобы мы могли более эффективно понимать возможности сайта или приложения, а также возможность расширения их с семантикой более высокого порядка. У Android есть это, Сири получает его, используя «Intents», и Web должен иметь его.

Это одна из причин, почему я так волнуюсь о аббревиатурах обмена сообщениями, таких как Comlink, которые устраняют бремя безумия postMessage и позволяют думать об экспонировании функции другим приложения, а затем, как только вы выставляете функцию, вам нужно более легко включить обнаружение этой функции … и это то, что позволяет включить ссылки.

У Дэна из Redfin есть отличная статья о приоритетности скорости веб-сайта:

JavaScript Is the Web’s CO2

As a web developer, I find that most problems can be solved with just a little more JavaScript. Without someone or something to force the industry to cut back, web developers will continue to make web sites that only load “fast enough” via wifi on a fast laptop.

The browser vendors can’t save us. Every time they make the web faster, web developers “take advantage” of the change by using more JavaScript.

Our industry needs Google to take a principled stand, to significantly prioritize fast-loading sites over slow-loading sites

Читать полный пост.

Это может быть не только мы (Google). Я смотрю на нашу команду (Web и Chrome DevRel), способную предоставить инструменты и рекомендации, которые помогут вам начать быстро, а затем оставаться на месте, но после этого индустрия должна признать, что производительность - это функция, а не мысль.

Я писал в проблемах для веб-разработчиков, что по-прежнему существует множество причин, по которым разработчики не уделяют приоритетное внимание производительности (инструменты, руководство и четкие бизнес-стимулы ), Я не думаю, что Google, заявляющий, как написано в статье Dan’s, является ответом на долгосрочное здоровье Интернета, он должен исходить от компаний, которые видят, что производительность конвертируется лучше.

This project is a musical experience built with WebGL and WebVR.

Inspired by the music track, we created an ever-changing environment composed of various geometrical shapes. These were generated procedurally in Houdini and exported to Three.js.

All visual elements are randomized differently on each viewing.

Читать полный пост.

Мне нечего добавить, это потрясающе. Проверьте это.

В последнее время Дин Хьюм делает большую работу с PWA, и он также изучает много новых API-интерфейсов платформы, в этом случае API-интерфейс Generic Sensor:

The Ambient Light Sensor API provides developers with the means to determine ambient light levels as detected by the device’s main light detector. This information is available to developers in terms of lux units. If you are building a Progressive Web App and you want to style it differently depending on the light levels in the room, then this could be the feature for you. There are a number of use cases for this feature, such as a web application that provides input for a smart home system to control lighting, a “Kindle” style reading app, or even a web app that calculates settings for a camera with manual controls (aperture, shutter speed, ISO, etc.).

Читать полный пост.

Я рассказал о API-интерфейсе Generic Sensor на Chrome Dev Summit 2016, поэтому для его выхода в Chrome (как мне кажется, он по-прежнему стоит за флагом) потребуется некоторое время, и похоже, что он впервые приземлился в Edge. Датчик окружающего света является одним из многих API, который построен на основе универсальных датчиков. есть больше таких, как гироскопы и магнитометры; и это позволяет вам получать информацию об уровнях окружающего света вокруг пользователя, открывая такие прецеденты, как автоматическая настройка яркости или даже предлагая пользователю переключиться на тему темного режима. Конечно, будет интересно посмотреть, что будет использовать базовый API-интерфейс Generic Sensor для веб-опытов.

Джонатан Фултон, Видеоблоки:

The basic architecture concepts I wish I knew when I was getting started as a web developer

Читать полное сообщение.

Это потрясающая статья, которая дает действительно отличный обзор относительно стандартного стека, который предназначен для масштабирования многих веб-приложений. Это также показывает, почему многим разработчикам также нравится платформа как сервисные инструменты, такие как Heroku, Firebase или AppEngine, которые могут абстрагироваться от большой сложности за счет стоимости.

Эрик Бидельман на веб-сайтах разработчиков Google, пишет:

Building for the web is a rocky adventure. It’s hard enough to build a top-notch web app that nails performance and uses all the latest best practices. It’s even harder to keep that experience great over time. As your project evolves, developers come on board, new features land, and the codebase grows. That Great Experience ™ you once achieved may begin to deteriorate and UX starts to suffer! Feature Policy is designed to keep you on track.

With Feature Policy, you opt-in to a set of “policies” for the browser to enforce on specific features used throughout your site. These policies restrict what APIs the site can access or modify the browser’s default behavior for certain features.

Here are examples of things you can do with Feature Policy:

• Change the default behavior of autoplay on mobile and third party videos.
• Restrict a site from using sensitive APIs like camera or microphone.
• Allow iframes to use the fullscreen API.
• Block the use of outdated APIs like synchronous XHR and document.write().
• Ensure images are sized properly (e.g. prevent layout thrashing) and are not too big for the viewport (e.g. waste user’s bandwidth).

Policies are a contract between developer and browser. They inform the browser about what the developer’s intent is and thus, help keep us honest when our app tries to go off the rails and do something bad. If the site or embedded third-party content attempts to violate any of the developer’s preselected rules, the browser overrides the behavior with better UX or blocks the API altogether.

Читать полный пост.

Мне интересно посмотреть, как это происходит. Я волнуюсь, что разработчикам это не понравится, или им будет оказано давление. Как я сказал в Twitter, я беспокоюсь о стимулах, и нам нужно объединить тот факт, что эта функция позволит разработчикам контролировать большое количество доступных функций, которые либо занимать память, либо замедлять работу страницы, либо непреднамеренно утечка конфиденциальной информации для сторонних сторон, а также то, что разработчики могут продавать своим бизнесом. Одним из примеров может быть то, что ** если ** в Play Store когда-либо появлялись списки PWA, тогда они могли бы иметь набор политик, автоматически применяемых при запуске приложения, и вы, как разработчик, соглашаетесь с этим в пользу того, чтобы быть в магазин.

Я рад видеть, что происходит с этим API, и я очень хочу, чтобы он был принят, даже если он используется разработчиками только для того, чтобы их команды не регрессировали.