Прогрессивные веб-приложения в 2020

Содержание

Разбор худшего в мире куска кода

Перевод


Есть одна итальянская страница на Facebook. Называется она «Il Programmatore di Merda», что в переводе означает «Дерьмовый программист». Мне нравится эта страница. Там часто публикуют куски отвратительного кода и мемы о программировании. Но однажды я увидел там кое-что совершенно потрясающее. Этот кусок кода заслужил почётное звание «лучшего произведения» за неделю. Я решил этот код разобрать, но тут так много всего неправильного, что мне сложно даже выбрать первую проблему для анализа. Если вы — начинающий программист, то мой материал поможет вам понять то, какие ужасные ошибки совершены тем, кто писал этот код.

Сочетания клавиш

Редактор исходного сочетания

Эта таблица перечисляет клавиатурные сокращения по умолчанию для редактора исходного кода.

Вместо них в разделе настроек инструментов разработчика, вы можете выбрать схему привязки клавиш Vim, Emacs или Sublime Text.

Для этого откройте страницу , выберите настройку и присвойте ей значение «vim», «emacs» или «sublime». Если вы сделаете это, выбранная схема привязки будет использоваться для всех инструментов разработчика, использующих редактор исходного кода. Вам нужно будет повторно открыть редактор, чтобы изменения вступили в силу.

Начиная с Firefox 33 и выше, настройки схемы привязки клавиш выставляются в разделе настроек инструментов разработчика, и вы можете установить её там вместо ручного редактирования .

Команда Windows OS X Linux
Перейти к строке Ctrl + J Cmd + J Ctrl + J
Найти в файле Ctrl + F Cmd + F Ctrl + F
Найти далее Ctrl + G Cmd + G Ctrl + G
Выделить всё Ctrl + A Cmd + A Ctrl + A
Вырезать Ctrl + X Cmd + X Ctrl + X
Копировать Ctrl + C Cmd + C Ctrl + C
Вставить Ctrl + V Cmd + V Ctrl + V
Отменить Ctrl + Z Cmd + Z Ctrl + Z
Повторить Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Отступ Tab Tab Tab
Убрать отступ Shift + Tab Shift + Tab Shift + Tab
Переместить строки вверх Alt + вверх Alt + вверх Alt + вверх
Переместить строки вниз Alt + вниз Alt + вниз Alt + вниз
За-/раскомментировать строки Ctrl + Cmd + Ctrl +

Другие классификации видов тестирования

Чаще всего используется разбиение на три уровня, это

  1. модульное тестирование,
  2. интеграционное тестирование,
  3. системное тестирование.

Под модульным тестированием обычно подразумевается тестирование на достаточно низком уровне, то есть тестирование отдельных операций, методов, функций.

Под системным тестированием подразумевается тестирование на уровне пользовательского интерфейса.

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

Если посмотреть на какое-нибудь типичное веб-приложение, то можно заметить, что оно представляет собой своеобразную матрешку.

Оно состоит из клиентской и серверной части, клиентская часть включает в себя помимо браузера некоторый набор java-скрипт-библиотек, каждая из них состоит из набора функций.

Серверная часть, в свою очередь, еще может быть разделена на несколько крупных кусков. Один выполняется на сервере приложений, другой выполняется на стороне базы данных, на сервере приложений имеется целый ряд библиотек. Некоторые из них разработаны самостоятельно, некоторые уже готовые используются.

Библиотеки состоят из классов, классы состоят из методов, на стороне баз данных тоже есть пакеты, состоящие из хранимых процедур.

Само по себе приложение тоже может являться частью какой-то более крупной информационной системы.

В этой матрешке мы должны понять, где, на каком уровне у нас должно находиться модульное тестирование, а на каком должно находиться системное тестирование. И найти еще место для интеграционного.

Глядя на эту матрешку мы можем понять, что разделение на системное и модульное тестирование является чисто условным.

То есть у нас система состоит из каких-то модулей. Модули в свою очередь состоят из других более мелких модулей. Эти мелкие модули состоят еще из более мелких, и так далее.

 И так, получаем в результате:

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

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

По вертикали — чем выше располагается вид тестирования, тем больше внимания уделяется некоторым внешним проявлениям поведения программы, чем ниже он находится, тем больше мы внимания уделяем ее внутреннему технологическому устройству программы.

По горизонтали — чем левее находятся наши тесты, тем больше внимания мы уделяем их программированию, чем правее они находятся, тем больше внимания мы уделяем ручному тестированию и исследованию программы человеком.

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

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

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

Так вот, исходя из классификации по целям, модульное тестирование у нас оказывается в левом нижнем квадранте, а все остальные квадранты — это системное тестирование.

Post Mortem по недоступности Quay.io

Перевод

19 мая, ранним утром (по летнему североамериканскому восточному времени, EDT), сервис quay.io упал. Авария затронула как потребителей quay.io, так и Open Source-проекты, использующие quay.io в качестве платформы для сборки и распространения ПО. Red Hat дорожит доверием как одних, так и других. Команда SRE-инженеров сразу подключилась к работе и постаралась как можно скорее стабилизировать работу сервиса Quay. Однако пока они этим занимались, клиенты лишились возможности push’ить новые образы, и лишь периодически им удавалось pull’ить имеющиеся. По неведомой причине база данных quay.io блокировалась после масштабирования сервиса на полную мощность.

Google говорит, университеты больше не нужны

Перевод

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

Возможности

С точки зрения новых возможностей PWA в 2020 году, я думаю, мы можем разделить экосистему на три части:

Стоит сказать, что есть некоторые функции (в основном, связанные с платформой Android), которые развиваются совсем в другом темпе, что, на мой взгляд, связано с внутренней борьбой между Android/Play Store и Chrome в Google: развитие TWA, возможность установки из омнибокса, или 2 года, которые потребовались Chrome для поддержки правильных, маскируемых иконок для Android 8+. На десктопе Chrome, похоже, развивается быстрее в вопросах, связанных с интеграцией с платформами.

  • Край света: здесь у нас есть некоторые движки, у которых нет явно намеченного пути. Среди них — Gecko (который реализует множество API из империи Chromium, но в мире PWA намного медленнее и без ясных планов на будущее), kaiOS (кажется, застрявшая в старой версии Gecko без понимания в отношении будущего движка), TWA и Universal Windows API в Windows Store.

[ +конкурс ] Новый релиз Acronis True Image 2021 — комплексная киберзащита и новые возможности

Привет, Хабр! У нас настало время очередного релиза Acronis True Image, нашего флагманского продукта для персональных пользователей. Версия 2021 года вышла действительно особенной, потому что она сочетает в себе и обширные возможности по защите данных, и новые средства для обеспечения безопасности информационных систем. Мы работаем над этим продуктом с 2007 года и каждый раз стараемся сделать его максимально удобным и функциональным для конечных пользователей. Под катом — подробная информация об отличиях True Image 2021, а также о новых технологиях, использованных в последней версии и небольшой розыгрыш лицензий.

Тайны файла подкачки pagefile.sys: полезные артефакты для компьютерного криминалиста

В одной крупной финансовой организации произошел неприятный инцидент: злоумышленники проникли в сеть и «пылесосили» всю критически важную информацию — копировали, а затем отправляли данные на свой удаленный ресурс. Криминалистов Group-IB призвали на помощь лишь спустя полгода после описываемых событий…. К тому времени часть рабочих станций и серверов была уже выведена из работы, а следы действий злоумышленников уничтожены из-за использования ими специализированного ПО и из-за неправильного логирования. Однако на одном из серверов, участвовавших в инциденте, был обнаружен файл подкачки Windows, из которого эксперты получили критически важную информация об инциденте. В этой статье Павел Зевахин, специалист Лаборатории компьютерной криминалистики Group-IB, рассказывает о том, какие данные можно обнаружить в ходе криминалистического исследования в файлах подкачки Windows.

Прозрачная энергия: превращение окон в солнечные панели

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

Панель инструментов

Панель содержит набор контролов (управляющих элементов интерфейса), с помощью которых можно выбрать инструмент или отсоединить/присоединить/закрыть окно.

Основной набор инструментов

Далее располагается раздел кнопок, позволяющий активировать основные инструменты Панели.  В этом разделе могут находится следующие инструменты:

  • Веб-консоль
  • Отладчик JavaScript
  • Инспектор страниц
  • Редактор стилей
  • Профайлер
  • Монитор Сетевых Параметров

Учтите, что в этом разделе не всегда могут быть видны все инструменты Панели: в этом разделе показываются только те инструменты, которые доступные в данном контексте (например, пока еще не все инструменты поддерживают функцию удалённой отладки. Таким образом, если элементом отладки, из-за которого открыта Панель инструментов, является объект, который не поддерживает функцию отладки Firefox, то в этом разделе будут показаны не все инструменты Основного набора).

Дополнительные инструменты

  • Режим адаптивного дизайна
  • 3D-вид
  • Захватить цвет со страницы
  • Сделать скриншот всей страницы: этот появился в Firefox 32. Он делает скриншот целой веб-страницы и сохраняет его в каталоге Загрузки.
  • SВыберите iframe в качестве текущего целевого документа: появился в Firefox 34.

Toolbox controls


Наконец, ряд кнопок, позволяющих:

  • закрыть окно
  • переключить место прикрепления окна между низом окна браузера и боковой стороной
  • переключиться между отдельным окном и прикреплённым к окну браузера

Панель редактора

Справа находится панель редактора. Где вы можите видеть и редактировать исходный код выбранного листа стилей. Любые изменения, которые вы делаете, немедленно применяются к странице. Это позволяет легко экспериментировать, просматривать, а также изменять тестировать. После того как Вы удовлетворены вашими изменениями, Вы можете сохранить копию локально, нажав кнопку Сохранить в нижнем правом углу листа в панели таблица стилей.

Редактор предоставляет номера строк и подсветку синтаксиса, что облечает читать вам CSS. Он также поддерживает номер ряда .

Редактор Стилей автоматически де-минимизирует таблицы стилей, которые он обнаруживает, не влияя на оригинал. Что делает его гораздо легче для работаты на страницах, которые были оптимизированы.

Редактор Стилей поддерживает автозаполнение. Просто начните печатать, и он будет предлагать вам перечень предложений.

Вы можете включить автозаполнение в .

Открытый стандарт

  • Dimitri Glazkov, Google
  • Hayato Ito, Google
  • Dominic Cooney, Google

Получается, что этот стандарт написан почти на 100% в Гугле. Но, может быть, у сообщества была возможность высказать свои пожелания и они были услышаны? Давайте рассмотрим несколько примеров.

Глобальный реестр компонентов

Избегание глобальных сущностей является одним из важных аспектов дизайна масштабируемых систем. На эти грабли веб-разработка уже наступала в CSS, где любой класс применяется глобально ко всей странице. Веб-компоненты попытались починить это через Shadow DOM, но тут же сломали в другом месте, добавив глобальный реестр компонентов. Каждый компонент должен иметь уникальное имя, а если встретится дубликат, то выбросится исключение, и весь Javascript перестанет работать, если его не завернуть в try/catch.

Таким образом, спустя 6 лет после первоначальной публикации стандарта, мы все еще имеем проблему, которая должна была бы выявиться еще на первоначальном ревью. Хотя какое тут ревью, сотрудникам Гугла виднее, как именно нам будет хорошо.

Расширение нативных элементов

Возможно, Гугл игнорирует пожелания рядовых разработчиков, но прислушивается к разработчикам других браузерных движков? Они же все на общее дело работают. Но здесь тоже не все гладко.

Веб-компоненты предусматривают возможность расширения нативных элементов. Например, вы можете навесить дополнительную функциональность на тэг при помощи такого кода:

Тем не менее этот синтаксис все-таки попал в финальный стандарт, хоть не работает и никогда не будет в одном из трех основных браузеров, и тем самым опровергает правило «то что есть в стандарте, будет поддержано браузерами, рано или поздно»

Дизайн

2019 привнёс три новые концепции, которые оказывают влияние на дизайн PWA:

  • тёмная тема
  • складные устройства
  • маскируемые иконки

Тёмная тема

При включенной тёмной теме содержимое вашего PWA можно изменить с помощью CSS-медиазапросов. Но спецификация Web App Manifest не предоставляет никаких дополнительных возможностей для настройки иконок или цвета темы для темной темы. При этом iOS даёт возможность редактировать изображение для запуска приложения:

Маскируемые иконки

Chrome сейчас поддерживает маскируемые иконки в Canary, поэтому скоро поддержка будет как для стандартных ярлыков, так и для WebAPK; Firefox также занимается добавлением поддержки этой технологии.

Инструменты

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

Генераторы для магазинов приложений

В прошлом году появилось много инструментов для поддержки веб-разработчиков, желающих опубликовать PWA в Google Play Store без использования Android Studio и нативных инструментов с нуля.

pwa2apk стал первым инструментом для преобразования PWA в PWA, готовое для публикации в Google Play Store

Веб-компонент pwa-install из PWA Builder в действии


Время «маскировать» ваши иконки PWA!

Lighthouse

Единственное недавнее большое изменение в Lighthouse для PWA — это то, что теперь он будет проверять иконку для iOS/iPadOS. Я считаю, что это будет иметь огромное значение, потому что я видел очень много PWA без иконки для iOS, а типичная реакция на это была такой: «Lighthouse сказал, что всё было правильно».

Я настаивал на этом изменении в Lighthouse (вы можете проследить обсуждение с командой Chrome в треде ниже):

Использование

Трудно получить информацию о том, сколько компаний создают PWA или как пользователи реагируют на них с точки зрения установки. В 2019 году я не особо почувствовал рост числа компаний, использующих PWA, или пользователей, активно на них переходящих. Есть некоторые ниши, такие как люди, которые заботятся о своей конфиденциальности, удаляя нативные приложения, но это малая часть рынка.

Один из самых посещаемых сайтов в мире теперь прогрессивное веб-приложение

Единственные свежие данные, которые у нас есть про PWA — данные от браузера Samsung Internet:

Таким образом, в период с апреля по декабрь 2019 года мы имеем 80 000 различных доменов, по крайней мере, с одним PWA внутри; хотя это не будет точным количеством различных PWA, это хорошее приближение. Samsung Internet насчитывает около 6% всех пользователей, поэтому большое количество людей считают это значение репрезентативным для всего веба.

Платформы

Прогрессивные веб-приложения полностью поддерживаются (включая Service Workers) в браузерах у 93% пользователей сети Интернет.

PWA могут быть установлены у 86% пользователей (82% — из браузера, 4% — только из магазинов приложений, а не из имеющихся браузеров).

Мы можем установить PWA в Android, iOS, iPadOS, Windows 10 (и в будущей 10X), Windows 7, Windows 8.x, Xbox One, macOS, Linux (64-битной), Chrome OS и kaiOS.

Можно упомянуть, что PWA нельзя установить на умные часы, умные телевизоры, Apple TV, Chromecast, Android TV, PlayStation, автомобили Tesla (да, у этих машин есть браузер), другие игровые приставки, цифровые помощники (таких как Facebook Portal, Nest Home или Amazon Echo) или шлемы и очки виртуальной и дополненной реальности, такие как продукция Oculus.

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

Рассмотрим платформы, где мы уже можем установить PWA в январе 2020 года:

Android

Мы можем установить прогрессивные веб-приложения на устройства под управлением Android (телефоны и планшеты) следующими способами:

Android — всё ещё единственная платформа, поддерживающая все три режима работы приложения, описанные в спецификации Web App Manifest

iOS и iPadOS

Меню «На экран Домой» из iPad OS 13 для установки ярлыков сайтов и автономных PWA

У нас был режим «веб-приложений на домашнем экране» с самого начала существования iPhone, но давайте рассмотрим первую версию, поддерживающую Service Workers и, по крайней мере, основную часть Web App Manifest. iOS 13 и iPadOS 13 — первые версии, в которых PWA фактически имеют базовый пользовательский интерфейс, соответствующий нативным приложениям. Всё ещё есть ошибки и отличия между автономным режимом (PWA) и Safari, как, например, API WebRTC для доступа к камере (полезно для таких вещей, как распознавание QR-кодов). Хотя команда WebKit говорит, что они работают над этим, соответствующий «баг» открыт уже 2 года.

Таким образом, мы можем установить PWA, используя:

  • Распространение для корпоративных пользователей: из файла конфигурации для мобильных устройств (Mobile Configuration File); это предназначено для корпоративных пользователей, но будет работать и для обычных, если они примут соответствующий файл. В этом случае файл может содержать одно или несколько «веб-приложений», которые можно запускать в «автономном» режиме, поэтому домашний экран будет содержать PWA после установки файла конфигурации.

Windows и Xbox

PWA появятся в меню «Пуск» на устройствах Windows


На платформе Windows вы можете установить PWA через:

  • Установка из браузеров в Windows 10: Google Chrome 70+ и Microsoft Edge (начиная с версии, которая будет выпущена в январе 2020 года). Вы не сможете установить PWA из Firefox, IE или Edge до 15 версии.
  • Установка из браузеров в Windows 7/8.x: Google Chrome 70+ и будущая версия Microsoft Edge. Вы не сможете установить PWA из Firefox, IE или Edge до 15 версии.
  • Установка из браузеров в WindowsX (складывающихся): Microsoft Edge (в будущем).
  • Магазины приложений: Microsoft Store для Windows 10 (для настольных ПК и Hololens) и Xbox One. Вы не сможете установить PWA в Windows 10 для мобильных устройств или любой другой устаревшей мобильной ОС от Microsoft.

Microsoft Edge для Windows, macOS и Linux позволяет установить любой веб-сайт в качестве приложения; сайт будет выглядеть как PWA на рабочем столе, даже если на сайте нет Service Worker или надлежащего файла манифеста.

Microsoft Edge (новая, Chromium-версия) позволяет вам установить любой сайт в качестве PWA, даже если он не соответствует критериям PWA или даже если это сайт 1991 года. Google Chrome на компьютере также имеет такую возможность, но она не такая явная: вам нужно создать ярлык, используя меню «Дополнительные инструменты» — «Создать ярлык…» и отметив галочку «Открыть в отдельном окне», что, как мне кажется, не совсем очевидно.

Первый сайт в мире, установленный как «приложение» с помощью Microsoft Edge на macOS

Другие платформы

macOS — мы можем установить PWA только из браузеров Google Chrome 73+ и Edge. Safari для macOS и Firefox не поддерживают установку PWA.

Linux 64-bit — установка возможна только через Google Chrome 70+.

ChromeOS — установка из браузера доступна начиная с ChromeOS 67+; технология TWA в ChromeOS недоступна.

kaiOS — только из магазинов (kaiStore, JioStore); эта ОС основана на старой платформе Gecko, но при этом имеет базовую поддержку Service Workers. Недостаточно документации, чтобы понять, что возможно, а что нет на этой платформе для фичерфонов.

Редактирование приложений

Редактор проекта предлагает удобное окружение для разработки приложений. Слева можно увидеть файловую структуру проекта в виде дерева, а справа панель редактора. Вы можете добавлять и удалять файлы, используя контекстное меню.

Валидация Манифеста

WebIDE автоматически проверяет манифест на наличие определенных общих ошибок. Если она найдет ошибку, то укажет, что в приложении имеются проблемы, а также даст более детальное описание проблемы:

Шорткаты редактора кода

Эта таблица перечисляет клавиатурные сокращения по умолчанию для редактора исходного кода.

Вместо них в разделе настроек инструментов разработчика, вы можете выбрать схему привязки клавиш Vim, Emacs или Sublime Text.

Для этого откройте страницу , выберите настройку и присвойте ей значение «vim», «emacs» или «sublime». Если вы сделаете это, выбранная схема привязки будет использоваться для всех инструментов разработчика, использующих редактор исходного кода. Вам нужно будет повторно открыть редактор, чтобы изменения вступили в силу.

Начиная с Firefox 33 и выше, настройки схемы привязки клавиш выставляются в разделе настроек инструментов разработчика, и вы можете установить её там вместо ручного редактирования .

Команда Windows OS X Linux
Перейти к строке Ctrl + J Cmd + J Ctrl + J
Найти в файле Ctrl + F Cmd + F Ctrl + F
Найти далее Ctrl + G Cmd + G Ctrl + G
Выделить всё Ctrl + A Cmd + A Ctrl + A
Вырезать Ctrl + X Cmd + X Ctrl + X
Копировать Ctrl + C Cmd + C Ctrl + C
Вставить Ctrl + V Cmd + V Ctrl + V
Отменить Ctrl + Z Cmd + Z Ctrl + Z
Повторить Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Отступ Tab Tab Tab
Убрать отступ Shift + Tab Shift + Tab Shift + Tab
Переместить строки вверх Alt + вверх Alt + вверх Alt + вверх
Переместить строки вниз Alt + вниз Alt + вниз Alt + вниз
За-/раскомментировать строки Ctrl + Cmd + Ctrl +

Автодополнение кода

Редактор имеет функцию автодополнения кода CSS и JavaScript. Для CSS автодополнение всегда включено:

Чтобы открыть подсказки автодополнения для JavaScript, нажмите Control + Space:

Встроенная документация

Редактор также может показывать встроенную документацию к JavaScript. Нажмите Shift + Space, чтобы увидеть всплывающее окно с документацией к объекту, на котором находится курсор:

Нажатие на ссылку в окне с документацией перенаправит вас на страницу с MDN с описанием объекта, к которому требуется дополнительная документация.


С этим читают