Google web toolkit

#openDevelopment #codeSaveLives
Привет Хабр! Я завершил работу над прототипом платформы, которая объединяет психологов-добровольцев и людей, нуждающихся в экстренной помощи. Это инициатива в ответ на насилие, происходящее в настоящее время в Беларуси и Ливане:
https://brmlab.cz/project/belhack/start

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

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

Презентация механики:

*** Технические подробности ***

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

#googleMeet #googleSpreadSheet #googleAppsScript #googleChromeExtension

Для создания прототипа я использовал технологии и сервисы Google: электронную таблицу, встречу, расширение, apps script.

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

Как пациент: Нажав на кнопку, я присоединюсь к встрече, после чего смогу получить поддержку от свободного в данную минуту специалиста - волонтера.

Как психолог: Я готов начать прием людей, нажимаю кнопку Ready to help. Мне нужно нажать кнопку Help in Progress (используя расширения), когда кто-то присоединяется, и статус в таблице этого доктора меняется на 1. Затем строка с врачом исчезает со страницы.

Общение происходит в среде Google Meet.

Буду рад новым людям, которые готовы помочь провести тестирования, отловить жуков и помочь спуску в продакшен.

В конце мая с. г. в Google сообщили, что теперь они намерены в алгоритм ранжирования сайтов ввести понятие "качества страницы" (page experience). А в это понятие они включили: скорость загрузки страницы, интерактивность (т.е. например, чтобы кнопка быстро приобретала способность нажиматься), и стабильность контента во время загрузки (т.е. вы не должны случайно нажимать кнопки или ссылки из-за того что всё на экране прыгает пока страница грузится). Кроме того страница должна быть оптимизирована для мобильных устройств (mobile friendly), безопасна для просмотра, передаваться по протоколу https (не http), и не иметь навязчивой всплывающей рекламы (intrusive interstitials).

Но в Google также заявили, и о том что они понимают, что COVID-19 замедлил все работы, и поэтому дают владельцам сайтов, ещё как минимум 6 месяцев, чтобы привести их в соответствие новым требованиям. Вот ссылка на официальный пост в их блоге для вебмастеров: Evaluating page experience for a better web.

Что же делать? Судя по всему, сначала надо проверить свой сайт на их же инструменте Measure: https://web.dev/measure/ .

В качестве первого примера давайте измерим этот сайт, т.е. Хабр:

Как видим, не всё с точки зрения новых метрик Google здесь хорошо. Будем считать, что оранжевый цвет нас устраивает (хотя Google уже упоминал где-то, что считает неплохим результатом 75% и выше), а Accessibility (т.е. доступность людям с ограниченными возможностями) нас не очень беспокоит, так как это пока Google не будет требовать в обязательном порядке. Очевидно, что явная проблема здесь - performance, т.е. скорость загрузки страницы.

Теперь давайте проверим этот же сайт (Хабр) на оптимизацию к мобильным устройствам: https://search.google.com/test/mobile-friendly

Как видим, с этим всё в порядке. Учитывая, что сайт использует протокол https, не имеет навязчивой рекламы и безопасен для просмотра - делаем вывод, что всё же имеется одна, но существенная (я бы сказал ключевая) проблема - скорость загрузки страниц. Тем не менее, возможно, что именно для этого конкретного сайта указанная проблема всё же не сыграет большой роли, учитывая его большую популярность. Но справедливо ли это утверждение для вашего сайта?

Итак, надо прежде всего понять, что традиционными методами SEO (метатеги, вхождения ключевых слов, внешние ссылки, и прочие полезные процедуры) ключевую проблему скорости загрузки страниц или оптимизации сайта к мобильным устройствам не разрешить. Возможно потребуется поиск новой современной платформы, и перенос на неё всего сайта. Да это так, увы.

Рассмотрим сначала AMP как платформу спонсируемую Google, и задуманную специально для решения описываемых выше задач. Поскольку я не раз уже писал здесь на Хабре о голосовом помощнике Алиса (например: здесь, здесь, и тут), позволю себе в качестве пример привести, сделанный на AMP не большой статичный сайт Квиз 101, предлагающий викторины (квизы) для игры с Алисой:

Сделаем замеры и для него:

И сразу же проверим этот же сайт (Квиз 101) на оптимизацию к мобильным устройствам:

Как видите, все показатели можно считать или хорошими или очень хорошими. Просто этот маленький сайтик не может позволить себе роскошь игнорировать рекомендации Google!

Что касается владельцев сайтов на WordPress - имеется официальный плагин: AMP for WordPress. Поэтому начинайте его использовать, если ещё не делали это!

Универсальной панацеи на все случаи жизни конечно же нет. Но для многих других случаев советую просмотреть в первую очередь в сторону Gatsby (там ребята поставили себе цель добиться в этом направлении совершенства, и у них начинает получаться), или NEXT.js (первый фреймворк, официально поддерживающий AMP). В любом случае, время ещё есть, чтобы перевести свой сайт в современный Web, хотя его (времени) не так уж и много, если, конечно, вас интересует продвижение вашего сайта в поиске Google. Кстати, не думаю, что и Яндекс позволит себе в этом вопросе сильно отстать - ведь конкуренция между поисковиками за качество поисковой выдачи очень остра.

На сегодня всё. Другие материалы следуют. Кому подобное читать интересно - подписывайтесь на уведомления о новых публикациях. Подписаться можно на этом сайте (кнопка Подписаться внизу), или на Telegram-канал IT Туториал Захар, или Twitter @mikezaharov, или ВКонтакте. А кто захочет сделать донат - это пожалуйста сюда: https://sobe.ru/na/microbot

Если вы web-разработчик, то я уверен, что вы уже знакомы с инструментами разработчика Chrome. Они имеют большой перечень функций для помощи web-разработчику. Но многие используют самый минимум, просто чтобы выполнить текущую задачу.

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

1. Командное меню.

Одна из особенностей, которую я люблю в своем редакторе (VS Code) - это функция палитры команд. Она даёт разработчикам возможность выполнять множество команд прямо с клавиатуры. Всё, что вам нужно нажать ctrl + shift+p, и у вас появятся сотни доступных команд. Эта функция реализуется в нескольких приложениях, а теперь она доступна и в инструментах Chrome.

Давайте представим, что вам необходимо сделать скриншот HTML узла на web-странице. Всё, что вам нужно сделать для этого это:

1. Открыть инструменты разработчика
2. Выбрать узел, который вам необходим
3. Нажать ctrl + shift+p и написать слово Screenshot

Существует несколько вариантов сделать снимок экрана, и вы можете выбрать любой из них.

2. Консоль может сделать многое.

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

Информирование, предупреждение и ошибки.

В приложениях у нас есть различные уровни сообщений. Error, warn и info являются наиболее распространенными. У вас уже есть эта поддержка в Chrome Dev Tools с помощью методов console.info, console.warn и console.error. Давайте посмотрим на них в действии.

Печать массива в виде таблицы.

Представьте, что у вас есть массив объектов, и вы хотите увидеть все элементы и атрибуты. Вы можете использовать обычный console.log. Однако это просто даст нам текстовый вывод. Вы также можете использовать метод console.table для печати информации в табличном формате, что делает её более удобочитаемой для человека.

Добавление стилизации при выводе в консоль.

Вы можете добавить стили CSS при выводе логов, чтобы выделить необходимые детали.

Группировка логов.

Если у вас есть множество логов, то время их отладки / анализа резко сократится, если вы сможете их сгруппировать. Консоль предлагает для этого три метода: console.group, console.groupCollapsed и console.groupEnd.

Измерение времени выполнения операциями.

Хотя существуют и другие способы измерения времени выполнения кода в JavaScript, вы также можете использовать console.time и console.timeEnd, чтобы легко его измерить.

3. Копирование запроса как fetch / cURL / NodeJS fetch.

Когда мы вызываем API из внешнего интерфейса, если предполагаемого результата нет, мы обычно используем Postman или cURL для дальнейшего исследования. Вместо того, чтобы вручную вводить URL-адрес, заголовки и параметры в эти инструменты, вы можете скопировать запрос как вызов fetch, cURL или как вызов NodeJS fetch, открыв вкладку Network в Chrome Dev Tools.

4. Ссылка на текущий выбранный тег.

Если вы хотите выполнить какие-то действия с узлом HTML, вы можете просто получить ссылку на него. В Chrome Dev Tools $0 в консоли всегда будет ссылаться на текущий выбранный узел.

5. Точки останова.

Я почти уверен, что вы использовали точки останова в Chrome Dev Tools. Однако, помимо базовой функциональности, Chrome Dev Tools поддерживает несколько расширенных возможностей с точками останова.

Условные точки останова.

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

Точки останова изменений DOM.

Я сталкивался с ситуациями, когда несколько сценариев изменяют элементы DOM. В таких ситуациях очень трудно найти правильный блок скрипта, который произвел модификацию. Chrome Dev Tools упрощает это, позволяя нам добавлять точку останова в HTML-узел в событии модификации поддерева.

В дополнение к этому, в Chrome Dev Tools есть поддержка точки останова для запросов XHR, исключений, функций и Event Listener.

6. Отмена минификации кода.

При попытке выявить проблему в веб-приложении, выпущенным в продакшн, вероятность того, что придется отлаживать минифицированный код JS, очень высока. Если вы откроете минифицированный файл в Chrome Dev Tools, выплывет окно для отмены минификации. В нижней части редактора есть еще одна кнопка с фигурными скобками, которая имеет ту же функциональность. Это поможет вам привести минифицированный код в читаемое состояние.

7. Переключение состояния элемента.

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

Подобно hover, он может переключать состояния active, focus, focus-within и visited.

8. Возможность сохранить логи.

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

9. Отладка произвольных функций.

Используя консоль инструментов разработчика Chrome, мы можем переписывать функции во время отладки. Эта функция экономит время без необходимости редактировать исходные файлы и обновлять страницу. Поскольку такие функции не перечислены на вкладке Источники, отладка такой функции кажется трудной. Однако вы можете исправить это, введя имя функции в консоль и дважды щелкнув на выводе метода, чтобы перейти к виртуальной машине. Используя этот приём, вы можете разместить точки останова, как если бы они были в исходном файле.

10. Режим проектирования.

Когда мы изменяем HTML, обычно нужно дождаться обновления страницы, чтобы увидеть изменения. Вы можете сэкономить время, используя designMode, который позволяет мгновенно изменять страницу. Чтобы переключить режим разработки, введите следующий код в консоли.

document.designMode="on"

Последние штрихи

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

От переводчика:

Надеюсь, вам понравилась эта статья. Эту и многие другие полезные статьи для начинающих Frontend-разработчиков я транслирую в Telegram-каналеFrontend.school(), где также готовлю полезные викторины для проверки своих знаний.